umi配置中开启keepalive后，在开启mako模式后不兼容

[phoema]

提示TypeError: Cannot read properties of null (reading 'applyPlugins')
注释掉多标签插件后就正常了

[xiaohuoni]

多tabs是实验性功能，不建议使用的。至于这个问题，我看看

[phoema]

ant-design-pro.zip
多tabs挺好用的，必须点赞，我们生产环境用了1年多了。
开启mako以后的配置文件在附件压缩包中，基于ant-design-pro可以复现。
pnpm build后报错。

[phoema]

怎么样有进展吗？

[xiaohuoni]

@phoema 哥，不好意思，我最近在现场支撑，还没看。刚刚跑了一下，没有问题，你试试这个包
myapp.zip

pnpm i&& pnpm preview

[phoema]

@xiaohuoni
抱歉，我可能没有描述清楚问题。切换为mako后，在dev是可以启动的，执行pnpm build后，打包到测试环境后出现以下问题。
页面启动后浏览器报错：

node_modules.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom.production.min.js:188 TypeError: Cannot read properties of null (reading 'applyPlugins')

config中注释掉keepalive、tabsLayout，页面能正常打开。

我提供的4.3.24版本的umi版本中可再现。
您提供的umi4.3.27由于存在以下问题，在windows下跑不起来，我也在同时关注以下issue：
umijs/umi#12738

[xiaohuoni]

@phoema 我发给你的，用 serve 访问的就是 build 之后的，一起蹲 windows 支持吧 umijs/umi-plugin-mako#11

[liubin595338764]

@xiaohuoni 我也出现在这个问题：

package.json:

{
  "name": "orca-admin",
  "version": "1.0.0",
  "private": true,
  "description": "ORCA Admin",
  "scripts": {
    "analyze": "cross-env ANALYZE=1 max build",
    "build": "max build",
    "deploy": "npm run build && npm run gh-pages",
    "dev": "npm run start:dev",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "max setup",
    "jest": "jest",
    "lint": "npm run lint:js && npm run lint:prettier && npm run tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
    "openapi": "max openapi",
    "prepare": "husky",
    "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
    "preview": "npm run build && max preview --port 8000",
    "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login",
    "serve": "umi-serve",
    "start": "cross-env UMI_ENV=dev max dev",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev",
    "test": "jest",
    "test:coverage": "npm run jest -- --coverage",
    "test:update": "npm run jest -- -u",
    "tsc": "tsc --noEmit"
  },
  "browserslist": [
    "defaults"
  ],
  "dependencies": {
    "@ant-design/icons": "^4.8.3",
    "@ant-design/pro-components": "^2.7.19",
    "antd": "^5.21.2",
    "antd-style": "^3.7.0",
    "axios": "^1.7.8",
    "classnames": "^2.5.1",
    "dayjs": "^1.11.13",
    "i18next": "^24.0.0",
    "querystring": "^0.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intl": "^7.0.1"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^3.3.0",
    "@commitlint/cli": "^19.5.0",
    "@commitlint/config-conventional": "^19.5.0",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.0.1",
    "@types/classnames": "^2.3.1",
    "@types/express": "^4.17.21",
    "@types/history": "^5.0.0",
    "@types/jest": "^29.5.13",
    "@types/lodash": "^4.17.10",
    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.0",
    "@types/react-helmet": "^6.1.11",
    "@umijs/lint": "^4.3.24",
    "@umijs/max": "^4.3.24",
    "autoprefixer": "^10.4.20",
    "cross-env": "^7.0.3",
    "eslint": "^8.57.1",
    "express": "^4.21.1",
    "gh-pages": "^6.1.1",
    "husky": "^9.1.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "lint-staged": "^15.2.10",
    "mockjs": "^1.1.0",
    "postcss": "^8.4.49",
    "prettier": "^3.3.3",
    "swagger-ui-dist": "^5.18.2",
    "tailwindcss": "3.4.15",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3",
    "umi-presets-pro": "^2.0.3",
    "umi-serve": "^1.9.11"
  },
  "engines": {
    "node": ">=12.0.0"
  },
  "create-umi": {
    "ignoreScript": [
      "docker*",
      "functions*",
      "site",
      "generateMock"
    ],
    "ignoreDependencies": [
      "netlify*",
      "serverless"
    ],
    "ignore": [
      ".dockerignore",
      ".git",
      ".github",
      ".gitpod.yml",
      "CODE_OF_CONDUCT.md",
      "Dockerfile",
      "Dockerfile.*",
      "lambda",
      "LICENSE",
      "netlify.toml",
      "README.*.md",
      "azure-pipelines.yml",
      "docker",
      "CNAME",
      "create-umi"
    ]
  }
}

config\config.ts

// https://umijs.org/config/
import { defineConfig } from '@umijs/max';
import { join } from 'path';
import defaultSettings from './defaultSettings';
import proxy from './proxy';
import routes from './routes';

const { REACT_APP_ENV = 'dev' } = process.env;

/**
 * @name 使用公共路径
 * @description 部署时的路径，如果部署在非根目录下，需要配置这个变量
 * @doc https://umijs.org/docs/api/config#publicpath
 */
const PUBLIC_PATH: string = '/';

export default defineConfig({
  /**
   * @name 开启 hash 模式
   * @description 让 build 之后的产物包含 hash 后缀。通常用于增量发布和避免浏览器加载缓存。
   * @doc https://umijs.org/docs/api/config#hash
   */
  hash: true,

  publicPath: PUBLIC_PATH,

  /**
   * @name 兼容性设置
   * @description 设置 ie11 不一定完美兼容，需要检查自己使用的所有依赖
   * @doc https://umijs.org/docs/api/config#targets
   */
  // targets: {
  //   ie: 11,
  // },
  /**
   * @name 路由的配置，不在路由中引入的文件不会编译
   * @description 只支持 path，component，routes，redirect，wrappers，title 的配置
   * @doc https://umijs.org/docs/guides/routes
   */
  // umi routes: https://umijs.org/docs/routing
  routes,
  /**
   * @name 主题的配置
   * @description 虽然叫主题，但是其实只是 less 的变量设置
   * @doc antd的主题设置 https://ant.design/docs/react/customize-theme-cn
   * @doc umi 的theme 配置 https://umijs.org/docs/api/config#theme
   */
  theme: {
    // 如果不想要 configProvide 动态设置主题需要把这个设置为 default
    // 只有设置为 variable， 才能使用 configProvide 动态设置主色调
    'root-entry-name': 'variable',
  },
  /**
   * @name moment 的国际化配置
   * @description 如果对国际化没有要求，打开之后能减少js的包大小
   * @doc https://umijs.org/docs/api/config#ignoremomentlocale
   */
  ignoreMomentLocale: true,
  /**
   * @name 代理配置
   * @description 可以让你的本地服务器代理到你的服务器上，这样你就可以访问服务器的数据了
   * @see 要注意以下 代理只能在本地开发时使用，build 之后就无法使用了。
   * @doc 代理介绍 https://umijs.org/docs/guides/proxy
   * @doc 代理配置 https://umijs.org/docs/api/config#proxy
   */
  proxy: proxy[REACT_APP_ENV as keyof typeof proxy],
  /**
   * @name 快速热更新配置
   * @description 一个不错的热更新组件，更新时可以保留 state
   */
  fastRefresh: true,
  //============== 以下都是max的插件配置 ===============
  /**
   * @name 数据流插件
   * @@doc https://umijs.org/docs/max/data-flow
   */
  model: {},
  /**
   * 一个全局的初始数据流，可以用它在插件之间共享数据
   * @description 可以用来存放一些全局的数据，比如用户信息，或者一些全局的状态，全局初始状态在整个 Umi 项目的最开始创建。
   * @doc https://umijs.org/docs/max/data-flow#%E5%85%A8%E5%B1%80%E5%88%9D%E5%A7%8B%E7%8A%B6%E6%80%81
   */
  initialState: {},
  /**
   * @name layout 插件
   * @doc https://umijs.org/docs/max/layout-menu
   */
  title: 'ORCA Admin',
  layout: {
    locale: true,
    ...defaultSettings,
  },
  /**
   * @name moment2dayjs 插件
   * @description 将项目中的 moment 替换为 dayjs
   * @doc https://umijs.org/docs/max/moment2dayjs
   */
  moment2dayjs: {
    preset: 'antd',
    plugins: ['duration'],
  },
  /**
   * @name 国际化插件
   * @doc https://umijs.org/docs/max/i18n
   */
  locale: {
    // default zh-CN
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  /**
   * @name antd 插件
   * @description 内置了 babel import 插件
   * @doc https://umijs.org/docs/max/antd#antd
   */
  antd: {},
  /**
   * @name 网络请求配置
   * @description 它基于 axios 和 ahooks 的 useRequest 提供了一套统一的网络请求和错误处理方案。
   * @doc https://umijs.org/docs/max/request
   */
  request: {},
  /**
   * @name 权限插件
   * @description 基于 initialState 的权限插件，必须先打开 initialState
   * @doc https://umijs.org/docs/max/access
   */
  access: {},
  /**
   * @name <head> 中额外的 script
   * @description 配置 <head> 中额外的 script
   */
  headScripts: [
    // 解决首次加载时白屏的问题
    { src: join(PUBLIC_PATH, 'scripts/loading.js'), async: true },
  ],

  //================ pro 插件配置 =================
  presets: ['umi-presets-pro'],
  /**
   * @name openAPI 插件的配置
   * @description 基于 openapi 的规范生成serve 和mock，能减少很多样板代码
   * @doc https://pro.ant.design/zh-cn/docs/openapi/
   */
  // openAPI: [
  //   {
  //     requestLibPath: "import { request } from '@umijs/max'",
  //     // 或者使用在线的版本
  //     // schemaPath: "https://gw.alipayobjects.com/os/antfincdn/M%24jrzTTYJN/oneapi.json"
  //     schemaPath: join(__dirname, 'oneapi.json'),
  //     mock: false,
  //   },
  //   {
  //     requestLibPath: "import { request } from '@umijs/max'",
  //     schemaPath: 'https://gw.alipayobjects.com/os/antfincdn/CA1dOm%2631B/openapi.json',
  //     projectName: 'swagger',
  //   },
  // ],

  /**
   * @name 是否开启 mako
   * @description 使用 mako 极速研发
   * @doc https://umijs.org/docs/api/config#mako
   */
  mako: {},
  esbuildMinifyIIFE: true,
  requestRecord: {},
  tailwindcss: {},
});

[liubin595338764]

@phoema 哥，不好意思，我最近在现场支撑，还没看。刚刚跑了一下，没有问题，你试试这个包 myapp.zip

pnpm i&& pnpm preview

@xiaohuoni 你好，你的这个包安装后也有这个问题，我用了yarn

windows 11系统；
node版本：v20.18.1
yarn版本：1.22.22
yarn.lock文件：(文件名称可以改回yarn.lock来看)
yarn.lock.JSON

[phoema]

可以等这个issue修复后再看看。

umijs/umi#12738