profile
viewpoint

Ask questionsi have local javascript library How do i config metro.config.js

bundling failed: Error: Unable to resolve module apptify-lib/lib from react native project path: Module local/lib does not exist in the Haste module map or in these directories:

facebook/metro

Answer questions zmefz

Given:

  • local-lib-alias-name - name of the module at different location which you want to import from code (e.g. shared code at monorepository)
  • ../relative/path/to/local/lib - relative path of mentioned module

Babel

Install plugin babel-plugin-module-resolver npm i babel-plugin-module-resolver --save-dev

Add module-resolver plugin to babel config (babel.config.js in my case)

// babel.config.js
module.exports = {
  //...
  plugins: [
    ['module-resolver',
      {
        alias: {
          'local-lib-alias-name': '../relative/path/to/local/lib',
        },
      },
    ],
  ],
}

Note: it will change your js module imports to right path

Metro

Edit metro config (metro.config.js in my case)

// metro.config.js
const path = require('path')

module.exports = {
  // ...
  watchFolders: [
    path.resolve(__dirname, '../relative/path/to/local/lib'),
  ],
  resolver: {
    extraNodeModules: new Proxy(
      {},
      {
        get: (target, name) => {
          if (target.hasOwnProperty(name)) {
            return target[name]
          }
          return path.join(process.cwd(), `node_modules/${name}`)
        },
      },
    ),
  },
}

Note:

  • watchFolders addition will let your code import module from new locations and watch changes at this locations
  • extraNodeModules redirects dependencies referenced from shared folders (new location/your library) to local node_modules

Links:

  1. https://callstack.com/blog/adding-an-example-app-to-your-react-native-library/ Notes: getProvidesModuleNodeModules did not work for me so I used solution from Link 2: added extraNodeModules.

  2. https://github.com/facebook/react-native/issues/21310#issuecomment-540227031

useful!

Related questions

ReferenceError: SHA-1 for file [(...).png] is not computed hot 3
`SHA-1 for file ... is not computed` when using `resolver.resolveRequest` hot 1
metro-config sharedBlacklist regexp without scape "\" hot 1
Follow symlinks? hot 1
`SHA-1 for file ... is not computed` when using `resolver.resolveRequest` hot 1
metro-config sharedBlacklist regexp without scape "\" hot 1
bundleReleaseJsAndAssets slow for react-native 0.60 / node v12 combo hot 1
Error: Cannot find module 'metro/src/DeltaBundler/Worker' hot 1
concurrent builds fail due to shared use of /tmp/metro-cache/ hot 1
metro-config sharedBlacklist regexp without scape "\" hot 1
Minification can break code (but cannot be disabled?) hot 1
Error: Cannot find module 'metro/src/DeltaBundler/Worker' hot 1
RN - Error: jest-haste-map: @providesModule naming collision hot 1
Couldn't find preset "module:metro-react-native-babel-preset" when running jest hot 1
metro-config sharedBlacklist regexp without scape "\" hot 1
source:https://uonfu.com/
Github User Rank List