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

user_5404861 0
Viewed 130080

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

Browser Shows My app gives this look

My Files Path and Package.json Contents enter image description here

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 }),
    ],
};
webpack reactjs javascript
8 Answers

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.

user_35480350

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

user_126010

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']
}
user_40215860

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*.

user_25702770

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

user_141892720

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, {
...
});
user_110955730
Related