Answer the question
In order to leave comments, you need to log in
Error running webpack serve, can't figure out what's the problem?
Good day to all. Please do not swear.
Assembly from an online course. in the course chat they didn’t help me with this,
I assume that the assembly is for webpack 4, and I updated all the dependencies and, accordingly, webpack to version 5. help me please.
Here is the error output:
(base) [email protected]:/hdd/dmitiy/Рабочий стол/projects/Avia-tickets$ webpack serve
ℹ 「wds」: Project is running at http://localhost:9000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/dist
ℹ 「wds」: 404s will fallback to /index.html
(node:126205) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(Use `node --trace-deprecation ...` to show where the warning was created)
✖ 「wdm」: 3 assets
424 modules
ERROR in ./css/style.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'plugins'. These properties are valid:
object { postcssOptions?, execute?, sourceMap?, implementation? }
at validate (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/node_modules/schema-utils/dist/validate.js:104:11)
at Object.getOptions (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/lib/NormalModule.js:501:6)
at Object.loader (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/postcss-loader/dist/index.js:38:24)
at processResult (/hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/lib/NormalModule.js:675:19)
at /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/webpack/lib/NormalModule.js:774:5
at /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /hdd/dmitiy/Рабочий стол/projects/Avia-tickets/node_modules/loader-runner/lib/LoaderRunner.js:251:18
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.28.0 compiled with 2 errors in 4692 ms
ℹ 「wdm」: Failed to compile.
const path = require('path');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
polyfill: 'babel-polyfill',
app: './js/app.js',
},
context: path.resolve(__dirname, 'src'),
devServer: {
publicPath: '/',
port: 9000,
contentBase: path.join(process.cwd(), 'dist'),
host: 'localhost',
historyApiFallback: true,
noInfo: false,
stats: 'minimal',
hot: true,
},
module: {
rules: [
{
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
test: /\.js$/,
},
{
test: /\.css$/,
use: [
{
// webstorm ругается на этот loader Unresolved variable loader
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
options: {
plugins: () => [precss, autoprefixer],
},
},
],
},
{
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
],
},
plugins: [
// и тут ругается на MiniCssExtractPlugin - Method expression is not of Function type
new MiniCssExtractPlugin({
filename: './style.css',
}),
new HtmlWebpackPlugin({
template: 'index.html',
}),
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js',
},
mode: 'development',
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question