CODEWITHSUNDEEP
javascriptwebpackconfigurationgulpbabeljs
Stoic Lion
Stoic Lion

Reputation: 480

javascript + gulp + babel + webpack. error: Module not found: Error: Can't resolve 'babel-loader'


I'm creating a javascript project. To create it I'm using gulp and babel. My problem is that I can't develop my code over multiple file, so I'm search a solution to 'enable' importing. At the moment I'm trying to configure webpack.

The Gulp Task is this:

gulp.task('webpack', () => {
return webpack_stream(webpack_config)
    .pipe(rename('webpack_code.js'))
    .pipe(gulp.dest('.build/asset/webpack/'));
});

The webpack.config.js is this:

module.exports = {
  entry: ['./src/asset/js/main.js'],
  output: {
    filename: 'bundle.js',
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: [
            ['env', 'stage-0',{ modules: false }],
          ],
        },
      },
    ],
  },
  resolveLoader: {
    modules: ['./node_modules'],
},
resolve: {
    modules: ['./node_modules'],
},
  target: 'node',
};

My current error is this:

Error in plugin 'webpack-stream'
Message:
    multi ./src/asset/js/main.js
Module not found: Error: Can't resolve 'babel-loader' in ...

What's wrong?
Another Question: What's I have to put as value of entry key? Only the entry point js file or the whole files of the project?
Thanks!!

Upvotes: 0

Views: 428

Answers (1)

Thiguet Cabral
Thiguet Cabral

Reputation: 171

What's wrong?

I'd guess that in your project, your Webpack instance is not finding the babel loader because of your config / environment specific issues.

I've had the exact same issue as you. Here are some troubleshooting steps for to check first:

  • See if babel-loader is actually installed. I know it is simple, but it can save you time.
  • Check which Webpack/Babel versions you're dealling with in your package.json file. I'm using Webpack 4 and Babel 8. Sounds like some newer versions doesn't accept this: use: 'babel' in your webpack.config file. You need to ensure that the -loader is being used as it follows: use: 'babel-loader'.
  • Reinstall your node_modules folder. Sometimes it works.
Another Question: 
What's I have to put as value of entry key? 
Only the entry point js file or the whole files of the project?

Accordingly to Webpack's docs: The entry object is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files. - Webpack Ref

Considering that, you should pass to the entry object, the path of a folder or a file that will be used to generate your final JS file with all your modules in it.

If you have nested files, that you don't import as modules, I think you'll have to head to the docs and see this specific case.

But if this files are nested and are being imported as modules, in your entry file/folder, they will be generated in the output file.

I know it's not much but following these steps, helped me to solve it. :)

Upvotes: 2

Related Questions