CODEWITHSUNDEEP
javascriptnode.jsnpmwebpacknvm
bmills
bmills

Reputation: 565

npm link with webpack - cannot find module

I'm trying to npm link a module to a project using webpack as its bundler. Of course, after trying many things, I keep getting this error:

ERROR in ./src/components/store/TableView.jsx
Module not found: Error: Cannot resolve module 'react-bootstrap-table'

Here are the exact steps I take when doing this:

1.) cd ../forks/react-bootstrap-table
2.) npm link
(success, checked ~/.nvm/.../node_modules/react-bootstrap-table for symlink and it's there)
3.) cd ../../projRoot/
4.) npm link react-bootstrap-table
(no errors thrown?, says successful link)
5.) node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

Solutions I've tried:
- https://webpack.github.io/docs/troubleshooting.html
- How to make a linked component peerDepdencies use the equivalent node_modules of the script being linked to?
- And many purple links on google serps

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname)

module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
  entry: [
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['react-hot','babel']
    },
    {
      test: /\.scss$/,
      loaders: ['style','css','sass'],
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      loaders: ['style','css']
    },
    {
      test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      loader: 'file-loader'
    }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    fallback: path.resolve(__dirname, './node_modules')
  },
  resolveLoader: {
    fallback: path.resolve(__dirname, './node_modules')
  },
  output: {
    path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'app/dist') : path.resolve(ROOT_PATH, 'app/build'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(ROOT_PATH),
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    stats: 'errors-only',
    host: '192.168.1.115'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

Notes:
1. this is the only symlink in the project
2. I run npm install inside forked version (also tried without, doesn't work)
3. I use NVM, but I have used symlinks before without webpack successfully.

I've been at this for a few days now, any help will be much appreciated.

Upvotes: 35

Views: 26308

Answers (4)

Gerardo Roza
Gerardo Roza

Reputation: 3394

Just in case it's useful for others, the solution of adding the resolve.symlinks configuration to false suggested by @Beat was not enough in my case, I had to perform the following steps to solve it:

In the library:

  1. Setup the libraries that are generating issues as peerDependencies in the package.json instead of dependencies or devDependencies, e.g. in my case react:
"peerDependencies": {
  "react": "^16.8.6",
  ...
}
  1. run npm install
  2. build the library (in my case, with a rollup -c npm script

In my main app:

  1. change the version of my library to point to my local project with a relative path in package.json, e.g.
"dependencies": {
  "my-library": "file:../../libraries/my-library",
  ...
}

  1. Add resolve.symlinks = false to my main app's webpack configuration

  2. Add --preserve-symlinks-main and --preserve-symlinks to my package.json start script, e.g:

"scripts": {
  "build": "set WEBPACK_CONFIG_FILE=all&& webpack",
  "start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}
  1. run npm install
  2. run npm run start

Upvotes: 0

behraaang
behraaang

Reputation: 113

Also make sure you have bundle and yarn installed and executed in the linked package

Upvotes: 1

Beat
Beat

Reputation: 4412

I was facing a similar issue with webpack and ended up by adding this my webpack.config.js:

module.exports = {
    resolve: {
        symlinks: false
    }
};

Here is the link to webpack docs. Since your question there happened a lot to webpack and their api, so I do not know how much relevance my answer still has according to your question. But for people facing this or a similar issue today this could be a solution. As to be seen, there are still people complaining about:

Upvotes: 30

bmills
bmills

Reputation: 565

Okay guys, this is specific to my use case, but make sure to follow all the instructions to completely build the library you are symlinking. Initially, I a npm install and gulp build, but that wasn't enough. I had to run a few extra commands to get the library to fully build.

Now it works! If you are still having issues, go through the documentation for each library you are symlinking, and use my webpack config as a template for resolving external libraries.

Upvotes: -1

Related Questions