cuando ejecuto webpack me muestra el siguiente error. ¿Como arreglarlo?

 ERROR in ./styles/image_viewer.css Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError (2:7) D:\web-components\styles\image_viewer.css Unknown word 1 | > 2 | import API from "!../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"; | ^ 3 | import domAPI from "!../node_modules/style-loader/dist/runtime/styleDomAPI.js"; 4 | import insertFn from "!../node_modules/style-loader/dist/runtime/insertBySelector.js"; @ ./src/imageViewer.js 1:0-36 @ ./src/app.js 2:0-23

Archivo paquete.json

 { "name": "web-components", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "build": "webpack", "test": "jest" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.15.5", "@babel/preset-env": "^7.15.6", "babel-core": "^6.26.3", "babel-loader": "^8.2.2", "babel-preset-env": "^1.7.0", "css-loader": "^6.3.0", "jest": "^27.2.2", "style-loader": "^3.3.0", "webpack": "^5.54.0", "webpack-cli": "^4.8.0" }, "dependencies": {} }

Webpack.config.js

 const path = require('path') const config = { entry: './src/app.js', output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js' }, module: { rules: [ {use: 'babel-loader', test: /\.js$/}, {use: ['css-loader', 'style-loader'], test: /\.css$/} ] }, mode: 'development' }; module.exports = config;

Primero usé la versión webpack 2.2.0-rc.0 y como hubo algunos problemas, lo actualicé a la última versión y eso tampoco funcionó para mí. Incluso traté de degradar las versiones de style-loader y css-loader, no funcionó. Gracias