refactor: use babel-plugin-module-resolver for aliasing

Author: satya164

templates/common/example/metro.config.js

@@ -1,29 +1,27 @@
 const path = require('path');
-const fs = require('fs');
 const blacklist = require('metro-config/src/defaults/blacklist');
 const escape = require('escape-string-regexp');
+const pak = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
-const pak = JSON.parse(
-  fs.readFileSync(path.join(root, 'package.json'), 'utf8')
-);
 
-const modules = [
-  '@babel/runtime',
-  ...Object.keys({
-    ...pak.dependencies,
-    ...pak.peerDependencies,
-  }),
-];
+const modules = Object.keys({
+  ...pak.peerDependencies,
+});
 
 module.exports = {
   projectRoot: __dirname,
   watchFolders: [root],
 
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we blacklist them at the root, and alias them to the versions in example's node_modules
   resolver: {
-    blacklistRE: blacklist([
-      new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
-    ]),
+    blacklistRE: blacklist(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
 
     extraNodeModules: modules.reduce((acc, name) => {
       acc[name] = path.join(__dirname, 'node_modules', name);

templates/expo-library/example/$package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/runtime": "^7.9.6",
+    "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "~8.1.0",
     "expo-cli": "^3.17.18"
   }

templates/expo-library/example/babel.config.js

@@ -1,6 +1,21 @@
+const path = require('path');
+const pak = require('../package.json');
+
 module.exports = function (api) {
   api.cache(true);
+
   return {
     presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          alias: {
+            // For development, we want to alias the library to the source
+            [pak.name]: path.join(__dirname, '..', pak.source),
+          },
+        },
+      ],
+    ],
   };
-};
+}

templates/expo-library/example/webpack.config.js

@@ -1,25 +1,24 @@
 const path = require('path');
 const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+const { resolver } = require('./metro.config');
 
 const root = path.resolve(__dirname, '..');
-const node_modules = path.resolve(__dirname, 'node_modules');
+const node_modules = path.join(__dirname, 'node_modules');
 
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
-    include: path.resolve('../src'),
+    include: path.resolve(root, 'src'),
     use: 'babel-loader',
   });
 
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we alias them to the versions in example's node_modules
   Object.assign(config.resolve.alias, {
-    'react': path.join(node_modules, 'react'),
+    ...resolver.extraNodeModules,
     'react-native-web': path.join(node_modules, 'react-native-web'),
-    '<%= project.slug %>': path.join(
-      root,
-      require('../package.json').source
-    ),
   });
 
   return config;

templates/native-library/example/$package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/runtime": "^7.9.6",
+    "babel-plugin-module-resolver": "^4.0.0",
     "metro-react-native-babel-preset": "^0.59.0"
   }
 }

templates/native-library/example/babel.config.js

@@ -0,0 +1,16 @@
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          [pak.name]: path.join(__dirname, '..', pak.source),
+        },
+      },
+    ],
+  ],
+};