Search code examples
npmwebpacklerna

Webpack keeps including node_modules from dependencies when they are already in main vendor file

I'm using a self made component library to share components between my projects. The problem is that even after using the Authoring libraries guide by webpack it keeps including those dependencies in my main build and I am out of ideas on what setting that this is caused by...

Build analysis (when bundling my app)

Here you can see the node_modules and wizer-components/node_modules. Including react-dom twice (and others)

enter image description here

Build analysis (of a component)

As you can see no node_modules are bundled here...

enter image description here

Setting files

Because I can't find where the issue lies I have created gists of my config files:

  • webpack.config.js (of component library)
  • webpack.config.production.js (of app)

Setup

Just as info, I'm using a monorepo setup with lerna to npm link the dependency of (wizer-components) without the need to push it to npm as a module. Could this be an issue in where webpack thinks that it needs to re-add the react (and others)?

Solution

  • After a total of 4 days of trying to make this work (was doing this before I asked the question), I managed to solve it (FINALLY)!

    The issue was with lerna / NPM link and dependency resolving, see handy links at the bottom of this answer.

    I fixed it by doing the following steps:

    1. Moving the dependencies (react, react-dom) to peerDependencies in the wizer-components (my component library) package.json file
    2. Removing all my node_modules folders (app and component library)
    3. Running $ lerna bootstrap to re-download my node_modules
    4. Removing my build process of my component library (I build these when I build my app)
    5. Changing my webpack.config.production.js in these key areas

    (did a picture because it wouldn't format it right on here -_-

    enter image description here

    Helpful links (also look at the comments):