按照官方文档安装并开启srr后,发现只要引用umi就会报错,不开ssr没问题
相关依赖的版本
"dependencies": {
"@ant-design/pro-layout": "^5.0.12",
"@umijs/preset-react": "1.x",
"@umijs/test": "^3.2.5",
"ahooks": "^2.0.1",
"antd": "^4.3.5",
"lint-staged": "^10.0.7",
"prettier": "^2.0.5",
"rc-animate": "^3.1.0",
"rc-banner-anim": "^2.4.4",
"rc-queue-anim": "^1.8.5",
"rc-scroll-anim": "^2.7.4",
"rc-texty": "^0.2.0",
"rc-tween-one": "^2.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"umi": "^3.2.5",
"yorkie": "^2.0.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^3.4.0",
"@typescript-eslint/parser": "^3.4.0",
"babel-eslint": "^10.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.3.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-jsx-control-statements": "^2.2.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.0",
"less": "^3.11.3",
"less-loader": "^6.1.2",
"node-sass": "^4.14.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1",
"stylelint": "^13.6.1",
"stylelint-config-recommended": "^3.0.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"typescript": "^3.9.5"
}
如下两段代码,均有报错,且内容都一样:
import { Link } from 'umi';
<Link to="/">测试</Link>
import { Helmet } from 'umi';
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
如下两段代码,均有报错且内容一样,如下图:
我把第二段代码第1行改为如下,就不报错了,但是使用此种方式引入umi其他的内容,还是报错。
import { Helmet } from "react-helmet";
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
以下为我的 .umirc.ts
配置文件
import { defineConfig } from 'umi';
export default defineConfig({
//根目录
base: '/',
//使用 CDN 部署,把 publicPath 的值设为 CDN 的值就可以
publicPath: './',
//标题,关闭,否则没法使用Helmet
title: false,
//服务器渲染
ssr: {
forceInitial: false,
devServerRender: true,
mode: 'stream',
staticMarkup: true,
},
antd: {},
dva: {
immer: true,
hmr: true
},
//按需加载
dynamicImport: {},
//浏览器兼容
targets: {
ie: 9,
},
//浏览器前缀
autoprefixer: {
//移除过时的前缀
remove: true
},
//配置是否让生成的文件包含 hash 后缀
hash: true,
//配置图片文件是否走 base64 编译的阈值。默认是 10000 字节,少于他会被编译为 base64 编码,否则会生成单独的文件
inlineLimit: 10000,
//为所有非三方脚本加上 crossorigin="anonymous" 属性,通常用于统计脚本错误。
crossorigin: true,
// layout:{
// theme: 'PRO',
// loading: true,
// },
//国际化
// locale: { antd: true },
nodeModulesTransform: {
type: 'none',
},
// 如果不配置约定式路由,则自动根据pages生成路由
routes: [
{ path: '/', component: '@/pages/index' },
],
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论