Webpack Error - Cannot Resolve File or Directory

Question

I am getting this error when I npm start my webpack-dev-server:

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' /var/www/html/151208-DressingAphrodite/app in /var/www/html/151208-DressingAphrodite
 @ multi main

Here is my webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require ('html-webpack-plugin');

const PATHS = {
  app: path.join (__dirname, 'app'),
  build : path.join (__dirname, 'build')
};

module.exports = {
  entry : [
    'babel-polyfill',
    'webpack-dev-server/client?http://localhost:8080',
    PATHS.app
  ],
  output : {
      publicPath : '/',
      filename : 'dressingaphrodite.js',
      hash : true
  },
  debug : true,
  devServer : {
    contentBase : './app'
  },
  devtool : 'source-map',
  module : {
    loaders : [
      {
        test : /\.jsx?$/,
        include : PATHS.app,
        loader : 'babel-loader',
        query : {
          presets : ["es2015"]
        }
      },
      {
          test: /\.css$/,
          include: PATHS.app,
          loader: 'style!css'
      }
    ]
  },
  plugins : [
    new HtmlWebpackPlugin ({
      title : 'Dressing Aphrodite',
      filename : 'da.html'
    })
  ]
};

Solution 1

ok if any one face this problem, you can solve it in 2 methods:

Method 1:

1- add a file called package.json inside your entry folder (in your case put it inside the folder "{project_dir}/app/package.json")

2- inside this file write any json object for example:

{
  "name": "webpack why you do diss :("
}

Method 2:

Change your entry files to be at least 2 level away from your project home directory, for example: "{project_dir}/src/app"

Explanation: for each entry file webpack will try to find a file called package.json to use it for webpack configuration incase this entry file is a module, when you put your entry file only 1 level away from your project home dir webpack will use your project packge.json as configuration file for your entry file and it will fail because of miss configuration.

Solution 2

You should check the browser console. It provides more detailed informations.

In my case:

Uncaught Error: Cannot find module "./src/index"
at webpackMissingModule (webpack:///multi_main?:4)
at eval (webpack:///multi_main?:4)
at Object.<anonymous> (bundle.js:586)
at __webpack_require__ (bundle.js:556)
at bundle.js:579
at bundle.js:582

So here is the error a missing (or misspelled) java script file.

Comments

[Vincenzo]

I am afraid data you provided is not enough to help you.

[Kayote]

@Vincenzo What else is needed?

[jomofrodo]

Make sure the directory exists?

[natevw]

I got a somewhat similar error when simply calling the webpack command wrong: stackoverflow.com/questions/48790742/…

[Kayote]

thanks for the update. The only solution I found was to try again and again and again. Eventually one of the build starts working!

[Cin]

so bovine.. I still try to find a method. Another one, the version of webpack I use is 1.12.11, instead of 1.15.12.

[Konrad Viltersten]

Not entirely sure if I'm getting a related error but if I do (and I have reasons to believe so), your statement seems not to hold in my case. I have my entry point in root/source/application/bootstrap.ts. It's found, all right, but when it tries to load in app.module.ts it says that the file can't be found (still reacting to any introduced errors in it, though, which is surprising). Any comment to that?

[StingyJack]

What would be an "entry file" in a non-nodejs web app?