Search code examples
webpackbootstrap-multiselect

webpack cannot find node module ('bootstrap-multiselect')

My webpack config specifies a number of node modules to build into vendors.js. All modules are installed with npm and reside in a parent folder node_modules.

The folder structure:

app/scripts/a.js
node_modules/bootstrap-multiselect
webpack.config.js

Snippet from webpack.config.js:

entry: {
  vendors: ['jquery', 'bootstrap', 'bootstrap-multiselect']
}

This is fine for 'jquery' and 'bootstrap', but not for 'bootstrap-multiselect':

ERROR in multi vendors
Module not found: Error: Cannot resolve module 'bootstrap-multiselect' 
in /home/user/app

It seems as if webpack is looking into the wrong node_modules folder. It looks at the root of the app folder it seems, but then why would it still find the other modules? So I've added every variation of resolve and resolveLoader,

resolveLoader: {root: path.join(__dirname, 'node_modules')};
resolve: {root: [path.join __dirname, 'node_modules']};

Still no luck...

Solution

  • Not sure why but the package.json downloaded with npm doesn't seem to be properly configured. The main entry points to a non existing file. That's why you are probably getting the error.

    package.json

    "main": "dist/bootstrap-multiselect.js"

    The bootstrap-multiselect.js file is not under dist but dist/js. As a workaround you can:

    1. Use the full path in your vendors field and require's:

      vendors : ['jquery', 'bootstrap', 'bootstrap-multiselect/dist/js/bootstrap-multiselect']

require('bootstrap-multiselect/dist/js/bootstrap-multiselect';

    2. Or, alias the package to the 'real' file in your webpack.config.js:

      resolve: {
  alias: {
    'bootstrap-multiselect': 'bootstrap-multiselect/dist/js/bootstrap-multiselect'
  }
}

    However, sooner or later it should be fixed because I checked the github project and there the package.json file looks correct.