undefinedfix
Sign in

After installing and opening SRR according to the official documents, it is found that as long as you reference UMI, an error will be reported, and there is no problem if you do not open SSR

dbaser edited in Wed, 25 Jan 2023

Dependent versions

"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"
  }

The following two pieces of code all report errors, and the contents are the same:

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>

The following two pieces of code both report errors and have the same content, as shown in the figure below:

If I change the first line of the second code to the following, I will not report an error, but if I introduce other content of UMI in this way, I still report an error.

import { Helmet } from "react-helmet";

<Helmet>
    <meta charSet="utf-8" />
    <title>My Title</title>
    <link rel="canonical" href="http://mysite.com/example" />
</Helmet>

Here's my list umirc.ts configuration file

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' },
    ],
});
0 Replies