Error in main webpack - Исправление ошибок и поиск оптимальных решений проблем

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:wamp64wwwwebpack-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'

Slim

5,17711 gold badges46 silver badges78 bronze badges

asked Apr 11, 2018 at 10:36

Sabir HussainSabir Hussain

2,7122 gold badges13 silver badges19 bronze badges

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!

toastal

1,03810 silver badges16 bronze badges

answered Apr 11, 2018 at 10:36

Sabir HussainSabir Hussain

2,7122 gold badges13 silver badges19 bronze badges

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',

answered Nov 23, 2018 at 11:18

Édouard LopezÉdouard Lopez

38.7k27 gold badges122 silver badges175 bronze badges

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',

brance

1,1188 silver badges22 bronze badges

answered May 18, 2020 at 13:17

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

Stephen Rauch♦

46.7k31 gold badges109 silver badges131 bronze badges

answered Aug 8, 2018 at 0:47

ladhariladhari

4854 silver badges15 bronze badges

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()
};

answered Jan 3, 2022 at 11:01

YEVYYEVY

9921 gold badge9 silver badges16 bronze badges

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

answered Sep 14, 2020 at 1:22

JamesJames

1165 bronze badges

Other solutions didn’t work. I solved this by adding this to package.json

  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack" //this
  },

Then npm run build and it works. At first i’ve tried with npx webpack. Would love to know why it works.

answered Jun 15, 2022 at 19:12

Bar AkivaBar Akiva

1,0311 gold badge11 silver badges21 bronze badges

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»

answered Jan 25, 2022 at 15:46

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

answered Mar 19, 2019 at 6:03

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

2) 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

answered Jun 4, 2020 at 2:13

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.

mechnicov

10.2k3 gold badges24 silver badges49 bronze badges

answered Jul 28, 2020 at 6:10

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.

answered Sep 13, 2020 at 1:31

LeftOnTheMoonLeftOnTheMoon

8831 gold badge7 silver badges15 bronze badges

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)

answered Nov 28, 2020 at 15:08

wbhardingwbharding

3,8552 gold badges28 silver badges25 bronze badges

Источник

Describe the bug
I have the following project folder structure:

my-app/
├─ .webpack/
│  ├─ index.js
│  ├─ development.js
│  ├─ production.js
├─ node_modules/
├─ src/
│  ├─ index.tsx
├─ package.json

When I use .webpack/index.js to import a specific environment configuration I get the following error:

ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/<path-to-project>/my-app'

To Reproduce

package.json

"@webpack-cli/serve": "^1.0.1-rc.0",
"webpack": "^5.0.0-rc.0",
"webpack-cli": "^4.0.0-rc.0",
"webpack-dev-server": "^3.11.0"

.webpack/index.js

module.exports = (env, arg) => {
  const { mode } = arg;
  const config = require(`./${mode}`);

  return config;
};

.webpack/development.js

module.exports = {
  entry:  path.resolve(__dirname, '../src/index.tsx'),
  output: {
    path: path.resolve(__dirname, '../build/'),
    filename: 'index.js'
  },
  devtool: 'source-map',
  devServer: {
    inline: true,
    port: 8080,
    contentBase: path.resolve(__dirname, '../src')
  },
  module: {
      rules: [
          { test: /.tsx?$/, loader: 'awesome-typescript-loader' }
      ]
  },
  resolve: {
    modules: [
      '/Users/<path-to-project>/my-app/src',
      'node_modules'
    ],
    extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
  }
};

> webpack serve --config .webpack/index.js --mode development

Expected behavior

Expected the src directory to be resolved. If instead .webpack/index.js has the configuration there is no error that shows up.

Please paste the results of webpack-cli info here, and mention other relevant information

System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
    Memory: 451.53 MB / 16.00 GB
  Binaries:
    Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.5.0/bin/npm
  Browsers:
    Firefox: 81.0
    Safari: 14.0
  Packages:
    case-sensitive-paths-webpack-plugin: ^2.3.0 => 2.3.0
    clean-webpack-plugin: ^3.0.0 => 3.0.0
    extract-css-chunks-webpack-plugin: ^4.7.5 => 4.7.5
    html-webpack-plugin: ^4.5.0 => 4.5.0
    webpack: ^5.0.0-rc.0 => 5.0.0-rc.0
    webpack-cli: ^4.0.0-rc.0 => 4.0.0-rc.0
    webpack-dev-server: ^3.11.0 => 3.11.0
    webpack-merge: ^5.1.4 => 5.1.4

Источник

Содержание

ERROR in main Module not found: Error: Can’t resolve ‘./src’ in #16028
<>’s edit
Replies: 3 suggested answers · 1 reply
<>’s edit
<>’s edit
[Solved] Module not found: Error: Can’t resolve
Fix: add a dot-slash ( ./ ) before any relative path in webpack
Conclusion
Что значит эта ошибка, которая выдается в консоли при попытке подключить webpack?
webpack: Failed to compile. #1
Comments
В чем ошибка сборки webpack?

ERROR in main Module not found: Error: Can’t resolve ‘./src’ in #16028

<>’s edit

Hello! This is the first time I am using webpack. I decided to use it instead of create-react-app, but right now I am facing what seems to be a very difficult problem with webpack: I am getting the following error:

And here is the screenshot:

I find this error peculiar because I don’t have any src folder in my project.
I tried to identify the error several times but it has got really hard for me to find a fix. Could you please help me?
Here is my repo: https://github.com/Yokubjon-J/chat-app (I run my app with npm run development ).