开启 build-plugin-keep-alive 插件，打包应用后页面报错

[Angel-fund]

开启 build-plugin-keep-alive 插件，打包应用后页面报错，开发过程是正常的

错误信息

Error: Minified React error #
130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

相关环境信息

• ice.js Version：2.6.1
• build.json Configuration：

{
  "vite": true,
  "outputDir": "release/app/dist/renderer",
  "publicPath": "./",
  "plugins": [
    [
      "build-plugin-ignore-style",
      {
        "libraryName": "antd"
      }
    ],
    "build-plugin-keep-alive"
  ],
  "libraryTarget": "umd"
}

• Node Version: v16.8.0
• Platform: MacOS M1芯片

[ClarkXia]

提供 build-plugin-keep-alive 版本信息，以及使用 build-plugin-keep-alive 的方式

[worklinwu]

我也遇到了, 但是解决了. 调试发现是因为插件依赖的 react-activation 版本太低.

要么提醒下作者升级下插件的依赖版本, 或者自己写一个. 我目前是参考插件源码的方式自己写一个, 然后引用新的版本.

import { KeepAlive } from 'react-activation';

const keepAliveWhenParam = [true, true];

const KeepAliveWrapper = (PageComponent) => {
  const { pageConfig } = PageComponent;
  if (pageConfig?.keepAlive === false) {
    return PageComponent;
  } else {
    return (props) => {
      return (
        <KeepAlive when={keepAliveWhenParam}>
          <PageComponent {...props} />
        </KeepAlive>
      );
    };
  }
};

export default KeepAliveWrapper;

app.tsx

modifyRoutes: (routes) => {
      if (!ENABLE_KEEP_ALIVE) {
        return routes;
      }
      return mapTree(routes, (node) => {
        const newNode = { ...node };
        newNode.pageConfig = newNode.pageConfig || {};
        if (newNode.pageConfig?.keepAlive !== false && newNode.pageConfig?.title && newNode.path && newNode.component) {
          newNode.wrappers = [KeepAliveWrapper];
        }
        return newNode;
      });
    },

[wmy94827]

+1

[wmy94827]

build-plugin-keep-alive

"build-plugin-keep-alive": "^1.8.1",

[bitqiang]

react-activation

我也遇到了, 但是解决了. 调试发现是因为插件依赖的 react-activation 版本太低.

要么提醒下作者升级下插件的依赖版本, 或者自己写一个. 我目前是参考插件源码的方式自己写一个, 然后引用新的版本.

import { KeepAlive } from 'react-activation';

const keepAliveWhenParam = [true, true];

const KeepAliveWrapper = (PageComponent) => {
  const { pageConfig } = PageComponent;
  if (pageConfig?.keepAlive === false) {
    return PageComponent;
  } else {
    return (props) => {
      return (
        <KeepAlive when={keepAliveWhenParam}>
          <PageComponent {...props} />
        </KeepAlive>
      );
    };
  }
};

export default KeepAliveWrapper;

app.tsx

modifyRoutes: (routes) => {
      if (!ENABLE_KEEP_ALIVE) {
        return routes;
      }
      return mapTree(routes, (node) => {
        const newNode = { ...node };
        newNode.pageConfig = newNode.pageConfig || {};
        if (newNode.pageConfig?.keepAlive !== false && newNode.pageConfig?.title && newNode.path && newNode.component) {
          newNode.wrappers = [KeepAliveWrapper];
        }
        return newNode;
      });
    },

可是我尝试用 resolutions 来锁定版本，build出来的还是一样报错。

  "resolutions": {
    "react-activation": "^0.11.2"
  },

使用yarn 安装依赖，查看yarn.lock

[email protected], react-activation@^0.7.0:
  version "0.11.2"
  resolved "https://registry.npmmirror.com/react-activation/-/react-activation-0.11.2.tgz#a3fcf0a0405a755e6a5f0feb58afaaf81a25ae7f"
  integrity sha512-UR6rdjgDuNwMc1vszMassV+cxrNr2t62cxBcWZLe/qeTiW6UmcBV7yGF+s2TAS7pT3j45ebC/DPL4VB027t6zA==
  dependencies:
    create-react-context "^0.3.0"
    hoist-non-react-statics "^3.3.0"
    react-node-key "^0.4.0"
    szfe-tools "^0.0.0-beta.7"

似乎已经升级到了0.11.2，但是还是不行。

最后想请教下 mapTree的实现是咋样的？

[ChenLeoXX]

我试过了 还是会报那个错误 不知道那个老哥怎么处理的，版本也更新到最小的了，那个mapTree就是一个递归 处理modifyRoutes里的route每个组件信息执行一下 传的那个函数

[bitqiang]

我试过了 还是会报那个错误 不知道那个老哥怎么处理的，版本也更新到最小的了，那个mapTree就是一个递归 处理modifyRoutes里的route每个组件信息执行一下 传的那个函数

那你现在ok了吗？有木有代码参考下？

[ChenLeoXX]

打包后还是报那个错 不清楚具体原因

[ChenLeoXX]

我试过了 还是会报那个错误 不知道那个老哥怎么处理的，版本也更新到最小的了，那个mapTree就是一个递归 处理modifyRoutes里的route每个组件信息执行一下 传的那个函数

那你现在ok了吗？有木有代码参考下？

https://github.com/vitejs/vite/issues/4123 有报错可以看下这个issue

[luuwang]

我也遇到了, 但是解决了. 调试发现是因为插件依赖的 react-activation 版本太低.

要么提醒下作者升级下插件的依赖版本, 或者自己写一个. 我目前是参考插件源码的方式自己写一个, 然后引用新的版本.

import { KeepAlive } from 'react-activation';

const keepAliveWhenParam = [true, true];

const KeepAliveWrapper = (PageComponent) => {
  const { pageConfig } = PageComponent;
  if (pageConfig?.keepAlive === false) {
    return PageComponent;
  } else {
    return (props) => {
      return (
        <KeepAlive when={keepAliveWhenParam}>
          <PageComponent {...props} />
        </KeepAlive>
      );
    };
  }
};

export default KeepAliveWrapper;

app.tsx

modifyRoutes: (routes) => {
      if (!ENABLE_KEEP_ALIVE) {
        return routes;
      }
      return mapTree(routes, (node) => {
        const newNode = { ...node };
        newNode.pageConfig = newNode.pageConfig || {};
        if (newNode.pageConfig?.keepAlive !== false && newNode.pageConfig?.title && newNode.path && newNode.component) {
          newNode.wrappers = [KeepAliveWrapper];
        }
        return newNode;
      });
    },

您好，我也是按照您这个去实现的，但是未实现缓存效果，AliveScope您是怎么处理的。有更详细的代码作参考吗？ @worklinwu