How to properly use peerDependencies when publishing an NPM module (React component) with webpack? And use with npm link?

Question

I want to publish module that depends on react. I want to use this module in my app project that also relies on react. I have the following module config for webpack:

module.exports = {
  //......
  externals: {
    'react': 'react'
  },
  output: {
    library: 'my-module',
    libraryTarget: 'umd'
  },
  resolve: {
    extensions: ['', '.js'],
    fallback: [path.join(__dirname, 'node_modules')]
  },
  resolveLoader: {
    fallback: [path.join(__dirname, 'node_modules')]
  }
};

package.json has react as both a dependency and peerDependency, and has lib/index.js as the entry point, so I build the library to lib/index.js.

I then run npm link from module directory and npm link my-module from the app directory. However, it still ends up loading two different versions of React, thus causing problems. How do I make my module use the same react as the app?

I read this link concerning peerDepenencies and npm link: https://webpack.github.io/docs/troubleshooting.html#npm-linked-modules-doesn-t-find-their-dependencies

But as you can see, I have added the fallbacks to the config (it wasn't clear to which repository, so I added it to both). What am I doing wrong here?

Answer 1

My mistake was forgetting to add a "prepublish" script in the module that built the library upon installation.