Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i have local javascript library How do i config metro.config.js #447

Closed
vtn-dev2016 opened this issue Aug 29, 2019 · 4 comments
Closed

i have local javascript library How do i config metro.config.js #447

vtn-dev2016 opened this issue Aug 29, 2019 · 4 comments

Comments

@vtn-dev2016
Copy link

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:

@veerjainATgmail
Copy link

@jeniasaigak
Copy link

jeniasaigak commented Nov 19, 2019

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. Module @babel/runtime/helpers/interopRequireDefault does not exist in the Haste module map react-native#21310 (comment)

@ajsmth
Copy link

ajsmth commented Nov 22, 2019

@zmefz you are a life saver, thank you!

@MichaReiser
Copy link

It seams that the question was answered. Closing. Feel free to re-open if this isn't the case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants