在节点（webpack）中找不到模块

Question

I'm unable to load any module for some reason. I even reinstalled my OS but still getting the same error for any module that I'm using.

I've reinstalled node, cleared cache etc..

Please open the below link for code.
https://github.com/ziyak9803/Webpack/tree/main

But for some reason it's working fine on old lib/module version.

//Working Fine
"devDependencies": {
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }

But not for latest dependencies

//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
....

Answer 1

So apparently it was my folder/directory name that was causing the issue. I have a habit of arranging everything in order and I was using special characters as first character to name important folders so that they come-up at the start.
eg: #Major !Project as folder names.

---

Issue got resolved when I removed special characters from my folder/directory names.
eg: Major Project as folder names