Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack 2: cannot resolve module

I have a project like this:

root/
    webpack-config.js
    app/
       app.js
       js/
         dep.js
    core/
        module.js

Here is the webpack config file:

module.exports = {
    entry: './app/app.js',
    output: {
        path: __dirname,
        filename: "[name]-bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/     }          
        ]
    },
    resolve: {
      modulesDirectories: ['core']
    }
    ...

in app.js, I have:

import local_dep from './js/dep';
import myModule from 'module';

This works as expected with webpack 1.x, but the myModule module isn't resolved with webpack 2, I'm getting "Module not found: can't resolve 'module' in ... \app".

It seems the modulesDirectories entry is ignored and the base URL corresponds to the entry's folder.

What can I do to make modules resolve correctly with webpack 2 ?

like image 333
warpdesign Avatar asked Jul 01 '16 15:07

warpdesign


2 Answers

from: http://moduscreate.com/webpack-2-tree-shaking-configuration/

In Webpack 2, resolvers from root, modulesDirectories, and fallback settings will merge into a single property – modules. Here is how we can resolve file and module locations in Webpack 2:

  resolve: {
    modules: [
      path.resolve('./client'),
      'node_modules'
    ]
  },

You can specify a number of directories in modules, but make sure not to forget node_modules or npm package dependencies will fail to load.


So in your case what was before:

resolve: {
  modulesDirectories: ['core']
}

now needs to be

resolve: {
  modules: ['core'] // also 'node_modules' 
}
like image 199
laggingreflex Avatar answered Nov 13 '22 13:11

laggingreflex


Edit: As others have noted, for Webpack 2, something like this works:

{
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules', path.resolve(__dirname, 'core')]
  },
}

For Webpack 1, I have a setup that has this entry:

config.resolve = {
  // Allows us to include js and jsx files without specifying the extension
  extensions: ['', '.jsx', '.js'],

  root: [path.resolve('./core')]
};
like image 24
Christopher Davies Avatar answered Nov 13 '22 11:11

Christopher Davies