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

Created on 26 Jun 2020 · 10Comments · Source: umijs/umi

如下两段代码，均有报错，且内容都一样：

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

Need Reproduce type(ssr)

Source

kwooshung

Most helpful comment

你node版本是多少？可能是node版本的问题，我之前是14.0也有这样的问题，后面换成10.21.0就好了～

CassielLee on 6 Jul 2020

👍2

All 10 comments

刚在内部项目用了，没发现这个问题，给个复现试试

ycjcl868 on 28 Jun 2020

刚在内部项目用了，没发现这个问题，给个复现试试

git不知道为什么提交不上了，暂时放到百度帮盘了，而且还发现，路由最多2层，3层就找不到了比如xxx.com/a/b/c
找不到c这个页面。

可以的话，希望你们弄一个基础版本，我看看有什么区别
链接: https://pan.baidu.com/s/178dYlC5bSACvlCrdtrjdXA 提取码: fw2b

in ./src/.umi/plugin-request/request.ts

Module parse failed: Unexpected token (19:35)
File was processed with these loaders:

./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| function useRequest(service, options = {}) {
| return useUmiRequest(service, {

formatResult: result => result?.data,
| requestMethod: requestOptions => {
| if (typeof requestOptions === 'string') {

@ ./src/.umi/core/umiExports.ts 8:0-42 8:0-42
@ ./node_modules/umi/dist/index.esm.js
@ ./src/components/tzg-design/TzgLink/index.tsx
@ ./src/components/tzg-design/index.tsx
@ ./src/layouts/index.tsx
@ ./src/.umi/core/server.ts
@ multi ./src/.umi/core/server.ts

kwooshung on 29 Jun 2020

刚在内部项目用了，没发现这个问题，给个复现试试

嗯，git好了，我弄了一个最小测试版本，麻烦你们看下

[email protected]:kwooshung/umitest.git

kwooshung on 29 Jun 2020

你node版本是多少？可能是node版本的问题，我之前是14.0也有这样的问题，后面换成10.21.0就好了～

CassielLee on 6 Jul 2020

👍2

@kwooshung 你给的repo：[email protected]:kwooshung/umitest.git 里，报的错是：

lugin-model: Invoking '@@initialState' model failed: ReferenceError: window is not defined
    at _default (/Users/github/umitest/dist/umi.server.js:687:32)
    at processChild (/Users/github/umitest/dist/umi.server.js:37420:14)
    at resolve (/Users/github/umitest/dist/umi.server.js:37337:5)
    at ReactDOMServerRenderer.render (/Users/github/umitest/dist/umi.server.js:37812:22)
    at ReactDOMServerRenderer.read (/Users/github/umitest/dist/umi.server.js:37750:29)
    at Object.renderToString (/Users/github/umitest/dist/umi.server.js:38365:27)
    at _callee3$ (/Users/github/umitest/dist/umi.server.js:976:102)
    at tryCatch (/Users/github/umitest/dist/umi.server.js:68218:40)
    at Generator.invoke [as _invoke] (/Users/github/umitest/dist/umi.server.js:68447:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/github/umitest/dist/umi.server.js:68270:21)
    at asyncGeneratorStep (/Users/github/umitest/dist/umi.server.js:761:103)
    at _next (/Users/github/umitest/dist/umi.server.js:763:194)
    at process._tickCallback (internal/process/next_tick.js:68:7)

貌似和你上面描述的问题不一样。如果是这个问题的话，那是因为@umijs/plugin-model 目前看起来还不支持ssr，所以解决方案页简单，不要直接装@umijs/preset-react，需要哪个插件装哪个就好了，在你提供的repo里，只需要

yarn add @umijs/plugin-helmet @umijs/plugin-request @umijs/plugin-antd

leftstick on 6 Jul 2020

👍1

[email protected]:kwooshung/umitest.git

node 14 和 node 12 都没问题，试过

ycjcl868 on 27 Sep 2020

https://github.com/umijs/umi/pull/5486/files#diff-754d395d0bf281da5b546b90bcd4da3fR18-R20

可能是 engines 的问题，试下这样改能不能运行

ycjcl868 on 27 Sep 2020

还有问题吗？

ycjcl868 on 26 Jan 2021

Hello @kwooshung. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox umi or using yarn create @umijs/umi-app to create and upload it to your GitHub repository.

你好 @kwooshung, 为了方便定位和排查问题，我们需要你提供一个重现实例，请提供一个尽可能精简的链接 codesandbox umi 或使用 yarn create @umijs/umi-app 创建，并上传到你的 GitHub 仓库。

github-actions[bot] on 26 Jan 2021

Since the issue was labeled with Need Reproduce, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.
由于该 issue 被标记为需要可复现步骤，却 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

github-actions[bot] on 30 Jan 2021

Was this page helpful?

0 / 5 - 0 ratings