umi@4没有modifyClientRenderOpts了？用什么替代

[qiujie8092916]

What happens?

umi@3下会在运行时插件里使用modifyClientRenderOpts方法，umi@4下会报 Error: register failed, invalid key modifyClientRenderOpts from

Mini Showcase Repository(REQUIRED)

How To Reproduce

Steps to reproduce the behavior:

1. 插件里使用api.addRuntimePlugin添加 js
2. js 里调用modifyClientRenderOpts报错 Error: register failed, invalid key modifyClientRenderOpts from

Expected behavior

1. 替代方式

Context

• Umi Version: 4.0.30
• Node Version:
• Platform:

[github-actions]

由于缺乏足够的信息，我们暂时关闭了该 Issue。请修改（不要回复） Issue 提供最小重现以重新开启。谢谢。

[fz6m]

是 api.modifyContextOpts ，可参考 .umi/umi.ts 中的参数列表。

[qiujie8092916]

是 api.modifyContextOpts ，可参考 .umi/umi.ts 中的参数列表。

api.modifyContextOpts 在哪里调用？

[qiujie8092916]

是 api.modifyContextOpts ，可参考 .umi/umi.ts 中的参数列表。

之前在modifyClientRenderOpts 里用到了参数history、rootElement，并在运行时修改了history
参照.umi/umi.ts里的modifyContextOpts参数是{}呢？

[fz6m]

// src/app.ts

export const modifyContextOpts = () => {
  return {
    // 能 overrides 的参数，可参考 .umi/umi.ts 传参
    basename: '/cc',
    rootElement: document.getElementById('#sub-root')
  }
}

[qiujie8092916]

不好意思，可能之前没有表达清楚
我们是这样的:

// umi@3
export const modifyContextOpts => (memo) {
     const history = memo.history;
     const rootElement = memo.rootElement;

    // overwrite history
    history.go = function() { 
        // use rootElement
        // do sth
    }

    history.goBack = function() { 
        // use rootElement
        // do sth
    }

    history.replace = function() { 
        // use rootElement
        // do sth
    }
    
    return {
        ...memo,
        history
    }
}

请问在umi@4下怎么解

[fz6m]

rootElement 的位置在 modifyContextOpts 中可以修改。

history 可以在这里加 patch ，但是有一些问题，严格来说他的执行时机可能并不在所有 history 运用之前。

// src/app.ts

export const rootContainer = (
  rootContainer: React.ReactNode,
  args: {
    history: any
  }
) => {
  console.log('rootContainer: ', rootContainer)
  console.log('args: ', args)

  const history = args.history
  const originPush = history.push
  history.push = (path: any, state: any) => {
    originPush(path, state)
  }
  return rootContainer
}

目前没有非常好的方案，可以提 feature 支持 context 的修改。

[fz6m]

继上面一条消息，新版本发布后（ >=4.0.31 ）。

将可以在 render 前获取到 history ，从而实现你的 patch 需求。

import { history } from 'umi'

export const render = (oldRender: any) => {
  // use history
  oldRender()
}

[fz6m]

部分 qiankun 应用有问题，改动被回滚了。

楼上的方案只能在 4.0.31 用（确保你没有使用 qiankun 插件），在 4.0.32 不可用，有需求的话，等待新的改动方案吧。

[qiujie8092916]

继上面一条消息，新版本发布后（ >=4.0.31 ）。

将可以在 render 前获取到 history ，从而实现你的 patch 需求。

import { history } from 'umi'

export const render = (oldRender: any) => {
  // use history
  oldRender()
}

此方案不能满足，我们在重写history的方法里，需要用到memo.rootElement

[fz6m]

今天发版后可调用 modifyClientRenderOpts