Could not resolve file or directory webpack

Question

I am getting continuous error from webpack. I am pretty new to this. But I have no clue whatsoever why is it no finding the main.js file which is inside src while running webpack command.

Here is my webpack.config.js

var path = require('path');
var config = {
    entry: {
        main: [
            './src/main.js '
        ]
    },
    output: {
        filename: './public/[name].js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/, // A regexp to test the require path. accepts either js or jsx,
            exclude: /node_modules/,
            loader: 'babel-loader', // The module to load. "babel" is short for "babel-loader"
            query: {
                presets: ['react', 'es2015']
            }
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
};

module.exports = config;

Here is my package.json

{
  "name": "react-quickstart",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "path": "^0.12.7",
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
  },
  "scripts": {
    "webpack": "./node_modules/webpack/bin/webpack",
    "build": "webpack",
    "dev": "webpack-dev-server --watch-poll --inline --devtool eval --progress --colors --hot --content-base ./"
  },
  "author": "",
  "license": "ISC"
}

Error Details

F:\Works\Javascript\react-quickstart>webpack --display-error-details
Hash: 0f797b4ca8770ff88901
Version: webpack 1.12.13
Time: 15ms
           Asset     Size  Chunks             Chunk Names
./public/main.js  1.51 kB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built] [1 error]

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./src/main.js  in
F:\Works\Javascript\react-quickstart
resolve file
  F:\Works\Javascript\react-quickstart\src\main.js  doesn't exist
  F:\Works\Javascript\react-quickstart\src\main.js .js doesn't exist
  F:\Works\Javascript\react-quickstart\src\main.js .jsx doesn't exist
resolve directory
  F:\Works\Javascript\react-quickstart\src\main.js  doesn't exist (directory def
ault file)
  F:\Works\Javascript\react-quickstart\src\main.js \package.json doesn't exist (
directory description file)
[F:\Works\Javascript\react-quickstart\src\main.js ]
[F:\Works\Javascript\react-quickstart\src\main.js .js]
[F:\Works\Javascript\react-quickstart\src\main.js .jsx]
 @ multi main

I know this is a duplicate issue of Webpack Error. But this issue is unresolved as of now .

I am unable to find the issue here as the package.json seems to be valid and there are no missing commas or anything which I seem to have made mistake.

You did not tell it to look for `"./src/main.js"`, you told it to look for `"./src/main.js "`, with the space at the end. Remove that space and try again. — DCoder, Feb 21 '16 at 06:06
@DCoder wow tht was quick . But the error message was kinda confusing . That resolved one of the issues though — Joy, Feb 21 '16 at 06:13
this is a bug in webpack, please check my answer here: http://stackoverflow.com/a/38355893/427622 — Fareed Alnamrouti, Jul 13 '16 at 15:29

score 0 · Answer 1 · edited Jul 18 '17 at 23:56

This can be because of multiple reasons. The best way to identify the exact issue is to tryout the below two commands if you are running webpack 1/2 alone then use the snippet:

webpack --display-error-details

if you are running the webpack dev server then use the snippet:

webpack-dev-server --display-error-details

this would provide a detailed error report in the console

Also if you are providing any additional space in the entry file name that could also be a problem

Could not resolve file or directory webpack

1 Answers1