ReactJS – How to use PeerDependencies when using the WebPack to publish NPM modules (React Components)? And use NPM links?

I want to publish a module that depends on react. I want to use this module in my application project, which also depends on react. I provide the following module configuration for webpack: < p>

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 acts as a dependency and peerDependency, and reacts with lib/index.js As the entry point, so I build the library as lib/index.js.

Then I run npm link from the module directory and npm link my-module from the app directory. However, it still loads both Different versions of React cause problems. How can I make my module use the same response as the application?

I read the link about peerDepenencies and npm links: https://webpack.github.io/docs/troubleshooting.html#npm-linked-modules-doesn-t-find-their-dependencies< /p>

But as you can see, I have added the fallback to the configuration (it is not clear which repository, so I added it to both repositories). What am I doing wrong here ?

My mistake was that I forgot to add the “prepublish” script to the module that built the library during installation. < /div>

I want to publish a module that depends on react. I want to use this module in my application project, which also depends on react. I provide the following module configuration 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 as a dependency and peerDependency to react, and lib/index.js as Entry point, so I built the library as lib/index.js.

Then I run npm link from the module directory and npm link my-module from the app directory. However, it still loads two different Version of React, which causes problems. How can I make my module use the same response as the application?

I read the link about peerDepenencies and npm links: https://webpack.github.io/docs/troubleshooting.html#npm-linked-modules-doesn-t-find-their-dependencies< /p>

But as you can see, I have added the fallback to the configuration (it is not clear which repository, so I added it to both repositories). What am I doing wrong here ?

My mistake was that I forgot to add the “prepublish” script to the module that built the library during installation.

Leave a Comment

Your email address will not be published.