Input module not found: Error: Unable to resolve './src/index.js'

I installed react launcher app and added webpack but it says that Can't resolve './src/index.js'

.

Browser shows My app gives this look

My files path and package.json content 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 }),
    ],
};

      

+11
javascript reactjs webpack


source to share


4 answers


Your base URL is path.join(__dirname, "public")

and your entry is ./src/index.js

. Webpack tries to find ./src/index.js

in public

./src/index.js

; obviously it doesn't exist. You must change entry

to ../src/index.js

.



+14


source to share


Another way to find 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 an entry point in the directory src

.

By the way, this is the default entry point. You can also change this entry point to your preferred location. Just replace the directory with src

another directory you want to use.

+1


source to share


The input path is contextual. It looks for a file in public/src/

if you want it to look for a path only in /src

. Looking at the rest of yours webpack.config.js

, it looks like you don't need the context string.

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

0


source to share


My webpack.config.js was named Webpack.config.js and a new client was looking for something case sensitive.

0


source to share







All Articles
Loading...
X
Show
Funny
Dev
Pics