How to set up a private shared library of React components with Webpack

Question

I have a number of React components that I use in multiple Webpack projects, and I want to share them via NPM. So naturally I:

1. put those components into a (private) GitHub repo
2. Added that repo to a main project's package.json
3. So that I could develop on the component library simultaneously, I used npm link to symlink it into my main project.

However, Webpack can't resolve react from my library component files, because there's no node_modules in the library project folder or any of its parents.

I've seen 3rd party React components that were built as a bundle with react in the externals of the Webpack config, but I don't want to build a separate bundle or do anything complicated, I just want to require the raw source for my library components. Does anyone know how to do that?

Answer 1

I wish I could find a more elegant solution, but adding this to my webpack.config.js worked:

resolve: {
    fallback: path.resolve(__dirname, 'node_modules')
},
resolveLoader: { root: path.join(__dirname, "node_modules") },

However, I ultimately decided it would be easier just to share the components between projects in a git submodule.