按照官方文档安装并开启srr后,发现只要引用umi就会报错,不开ssr没问题

发布于 2022-09-12 03:25:11 字数 3386 浏览 29 评论 0

相关依赖的版本

"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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文