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

Question

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

next.config:

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;
    }
  })
);

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

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

Answer 2

对于不使用模块和使用 Typescript 路径的人。

对于我的设置，我喜欢一般的 .scss 文件

所以，在我的 _app.tsx

我加Styles/index.scss

然后，在我的 index.scss

我加我的@import '~Styles/flex.scss'

注意 ~

这是它与热重载一起工作所必需的。

Answer 3

对于 Next js 版本 10+，除了 Pranay 的回答之外，请确保您的路由大小写与文件夹的大小写匹配。

此外，我注意到组件名称必须以大写字母开头。如果你的文件名是dashboard.jsx，组件名应该是Dashboard.

// home/dashboard.js

const Dashboard = () => {

....

}
export default Dashboard

Answer 4

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

Answer 5

我不得不去 package.json 删除 react 和 react-dom 并用 yarn add 重新添加它们。

Answer 6

我只是通过删除文件夹“.next”解决了这个问题然后关闭终端并再次运行 npm 运行 dev 它会起作用

Answer 7

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

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

Hot module reload is not working on my nextjs app

reactjs

server-side-rendering

next.js