Metro Config
React Native build tool configuration is used to add default settings to differentiate error issues caused by link
packages in business development. The project uses yarn workspaces
to manage multiple interdependent projects, which causes dependencies to be installed in the root node_modules
dependency directory, resulting in missing dependency packages in the child project's node_modules
and causing errors. By using the @uimjs/metro-config
plugin and configuring the .pkgresolverc.json
file, we can specify the original directory of the package to solve this problem.
Install
$ npm i @uimjs/metro-config
app/metro.config.js
❶ Modify the default configuration The default configuration has been encapsulated to handle package dependency issues.
After React Native 0.72,@uimjs/metro-config@v2
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+ const conf = require('@uimjs/metro-config');
- /**
- * Metro configuration
- * https://facebook.github.io/metro/docs/configuration
- *
- * @type {import('metro-config').MetroConfig}
- */
- const config = {};
- module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+ module.exports = mergeConfig(getDefaultConfig(__dirname), conf.default());
Before React Native 0.72,@uimjs/metro-config@v1
- module.exports = {
- transformer: {
- getTransformOptions: async () => ({
- transform: {
- experimentalImportSupport: false,
- inlineRequires: true,
- },
- }),
- },
- };
+ const conf = require('@uimjs/metro-config');
+ module.exports = conf.default();
app/.pkgresolverc.json
❷ Add configuration {
// The package is used for react-native business content
"@uimjs/react-native-app-shared": "../shared/src/main.js",
}
{
"app-shared": "../packages/webview/lib/index.js"
}
app/package.json
❸ Add dependencies "devDependencies": {
+ "@uimjs/metro-config": "1.0.0",
}
index.js
❹ Modify Entry Contributors
As always, thanks to our amazing contributors!
Made with contributors.
License
This package is licensed under the MIT License.