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

❶ Modify the default configuration app/metro.config.js

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();

❷ Add configuration app/.pkgresolverc.json

{
  // The package is used for react-native business content
  "@uimjs/react-native-app-shared": "../shared/src/main.js",
}

🚧 Adding this configuration is necessary for local debugging of development components. If you place the package in a new workspace directory, you will also need to configure it.

{
  "app-shared": "../packages/webview/lib/index.js"
}

❸ Add dependencies app/package.json

"devDependencies": {
+  "@uimjs/metro-config": "1.0.0",
}

❹ Modify Entry index.js

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

This package is licensed under the MIT License.