I seem to be encountering an issue with loading any modules. Despite reinstalling my operating system, I continue to face the same error when attempting to use any module.
I have tried reinstalling node, clearing the cache, and more.
To view the code, please click on the link below.
https://github.com/ziyak9803/Webpack/tree/main
Strangely, everything seems to work fine with older versions of the libraries/modules.
//Working Fine
"devDependencies": {
"css-loader": "^2.1.0",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
However, the latest dependencies do not seem to work correctly.
//Not Working
"devDependencies": {
"css-loader": "^6.5.1",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
index.js
import './style.css';
const headline = "Hello World";
document.querySelector('h1').innerText = headline;
style.css
body {
background-color: blue;
color: red;
}
h1 {
font-size: 3rem;
}
package.json
{
"name": "webpack-testing",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^6.5.1",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}
}
webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.css$/i,
use: ["css-loader"],
},
],
},
};
ERROR LOG:
../../../#Projects/#Minor/webpack-testing/src/index.js 108 bytes [built] [code generated]
../../../#Projects/#Minor/webpack-testing/src/style.css 39 bytes [not cacheable] [built] [code generated] [1 error]
ERROR in ../../../#Projects/#Minor/webpack-testing/src/style.css
Module build failed (from ../../../#Projects/#Minor/webpack-testing/node_modules/css-loader/dist/cjs.js):
Error: Cannot find module 'E:\#Projects\#Minor\webpack-testing\node_modules\css-loader\dist\cjs.js'
Require stack:
- E:\#Projects\#Minor\webpack-testing\node_modules\loader-runner\lib\loadLoader.js
- E:\#Projects\#Minor\webpack-testing\node_modules\loader-runner\lib\LoaderRunner.js
- E:\#Projects\#Minor\webpack-testing\node_modules\webpack\lib\NormalModuleFactory.js
- E:\#Projects\#Minor\webpack-testing\node_modules\webpack\lib\Compiler.js
....