webpack config error of cannot resolve module

Question

When I run webpack --watch I got error of Cannot resolve module 'js/app.js'. And then my app.min.js did not complied when I do npm run dev.

I've created a git repo and this is my webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "js/app.js", //what's wrong with this line?
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0']        }
      }
    ]
  },
  output: {
    path: __dirname + "src",
    filename: "app.min.js" //this is not even complied?
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

@seti ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/js/app.js in /Users/myname/Documents/react-webpack-babel-starter/src — Maria Jane
– Maria Jane, Commented Oct 1, 2016 at 16:17

Diego Zacarias · Accepted Answer · 2016-10-01 18:06:02Z

1

When using context, the entry path should start with a ./ followed by the relative path to the entry file.

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/app.js",
  ...
}

Another way to resolve this is without using the context key and having an absolute path in the entry key like so:

entry: path.join(__dirname, 'src/js/app.js')

edited Oct 1, 2016 at 18:06

answered Oct 1, 2016 at 17:54

Diego Zacarias

7932 gold badges12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Diego Zacarias Over a year ago

Don't forget to install the babel-core npm module (npm i -D babel-core) or you will get the error ERROR in Cannot find module 'babel-core' @ multi main. Seems like you are missing it as a dependency in your package.json file.

Maria Jane Over a year ago

Why babel core is needed?

Maria Jane Over a year ago

This solved the first problem, my app.min.js is not produced still.

Diego Zacarias Over a year ago

babel-core is the babel compiler itself, it’s what facilitates running your code through a series of transforms you define. It was previously bundled within a single package with babel-cli.

Maria Jane Over a year ago

I followed a tutorial on youtube and this is the author's package.json, github.com/babel/babel/blob/master/packages/babel-core/… he did not use babel-core, are you sure babel core still needed?

|

Collectives™ on Stack Overflow

webpack config error of cannot resolve module

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related