如何解决使用Next JS刷新页面上的.jsundefined .cssundefined webpack块
在这个问题上,除了寻求解决方案之外,我希望您能引导我朝正确的方向前进。
我正在使用Next JS。
我的问题出在生产中,第一次到达pages/product.tsx
之类的页面就可以了。捕获2显示html脚本链接正确形成。
但是,刷新同一页面会产生所有css或js扩展名,变成.jsundefined
或.cssundefined
。
该项目已部署在我自己的 digitalocean 服务器上。 当我将同一项目部署到Vercel(部署Next JS项目的最佳方法)时,就解决了这个问题。
请引导我了解可能导致此问题的原因。
next.config.js
const withCss = require("@zeit/next-css");
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,});
module.exports = withCss(
withMDX({
pageExtensions: ["js","jsx","ts","tsx","md","mdx"],})
);
.babelrc
{
"env": {
"development": {
"plugins": [
[
"babel-plugin-styled-components",{ "ssr": true,"displayName": true,"preprocess": false }
]
],"presets": ["next/babel"]
},"production": {
"plugins": [
[
"babel-plugin-styled-components","presets": ["next/babel"]
}
},"plugins": [
[
"babel-plugin-styled-components","preprocess": false }
]
]
}
capture 1: chunks with jsundefined cssundefined
解决方法
我找到了一个临时解决方案。 我的项目使用的是最新的Next JS版本(9.5),该版本实现了增量静态生成。那引起了问题。 我只需要降级到Next JS 9.4,现在问题就解决了,但是我仍然不明白为什么。
编辑:2020年8月12日
好的,我终于发现了真正的问题。 我在网址中做了这样的事情:
import Link from "next/link"
...
<Link href="product/[productId]" as={`product/${id}`} passHref >
<a href={`product/${id}`}>
...
</a>
</Link>
...
或更糟
...
<Link href={`product/${id}`} passHref>
<a href={`product/${id}`}>
...
</a>
</Link>
...
我再次阅读了文档,现在我做了
import Link from "next/link"
...
<Link href="/product/[productId]" as={`/product/${id}`}>
<a>
...
</a>
</Link>
...
现在,我可以安全地安装Next JS(9.5)的最新版本了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。