Cannot find module './node_modules/babel-loader/index.js' #1260

Closed
renestalder opened this Issue Jul 17, 2015 · 13 comments

Projects

None yet

7 participants

@renestalder

This isn't entirely a new problem. I found several topics here and most solutions point to the resolve configuration, e.g. #1083 . Anyway, I've tried all the things and can't get my script running.

My folder structure looks like this:

- package.json
- node_modules
- dist
- src
- gulp
  - tasks
    - javascript.js

In the javascript.js I have following configuration

var projectRoot = process.env.PWD; // Absolute path to the project root
var resolveRoot = path.join(projectRoot, 'node_modules'); // project root/node_modules

var webpackConfig = {
    context: config.src, // ./src
    entry: {
      a: './index'
    },
    output: {
      path: config.javascript.dest, // ./dist
      filename: '[name].entry.js'
    },
    plugins: [],
    resolve: {
      root: [
        resolveRoot,
        path.join(__dirname, 'node_modules')
      ],
      extensions: ['', '.js']
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader'
        }
      ]
    }
  };

With this configuration, running by a gulp task, I always get

Error: Cannot find module './node_modules/babel-loader/index.js'

I spent hours trying and trying, without results. I would be happy for a hint or help with this.

@darul75
darul75 commented Jul 17, 2015

I am not sure but you could check in package.json if in

devDependencies

or

dependencies

it has to be in devDependencies I guess

@sokra
Member
sokra commented Jul 18, 2015

Run webpack with --display-error-details

@renestalder

@darul75 I have all the stuff in dependencies and changed it to devDependencies, but doesn't seem to make a difference. And when, this would be a horrible behaviour.

@sokra Can I do this with the Node.js API too? Not using the compiler directly and also configuring webpack without webpack.config.js, directly via the API.

That's what I have by now.

[14:24:09] Starting 'javascript'...

/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206
                    throw e;
                          ^
Error: Cannot find module './node_modules/babel-loader/index.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at DependenciesBlock.loadPitch (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:193:17)
    at DependenciesBlock.doBuild (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
    at DependenciesBlock.build (/Users/renestalder/projects/sample project/node_modules/webpack/lib/NormalModule.js:83:14)
    at Tapable.Compilation.buildModule (/Users/renestalder/projects/sample project/node_modules/webpack/lib/Compilation.js:123:9)
    at Tapable.<anonymous> (/Users/renestalder/projects/sample project/node_modules/webpack/lib/Compilation.js:391:8)
    at Tapable.<anonymous> (/Users/renestalder/projects/sample project/node_modules/webpack/lib/NormalModuleFactory.js:57:13)

Creating a webpack.config.js with my configuration and running `webpack --display-error-details`` I get following output in the terminal:

$ webpack --display-error-details

/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206
                    throw e;
                          ^
Error: Cannot find module './node_modules/babel-loader/index.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at DependenciesBlock.loadPitch (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:193:17)
    at DependenciesBlock.doBuild (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
    at DependenciesBlock.build (/Users/renestalder/projects/sample project/node_modules/webpack/lib/NormalModule.js:83:14)
    at Tapable.Compilation.buildModule (/Users/renestalder/projects/sample project/node_modules/webpack/lib/Compilation.js:123:9)
    at Tapable.<anonymous> (/Users/renestalder/projects/sample project/node_modules/webpack/lib/Compilation.js:391:8)
    at Tapable.<anonymous> (/Users/renestalder/projects/sample project/node_modules/webpack/lib/NormalModuleFactory.js:57:13)
    at Tapable.applyPluginsAsyncWaterfall (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:69)
    at Tapable.onDoneResolving (/Users/renestalder/projects/sample project/node_modules/webpack/lib/NormalModuleFactory.js:37:10)
    at Tapable.onDoneResolving (/Users/renestalder/projects/sample project/node_modules/webpack/lib/NormalModuleFactory.js:118:6)
    at Tapable.<anonymous> (/Users/renestalder/projects/sample project/node_modules/webpack/lib/NormalModuleFactory.js:114:23)
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:251:17
    at done (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:132:19)
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:32:16
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:248:21
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:572:34
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:251:17
    at done (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:132:19)
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:32:16
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/async/lib/async.js:248:21
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:29:4
    at onResolved (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:39:10)
    at innerCallback (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:89:22)
    at loggingCallbackWrapper (/Users/renestalder/projects/sample project/node_modules/webpack/node_modules/enhanced-resolve/lib/createInnerCallback.js:21:19)
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/tapable/lib/Tapable.js:134:6
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/enhanced-resolve/lib/ModulesInDirectoriesPlugin.js:55:11
    at /Users/renestalder/projects/sample project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:191:15
@sokra
Member
sokra commented Jul 22, 2015

Looks like you used a relative path somewhere in your webpack.config.js where an absolute path is expected.

@variable
variable commented Sep 8, 2015

Had the same issue, fixed by using absolute path for context

@renestalder

Couldn't find the problem yet.

@Nitive
Nitive commented Sep 11, 2015

It can be fixed by adding resolveLoader into config

resolveLoader: {
  root: path.join(__dirname, 'node_modules')
},
@renestalder

Isn't that the same as I have in my config?

resolve: {
  root: [
    resolveRoot,
    path.join(__dirname, 'node_modules')
  ],
  extensions: ['', '.js']
}
@darul75
darul75 commented Sep 11, 2015

not sure but your root array concatenate 2 absolute paths ?

@renestalder

The resolveRoot should hold an absolute path, because process.env.PWD should return the absolute path where the script is running.

var projectRoot = process.env.PWD; // Absolute path to the project root
var resolveRoot = path.join(projectRoot, 'node_modules'); // project root/node_modules

And I was sure, last checked, it was correct.

Anyway, the second item in the root array might be a relative path which points to the same location. This shouldn't do anything if it's wrong, as long the first path is correct IMHO.

@renestalder

Oh, look at that. I totally oversaw @variable's answer. While I searched the error in the resolve path properties, it was the context which was set to a relative path the whole path.

By adding absolute path to context, It works.

context: path.join(process.env.PWD, 'src')

Thank you all. Quite hard to deal with all the absolute paths while other apis all work with relative paths.

@lykyd
lykyd commented Mar 29, 2016

I had a pretty similar issue using Grunt and Yeoman.
I fixed it by adding in my Gruntfile.js :

connect().use(
   '/node_modules',
   connect.static('./node_modules')
),

in the connect declaration of the "grunt serve" process

@leefsmp
leefsmp commented Sep 25, 2016

Solved by using path.resolve('./src/..') in webpack resolve instead of relative url, as mentioned in comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment