umijs / umi-server Goto Github PK

What happens?

预渲染中在getInitialProps使用store.dispatch修改state值会被state初始值覆盖

Context

• Umi Version: 2.12.7
• Node Version: 10.16.3
• Platform: mac

What happens?

在tsx中 使用 dva connect 修饰器后报TypeError,但是直接访问assets server却正常

复现步骤，错误日志以及相关配置

tsx 中引入 connect

相关环境信息

• Umi 版本：2.12.7
• Node 版本：10.16.3
• 操作系统：mac

What happens?

When i use components with styled-components, the style aren't integrated on server-side.

here is an exmample repo
https://github.com/SteedMonteiro/ssr-styled-component

Expected behavior
the text 'Bold text' isn't in bold on server side but works on the client side

Context

• Umi Version: ^2.12.5
• Node Version: v10.16.3
• Platform: Mac

What happens?

koa服务端渲染运行yarn dev终端报错，错误为/sockjs-node/info activeRoute not found

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue.
Use yarn create umi then upload to your GitHub

How To Reproduce

Steps to reproduce the behavior:
1.
2.

Expected behavior
1.
2.

Context

• Umi Version:2.12.3
• Node Version:10.16.2
• Platform:macOS

What happens?

I want to pass the server cookie to the client-side when server-side rendering.

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue.
Use yarn create umi then upload to your GitHub

cookies.get('any')

How To Reproduce

Steps to reproduce the behavior:
1.
2.

Expected behavior
1.
2.

Context

• Umi Version: 2.12.7 Umi Server: 1.1.9
• Node Version: 10.15.2
• Platform: React

使用umi-plugin-prerender的过程中，发现只有exclude属性，有些情况下工作量较大

What happens?

When I use ssr,

C:\Users\jnso5\Desktop\Test\node_modules\dva-core\dist\index.js:1291
          throw _iteratorError3;
          ^

TypeError: window.addEventListener is not a function
    at setup (C:\Users\jnso5\Desktop\Test\dist/umi.server.js:1:314222)
    at run (C:\Users\jnso5\Desktop\Test\node_modules\dva-core\dist\index.js:952:24)

and in my 'models'

            window.addEventListener('resize', () => {
                isMobileView();
                isMenuToggled();
            });

This error bother me

How can I fix this?? when not using ssr, no problem
And now use with just koa.js example

而且在高并发情况下性能表现更好!

What happens?

prerender需要在ssr的node环境里编译好资源，如果在调用window对象的api时，例如window.location直接写成location，会导致build出错，但并不能被捕捉到，例如写了api.onBuildFail的插件，或者process.on('uncaughtException'）去监听，都不能获取到报错事件，导致build出错提醒不可控。

以下是报错内容

(node:98854) UnhandledPromiseRejectionWarning: ReferenceError: history is not defined
at Object.call (/Users/bytedance/Desktop/bytedance/ByteRangersFE/dist/src/app.ts:28:1)
at require (/Users/bytedance/Desktop/bytedance/ByteRangersFE/dist/webpack/bootstrap:19:1)
at Object.call (/Users/bytedance/Desktop/bytedance/ByteRangersFE/dist/src/pages/.umi-production/umi.js:28:13)

Expected behavior
1.希望提供一个报错的callback，能帮助捕捉prerender报错

Context

• Umi Version 2.13.3:
• Node Version 10:
• Platform mac:

试了一下，在 examples/eggjs 中修改了前端的代码，没有热更新。需要手动 npm run build 一下。
另外，clone 下来直接运行 npm run dev，会有找不到 public/umi.server.js 文件的错误提示。
记得，以前好像是支持的哇？

1. 建议只有用户使用到 postProcessHtml 时，才调用 cheerio.load 解析 html string。现在貌似无论用户是否使用 postProcessHtml，都会调用。
2. 使用 cheerio.load 是为了允许用户对 html string 做二次处理。如果能够拿到原始的 react string，而不是整个 html，可能会灵活些

Hi all! Curious to know who is using umi SSR! It would be really appreciated if you:

1. Share your company name
2. What kind of project? How large? (numbers of built/integrated with umi/umi-server)
3. If your project is open source or public, please share a link!

What happens?

Our project is configured @umijs/plugin-prerender with runtimePublicPath: true option. When I try to build the project, it always output rendered html in which all img[src] are prefixed with undefined, something like below:

<img class="some-class" src="undefinedstatic/some-path-and-name.png" ... />

And I found this in umi.server.js:

"/xxx":function(e,t,n){e.exports=n.p+"static/some-path-and-name.png"}

I doubt that n.p may be somewhat like window.publicPath, and there maybe no publicPath property under nodePolyfill.window, which causing undefined value rendered.

Mini Showcase Repository(REQUIRED)

Currently cannot provide it since I'm in a corporate network.

How To Reproduce

Steps to reproduce the behavior:

1. import an image in any component source code.
2. configure ssr: true and runtimePublicPath: true in project's config.ts
3. configure @umijs/plugin-prerender plugin in project's config.ts
4. build your project

Expected behavior

1. correct src value in all img elements

Context

• Umi Version: 2.12.6
• Node Version: 13.1.0
• Platform: macOS Mojave 10.14.6

What happens?

eggjs的例子，

在web/layouts/index 引入的图片无法显示，
web/pages/home/index 下可以。

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue.
Use yarn create umi then upload to your GitHub

How To Reproduce

Steps to reproduce the behavior:

1. 在app/web下添加目录assets，放入图片logo.png

2. app/web/layouts/index

import logo from '@/assets/logo.png
...
...
...
render() {
  <div className={classnames('layout', className)} >
     <img src={logoPng} alt=""/>
     <div>{this.props.children}</div>
   </div>
}

3. 结果图片的publicPatch显示undefined

 <img src="undefinedstatic/logo.1ba85346.png" alt="">

Expected behavior

1. 希望能够像在pages/home/index 中引入logo.png一样，显示正确的 publicPath: http://localhost:8000

Context

• Umi Version:
• Node Version:
• Platform:

What happens?

在项目中加入了ssr、@umijs/plugin-prerender后，build报错

##配置文件

.umirc.prod.js

const git = require('git-rev-sync'); const PatrolUploadPlugin = require('@learning/patrol-upload-plugin').default; const releaseVersion =${git.branch()}:${git.short()}`
const RELEASE_BRANCH = 'master'
const isReleaseBranch = git.branch() === RELEASE_BRANCH

const defaultUmiConfig = require('./.umirc.js')

export default {
base: '/byterangers/',
devtool: isReleaseBranch ? 'source-map' : false,
define: {
'process.env.RELEASE': true,
'process.env.RELEASE_VERSION': releaseVersion,
},
// rememeber add / at the end of path
publicPath: '//s3.pstatp.com/dp/byterangers/',
chainWebpack(config) {
if (isReleaseBranch) {
config.plugin('patrolUploadPlugin').use(
new PatrolUploadPlugin({
sourceMapPath: config.output.get('path'),
openKey: 'ec99bbc6916f4e95bf698d7296756193',
release: releaseVersion,
}),
);
}
},
plugins: defaultUmiConfig.default.plugins.concat([
['@umijs/plugin-prerender']
]),
ssr: true
};
`

.umirc.js

`
import nodeUrl from 'url';
import routes from './config/routes';
import theme from './config/theme';

// theme config
const themes = theme && theme();

// proxy config
let isMock = false;
const proxyOptions = isMock
? {
'/byterangers': {
target: 'https://athens.bytedance.net',
changeOrigin: true,
pathRewrite: { '^/': '/mock/69/' },
},
}
: {
'/byterangers/**': {
target: 'https://data.bytedance.com',
// target: 'http://10.224.11.129:8888',
changeOrigin: true,
headers: {
host: nodeUrl.parse('https://data.bytedance.com').host,
},
pathRewrite: function(path, req) {
var param = process.argv[process.argv.length - 1];
var prefix = /[\w|-|.]*/.test(param) ? fedev-${param} : '/';
return prefix + path;
},
},
};

// ref: https://umijs.org/config/
const config = {
treeShaking: true,
hash: true,
define: {
'process.env.RELEASE': false,
'process.env.RELEASE_VERSION': '',
},
plugins: [
// ref: https://umijs.org/plugin/umi-plugin-react.html
[
'umi-plugin-react',
{
antd: true,
dva: true,
dynamicImport: {
// loadingComponent: './components/basic/page-loading',
webpackChunkName: true,
level: 3,
},
title: '字节漫游者-让数据创造价值',
dll: false,
locale: {
enable: true,
default: 'zh-CN',
},
routes: {
exclude: [
/models//,
/services//,
/model.(t|j)sx?$/,
/service.(t|j)sx?$/,
/components//,
],
},
},
],
],
extraBabelPlugins: [
[
'import',
{
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
},
],
],
targets: {
ie: 11,
android: '4.3',
},
proxy: proxyOptions,
routes,
theme: themes,
};

export default config;

`

错误结果

import '../../style/index.less';
SyntaxError: Unexpected string

以上这两个错，在没有加入@umijs/plugin-prerender插件之前，是不会报的

umi-server似乎表现出对代码的低容错率。
在home model中添加如下代码，添加一个1/5概率的错误，预渲染成功后，访问页面尝试触发这个错误，触发后会导致页面无法打开，一直处在等待服务器响应的状态。
if(!Math.floor(Math.random() * (5))){
throw 'random error';
};
这个问题暂时可以通过try catch解决，但在真实项目这样未免太过苛刻，真实项目根本无法做到100%保证不出错。

比如我当前在a页面，通过浏览器的前进后退进入b页面，当我切换到b页面的时候，b页面的getInitialProps方法没有执行，a页面的确执行了

What happens?

1、下载umi+koa服务端渲染的代码，运行yarn dev报错，终端错误提示/sockjs-node/info activeRoute not found
2、我们这个是否有热更新呢

最小可复现仓库

请使用 yarn create umi 创建，并上传到你的 GitHub 仓库

复现步骤，错误日志以及相关配置

提示错误/sockjs-node/info activeRoute not found

相关环境信息

• Umi 版本：2.12.3
• Node 版本：10.16.2
• 操作系统：macOS

What happens?

使用https://github.com/umijs/umi-server/tree/master/examples/eggjs 这个案例。
项目下直接npm run buid 正常运行。
使用 docker，启动交互式容器，npm run build， 提示

Error: ENOENT: no such file or directory, scandir '/usr/src/app/pages'
    at readdirSync (fs.js:790:3)
    at getRouteConfigFromDir (/usr/src/app/node_modules/umi-build-dev/lib/routes/getRouteConfigFromDir.js:109:39)
    at _default (/usr/src/app/node_modules/umi-build-dev/lib/routes/getRouteConfig.js:57:49)
    at Object.fetchRoutes (/usr/src/app/node_modules/umi-build-dev/lib/plugins/commands/getRouteManager.js:35:51)
    at api.registerCommand.args (/usr/src/app/node_modules/umi-build-dev/lib/plugins/commands/build/index.js:66:19)
    at Service.runCommand (/usr/src/app/node_modules/umi-build-dev/lib/Service.js:485:12)
    at Service.run (/usr/src/app/node_modules/umi-build-dev/lib/Service.js:442:17)
    at Object.<anonymous> (/usr/src/app/node_modules/umi/lib/scripts/build.js:33:47)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/usr/src/app/node_modules/umi/lib/cli.js:94:5)

如果通过docker映射磁盘的上的项目是没有问题，正常启动。
不知道哪里出了问题，请指教

Mini Showcase Repository(REQUIRED)

Provide a mini GitHub repository which can reproduce the issue.
Use yarn create umi then upload to your GitHub

How To Reproduce

Steps to reproduce the behavior:

1. Dockerfile

FROM node:10.16.3
WORKDIR /usr/src/app
COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]
RUN npm install --registry=https://registry.npm.taobao.org
COPY . .
EXPOSE 7001
CMD npm start

2. build docker image

docker build --rm -f "Dockerfile" -t umi-egg-ssr:latest . 

3. run docker container

docker run --rm -i -t  -p 7001:7001/tcp umi-egg-ssr:latest /bin/bash

4. run npm cli

npm run build

5. throw Error
   

Expected behavior

希望能在docker下能正常启动，谢谢

Context

• Umi Version:
• Node Version:
• Platform:
  windows

umi中的location在react-rounter基础上增加了query属性

umi在react-router中加入了query这个属性，但是umi-server环境获取不到这个query，导致报错

组件代码

`
const Verify: React.FC<IProps & RouteComponentProps> = ({ location }) => {

const { token } = location.query;
......
)};
`

原页面中获取到的object截图

使用ssr、prerender配置后，页面报错

(node:25263) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'token' of undefined

服务端传递数据到 getInitialProps 函数，有没有什么推荐的写法？
我现在的写法法是：

// 服务器
ctx.req.__initialData__ = {...};
const { ssrHtml, g_initialData } = render(ctx);

// 组件
Comp.getInitialProps({ req }) {
    return {
       initialData: req.__initialData__,
    };
}

另外想问一下 render 函数返回的 g_initialData 是什么东西？

你好，我按照示例仓库代码运行报错有如下报错

一开始是100ms等待时间，随着PV访问的增加，页面加载时间在逐渐的增加。
最后增加到1s以上，如果继续进行PV访问，加载时间还会继续增加。
已经删除了home model中的concat写法，确保数据不会无限增加。

web/config/config.ts 中使用了配置式路由，其中配置了404路由

routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        {
          path: '/',
          component: '../pages/index'
        },
        {
          path: '/home',
          component: '../pages/index'
        },
        {
          path: '/404',
          component: '../pages/404'
        },
      ]
    },
  ],

运行命令 yarn start

public/ssr-client-mainifest.json

{
  "/": {
    "js": [
      "umi.6a58bb0c.js",
      "vendors.e91bbfee.async.js",
      "layouts__index.13c25136.async.js",
      "p__index.9c677057.async.js"
    ],
    "css": [
      "umi.2c6f6a29.css",
      "vendors.35d662dc.chunk.css",
      "layouts__index.ee6358cc.chunk.css",
      "p__index.2fdadcdb.chunk.css"
    ]
  },
  "/home": {
    "js": [
      "umi.6a58bb0c.js",
      "vendors.e91bbfee.async.js",
      "layouts__index.13c25136.async.js",
      "p__index.9c677057.async.js"
    ],
    "css": [
      "umi.2c6f6a29.css",
      "vendors.35d662dc.chunk.css",
      "layouts__index.ee6358cc.chunk.css",
      "p__index.2fdadcdb.chunk.css"
    ]
  },
  "/404": {
    "js": [
      "umi.6a58bb0c.js",
      "vendors.e91bbfee.async.js",
      "layouts__index.13c25136.async.js",
      "p__404.c7e83429.async.js"
    ],
    "css": [
      "umi.2c6f6a29.css",
      "vendors.35d662dc.chunk.css",
      "layouts__index.ee6358cc.chunk.css"
    ]
  },
  "__404": {
    "js": [
      "umi.6a58bb0c.js",
      "vendors.e91bbfee.async.js",
      "layouts__index.13c25136.async.js",
      "p__404.c7e83429.async.js"
    ],
    "css": [
      "umi.2c6f6a29.css",
      "vendors.35d662dc.chunk.css",
      "layouts__index.ee6358cc.chunk.css"
    ]
  }
}

浏览器地址访问 127.0.0.1:7001/test 这个不存在的路由，并没有渲染对应的404页面

渲染结果如下：

  <!DOCTYPE html><html><head><title data-react-helmet="true"></title></head><body></body></html>

后来采取方案是在controller/home.js 添加判断,在渲染之前对matchPath做判断是否匹配上，不知道有没有什么问题？
小问题就是http状态码就是200了。

   /**
     * not fount  404
     */
    if(matchPath == false ) {
      return ctx.redirect('/404');
    }


    ctx.body = await ctx.renderString(ssrHtml);

配置 umi-plugin-react 的 dynamicImport 后，渲染流程为：
渲染服务器直出内容 -> 加载页面的异步资源 -> 页面内容被 dynamicImport 的 loading 状态替换 -> 异步资源加载成功 -> 正确渲染

在这个过程中，页面内容会整体被 loading 状态替换一次，造成闪烁，请问有解决方案吗？

What happens?

ssr模式，控制台打印一下内容
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
in ConnectFunction
in ConnectFunction
in Fragment
in u
in Context.Provider
in Context.Consumer
in Route
in f
in Context.Consumer
in Switch
in Fragment
in s
in Context.Provider
in Router
in StaticRouter
in Context.Provider
in Provider
in m
in div
in body
in html

• Umi Version: ^2.12.6
• Node Version: v12.13.1
• umi-server Version: ^1.1.8