热模块重新加载不适用于我的 nextjs 应用程序

Question

我有一个基于 nextjs 的项目。奇怪的是，HMR 在我的项目中无法正常工作。每次我进行更改时，我都必须重新运行该过程。我附上了我的下一个配置和 package.json 的详细信息：

下一个.配置：

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");

module.exports = withCSS(
  withSass({
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
          },
        },
      });

      return config;
    }
  })
);

包.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^3.26.8",
    "chartjs": "^0.3.24",
    "classnames": "^2.2.6",
    "draft-js": "^0.11.4",
    "isomorphic-unfetch": "^3.0.0",
    "moment": "^2.24.0",
    "next": "^9.2.1",
    "node-sass": "^4.13.1",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-helmet": "^5.2.1",
    "react-markdown": "^4.3.1",
    "react-mde": "^8.1.0",
    "react-redux": "^7.2.0",
    "react-select": "^3.0.8",
    "react-slick": "^0.25.2",
    "react-toastify": "^5.5.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "showdown": "^1.9.1",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-react": "^7.18.3",
    "url-loader": "^3.0.0"
  }

我已经尝试删除 node_modules 并再次重新安装，似乎没有解决问题。

以下是我的项目结构

Answer 1

我刚刚通过删除文件夹“.next”然后关闭终端并npm run dev再次运行来解决了这个问题。

Answer 2

得到了@felixmosh 的帮助。出现问题是因为我的文件夹是 case 与 route case 不匹配。通过将文件夹名称更改为路由名称来解决问题。

Answer 3

有时，当您不小心以小写字母开头的组件命名，然后更改为大写字母时，下一个缓存仍会考虑旧名称，并且不会将其视为普通组件。最简单的解决方案是复制组件的内容，删除文件，然后使用正确的组件名称创建一个文件。

Answer 4

就我而言，热重载不起作用，因为我的 next.config.js 中有 assetPrefix 。您可以在开发模式中删除它们或将它们更改为“/”，一切都会按预期进行。