ReactJS 将代理添加到 package.json css 模块停止工作

Question

I add in my package.json proxy for making request to server runing on other port.

after that, my module css styles stop working, in the devTools i found that the styles are loading well, but classnames for DOM elements are not loading at all.

How it looks now:

How it should be:

some page code:

import styles from "./LoginPage.module.css";
export default function LoginPage() {
 return (
          <div className={styles.LoginPage}>
         </div>
     );
}

Here is my package.json:

{
    "name": "job-bot-admin-panel",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:8000/",
    "dependencies": {
        "@reduxjs/toolkit": "^1.8.1",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "http-proxy-middleware": "^2.0.4",
        "multiselect-react-dropdown": "^2.0.21",
        "react": "^18.0.0",
        "react-dom": "^18.0.0",
        "react-redux": "^7.2.8",
        "react-router-dom": "^6.3.0",
        "react-scripts": "^0.9.5",
        "react-select": "^5.2.2",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }

Answer 1

your filename is incorrect. for css modules you don't need to add .module to the filename, just name it LoginPage.css and import it with that same name and your styles should be fine. React is getting confused with your module filename.