При запуске webpack-dev-server выдает ошибку: ERROR in Module not found: Error: Can't resolve...?

Question

[MrSallivan]

В командной строке набираю npm run start, получаю:

> js-native-blog@1.0.0 start
> webpack-dev-server --mode development --open

[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: localhost:9000
[webpack-dev-server] Content not from webpack is served from 'C:\WEB\#PROJECTS\App-blog\dist' directory
asset bundle.js 63.6 KiB [emitted] (name: main)
asset index.html 2.85 KiB [emitted]
runtime modules 26.5 KiB 9 modules
cacheable modules 19.1 KiB
../../#PROJECTS/App-blog/node_modules/webpack/hot/dev-server.js 1.88 KiB [built] [code generated]
../../#PROJECTS/App-blog/node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
../../#PROJECTS/App-blog/node_modules/webpack/hot/log-apply-result.js 1.29 KiB [built] [code generated]
../../#PROJECTS/App-blog/node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
../../#PROJECTS/App-blog/node_modules/events/events.js 14.5 KiB [built] [code generated]

ERROR in Module not found: Error: Can't resolve 'C:\WEB\#PROJECTS\App-blog\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=9000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true' in 'C:\WEB\#PROJECTS\App-blog'
resolve 'C:\WEB\#PROJECTS\App-blog\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=9000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true' in 'C:\WEB\#PROJECTS\App-blog'
using description file: C:\WEB\#PROJECTS\App-blog\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\WEB\#PROJECTS\App-blog\node_modules\webpack-dev-server\package.json (relative path: ./client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=9000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\#PROJECTS\App-blog\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=9000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\#PROJECTS\App-blog\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=9000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true.js doesn't exist
as directory
C:\WEB\#PROJECTS\App-blog\node_modules\webpack-dev-server\client\index.js?protocol=ws%3A&hostname=0.0.0.0&port=9000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true doesn't exist
using description file: C:\WEB\#PROJECTS\App-blog\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
No description file found in C:\WEB or above
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\ is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\.js doesn't exist
as directory
existing directory C:\WEB\
No description file found in C:\WEB\ or above
using path: C:\WEB\index
No description file found in C:\WEB or above
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\index.js doesn't exist

ERROR in main
Module not found: Error: Can't resolve 'C:\WEB\#PROJECTS\App-blog\src\js\index.js\@babel\polyfill' in 'C:\WEB\#PROJECTS\App-blog'
resolve 'C:\WEB\#PROJECTS\App-blog\src\js\index.js\@babel\polyfill' in 'C:\WEB\#PROJECTS\App-blog'
using description file: C:\WEB\#PROJECTS\App-blog\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: C:\WEB\#PROJECTS\App-blog\package.json (relative path: ./src/js/index.js/@babel/polyfill)
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\#PROJECTS\App-blog\src\js\index.js\@babel\polyfill doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\#PROJECTS\App-blog\src\js\index.js\@babel\polyfill.js doesn't exist
as directory
C:\WEB\#PROJECTS\App-blog\src\js\index.js\@babel\polyfill doesn't exist
using description file: C:\WEB\#PROJECTS\App-blog\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
No description file found in C:\WEB or above
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\ is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\.js doesn't exist
as directory
existing directory C:\WEB\
No description file found in C:\WEB\ or above
using path: C:\WEB\index
No description file found in C:\WEB or above
no extension
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
C:\WEB\index.js doesn't exist

webpack 5.75.0 compiled with 2 errors in 1081 ms

ФАЙЛ package.json:

{
"name": "js-native-blog",
"version": "1.0.0",
"description": "js native blog",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack --mode development",
"start": "webpack-dev-server --mode development --open"
},
"keywords": [
"js",
"blog",
"javascript"
],
"author": "Alex Nikolaenko",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.20.7",
"@babel/core": "^7.20.12",
"@babel/preset-env": "^7.20.2",
"babel-loader": "^9.1.2",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"@babel/polyfill": "^7.12.1"
}
}

ФАЙЛ webpack.config.js:

const HTMLPlugin = require('html-webpack-plugin')
const path = require("path")

module.exports = {
entry: ['@babel/polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 9000

},
plugins: [
new HTMLPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
resolve: {

extensions: ['.js'],

},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}

}

Почему так может быть?

Comments

[Антон Горецкий]

Попробуйте в webpack.config.js изменить path: path.resolve(__dirname, 'dist'), на path: path.resolve(__dirname, './dist'),

[MrSallivan]

спасибо за совет. Это было первое, что я пробывал, не помогает.

[Александр Васильев]

они перешли с
"start": "webpack-dev-server --mode development --open"
на
... ": "webpack serve --mode development"
в общем, читайте доки, для webpack 5 точно не работает старое

Answer 1

[kiyotakakid]

# в пути (у вас #PROJECTS) все портит, попробуйте запустить, чтобы не было # в пути

Comments

[kryamk]

А-а-а, вот оно чё! Спасибо, это помогло