Entry module not found: Error: Can't resolve './src/index.js'

Question

I was installing a react startup app and added Webpack, but it says Can't resolve './src/index.js'.

Browser Shows

My Files Path and Package.json Contents

Webpack.config.js Contents

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

    module.exports = {
        context: path.join(__dirname, "public"),
    devtool: debug ? "inline-sourcemap" : false,
    entry: "./src/index.js",
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2016', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            }
        ]
    },
    output: {
        path: __dirname + "/public/",
        filename: "build.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
};

Answer 1

The other way I find out to fix this problem is to use path.resolve().

const path = require('path');
module.exports = {
    mode: "production",
    entry: path.resolve(__dirname, 'src') + 'path/to/your/file.js',
    output: {
        /*Webpack producing results*/
        path: path.resolve(__dirname, "../src/dist"),
        filename: "app-bundle.js"
    }
}

This will make sure, webpack is looking for entry point in src directory.

By the way it's the default entry point. You can also change this entry point to your suitable location. Just replace the src directory with the other directory you want to use.

Answer 2

My webpack.config.js was named Webpack.config.js and the new cli was looking for something case-sensitive.

Answer 3

Webpack does not look for .js files by default. You can configure resolve.extensions to look for .ts. Don't forget to add the default values as well, otherwise most modules will break because they rely on the fact that the .js extension is automatically used.

resolve: {
    extensions: ['.js', '.json']
}

Answer 4

The entry path is relative to the context. It's looking for a file in public/src/ when you want it to look for a path in just /src. Looking at the rest of your webpack.config.js it doesn't seem like you need the context line at all.

https://webpack.js.org/configuration/entry-context/

Answer 5

I had the same problem and found that it was caused by having installed create-react-app globally in the past using npm install -g create-react-app.

As create-react-app should now not be installed globally, I needed to uninstall it first using npm uninstall -g create-react-app and then install it in my project directory with npx create-react-app *my-app-name*.

Answer 6

My solution was to put App.js file on a components folder inside the src folder and keep the inde.js just inside the src one

Answer 7

I had same problem. And solutions was really 'at the top' I forgot to add module.exports inside my webpack.prod.js.

So instead of

merge(common, {
...
});

use

module.exports = merge(common, {
...
});