Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'

NpmWebpackWebpack 4

Npm Problem Overview


I was trying to run webpack-4 first time

webpack ./src/js/app.js ./dist/app.bundle.js

it shows warning / error :

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in multi ./src/js/app.js ./dist/app.bundle.js
Module not found: Error: Can't resolve './dist/app.bundle.js' in 'D:\wamp64\www\webpack-4'
 @ multi ./src/js/app.js ./dist/app.bundle.js

Then i tried to change the mode

webpack --mode development

it shows :

ERROR in Entry module not found: Error: Can't resolve './src'

Npm Solutions


Solution 1 - Npm

Resolved

Spent a lot of time to find out the solution.

Solution: Add index.js file into src folder.

That's it!.. solved :)


During Research, I found some facts about webpack 4 :

webpack 4 doesn’t need a configuration file by default!

webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default!

Solution 2 - Npm

Met this problem when deploying on now.sh

Solution: Use Default Behavior

Move entry point to src/index.js.

This leverage webpack@4 default value for entry:

> By default its value is ./src/index.js, but you can specify a > different (or multiple entry points) by configuring the entry property > in the webpack configuration.

Solution: Be Specific

As @Lokeh pointed out, if you don't want to change your JS file location you can always use path.resolve() in your webpack.config.js:

entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',

Solution 3 - Npm

Adding a context explicitly in webpack.config.js fixed issue for me. Adapt the following piece of code in your project:

context: __dirname + '/src',
entry: './index.js',

Solution 4 - Npm

webpack ./src/js/app.js --output ./dist/app.bundle.js --mode development

This worked for me. I had the same trouble, it is because of a new version of webpack

Solution 5 - Npm

webpack version 4.46.0 Perhaps someone gets stuck during migration from webpack 4 to 5.

in case of multiple webpack config files and if anyone uses merge: Say webpack.common.js relies on some variables passed from cli eg:

module.export = (env) => {
  const {myCustomVar} = env;

  return {
    // some common webpack config that uses myCustomVar
  }
}

When you require common config in say webpack.prod.js:

const { merge } = require('webpack-merge'); // <-- `merge` is now named import if you are using > v5
const common = require('./webpack.common.js');

const getProdConfig = () => {....}

module.exports = (env) => {
  return merge(common(env), getProdConfig()); // <-- here, `call` common as its exported as a fn()
};

Solution 6 - Npm

I had a similar error and was able to resolve it with the command webpack src/index.js -o dist/bundle.js the -o did the trick. The issue wasn't the location of index.js it was missing the operator for defining the output path location.

See https://webpack.js.org/api/cli/

Version of webpack was 4.44.1

Solution 7 - Npm

As of webpack ^4.29.6 you don't need any configuration file so instead of giving path in package.json we need to write simply "build": "webpack" and keep index.js as entry point in src folder. However if you want to change entry point you can do so in webpack config file

Solution 8 - Npm

For Rails 6 application this steps worked for me:

  1. bundle exec rails webpacker:install system will reinstall webpacker but will rewrite few files:
  modified:   config/webpack/environment.js
  modified:   config/webpacker.yml
  modified:   package.json
  modified:   yarn.lock
  1. Return configs to initial state:

git checkout config/webpack/environment.js

git checkout config/webpacker.yml

package.json and yarn.lock you can leave as they are

Solution 9 - Npm

Spent a lot of time similarly to others to get around this annoying problem. Finally changed webpack.config.js as follows:-

output: {
  path: path.resolve(__dirname, './src'), //src instead of dist
  publicPath: '/src/', //src instead of dist
  filename: 'main.js' //main.js instead of build.js
}

...as Edouard Lopez and Sabir Hussain mentioned that you don't need to mention an entry point, removed that also and the app compiled after a long frustration.

Solution 10 - Npm

So my problem, which I would wager is a lot of people's problem is that I set the entry path based on my whole app root. So in my case, it was /client/main.ts. But because my webpack.config.js file was actually inside /client, I had to move into that folder to run webpack. Therefore my entry was now looking for /client/client/main.ts.

So if you get this error you need to really look at your entry path and make sure it is right based on where you are running webpack and where your webpack.config.js file is. Your entry path needs to be relative to where you are running webpack. Not relative to your app root.

Solution 11 - Npm

I had this problem when changing between React/Rails gems. Running rails webpacker:install restored me to the Rails webpacker defaults, but also overwrote all of my config files. Upon closer inspection, the culprit turned out to be my webpack/development.js file, which in a previous gem version had gotten modified from this Rails webpacker default:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

Once I restored the file to those contents, this error went away. Specifically I had been missing the module.exports = environment.toWebpackConfig() line, which apparently is pretty important for those who want to avoid Rails webpacker thinking it needs a src/index.js file (it doesn't)

Solution 12 - Npm

Just leaving this here, incase someone is not paying attention to the details like me, I had the same error, but because my webpack config file was named webpack.config instead on webpack.config.js, so my custom configurations were never picked and webpack was falling back to the defaults entry "src/index.js"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSabir HussainView Question on Stackoverflow
Solution 1 - NpmSabir HussainView Answer on Stackoverflow
Solution 2 - NpmÉdouard LopezView Answer on Stackoverflow
Solution 3 - NpmTHAMEEM ANSUR SHAIKView Answer on Stackoverflow
Solution 4 - NpmladhariView Answer on Stackoverflow
Solution 5 - NpmYEVYView Answer on Stackoverflow
Solution 6 - NpmJamesView Answer on Stackoverflow
Solution 7 - NpmSourabhView Answer on Stackoverflow
Solution 8 - NpmRuslan ValeevView Answer on Stackoverflow
Solution 9 - NpmArya GoswamiView Answer on Stackoverflow
Solution 10 - NpmLeftOnTheMoonView Answer on Stackoverflow
Solution 11 - NpmwbhardingView Answer on Stackoverflow
Solution 12 - NpmNicholasView Answer on Stackoverflow