umijs / umi

A framework in react community ✨
https://umijs.org
MIT License
15.25k stars 2.65k forks source link

[Bug] Umi4 antdPro 脚手架, 国际化功能报错 #8192

Closed PassionPI closed 2 years ago

PassionPI commented 2 years ago

What happens?

.umirc.ts文件 配置 locale, 并去掉 layout 后报错, 应该是这个变量pluginManager值为null, 没有被初始化

在已有的umi3旧项目, 升级umi4中,如果不去掉 layout 配置, 也会报同样的错误

Mini Showcase Repository(REQUIRED)

https://github.com/PassionPI/umi4-locale-error

commit c1c25f4 为初始化项目 commit f82a1ce 为错误复现修改

Please provide a repository using yarn create @umijs/umi-app then upload to your GitHub 请提供一个可复现的仓库,使用 yarn create @umijs/umi-app 创建,并上传到你的 GitHub 仓库

How To Reproduce

  1. pnpm dlx create-umi
  2. 选择 Ant Design Pro
  3. 选择 pnpm
  4. 选择 taobao
  5. 新增国际化配置与文件, git diff 如下
  6. pnpm dev
    diff --git a/.umirc.ts b/.umirc.ts
    index 054b731..f60d901 100644
    --- a/.umirc.ts
    +++ b/.umirc.ts
    @@ -6,8 +6,12 @@ export default defineConfig({
    model: {},
    initialState: {},
    request: {},
    -  layout: {
    -    title: '@umijs/max',
    +  // layout: {
    +  //   title: '@umijs/max',
    +  // },
    +  locale: {
    +    default: 'en-US',
    +    antd: true,
    },
    routes: [
     {
    diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
    new file mode 100644
    index 0000000..c3f58c5
    --- /dev/null
    +++ b/src/locales/en-US.ts
    @@ -0,0 +1,3 @@
    +export default {
    +  welcome: "Welcome to Umi's world!",
    +};
    \ No newline at end of file
    diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
    new file mode 100644
    index 0000000..78d64e8
    --- /dev/null
    +++ b/src/locales/zh-CN.ts
    @@ -0,0 +1,3 @@
    +export default {
    +  welcome: '欢迎光临 Umi 的世界!',
    +};

Context

xierenyuan commented 2 years ago

需要移除掉 src/app.ts 中layout 配置

// 运行时配置

// 全局初始化数据配置,用于 Layout 用户信息和权限初始化
// 更多信息见文档:https://next.umijs.org/docs/api/runtime-config#getinitialstate
export async function getInitialState(): Promise<{ name: string }> {
  return { name: '@umijs/max' };
}

// export const layout = () => {
//   return {
//     logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
//     menu: {
//       locale: false,
//     },
//   };
// };
PassionPI commented 2 years ago

@xierenyuan 可以再请教一个问题吗 在已有的umi3项目中「使用umi3 & @umijs/preset-react」 升级umi4「移除umi3 & @umijs/preset-react, 并且安装@umijs/max, 参考改步骤操作https://umijs.org/docs/introduce/upgrade-to-umi-4 」的时候,修改配置如下, 会产生相同的1楼复现流程的报错

公司项目, 没发上传到仓库, 只能发一下配置了

export default defineConfig({
  antd: {},
  access: {},
  model: {},
  initialState: {},
  request: {},
  history: {
    type: 'hash',
  },
  locale: {
    default: 'en-US',
    antd: true,
  },
  routes,
  proxy: proxy.dev,
});

app.ts 内容如下

import React from 'react';

export const rootContainer = (container: JSX.Element) => {
  return <React.StrictMode>{container}</React.StrictMode>;
};
xierenyuan commented 2 years ago

@xierenyuan 可以再请教一个问题吗 在已有的umi3项目中「使用umi3 & @umijs/preset-react」 升级umi4「移除umi3 & @umijs/preset-react, 并且安装@umijs/max, 参考改步骤操作https://umijs.org/docs/introduce/upgrade-to-umi-4 」的时候,修改配置如下, 会产生相同的1楼复现流程的报错

公司项目, 没发上传到仓库, 只能发一下配置了

export default defineConfig({
  antd: {},
  access: {},
  model: {},
  initialState: {},
  request: {},
  history: {
    type: 'hash',
  },
  locale: {
    default: 'en-US',
    antd: true,
  },
  routes,
  proxy: proxy.dev,
});

app.ts 内容如下

import React from 'react';

export const rootContainer = (container: JSX.Element) => {
  return <React.StrictMode>{container}</React.StrictMode>;
};

提供一下 package.json

PassionPI commented 2 years ago

@xierenyuan 可以再请教一个问题吗 在已有的umi3项目中「使用umi3 & @umijs/preset-react」 升级umi4「移除umi3 & @umijs/preset-react, 并且安装@umijs/max, 参考改步骤操作https://umijs.org/docs/introduce/upgrade-to-umi-4 」的时候,修改配置如下, 会产生相同的1楼复现流程的报错 公司项目, 没发上传到仓库, 只能发一下配置了

export default defineConfig({
  antd: {},
  access: {},
  model: {},
  initialState: {},
  request: {},
  history: {
    type: 'hash',
  },
  locale: {
    default: 'en-US',
    antd: true,
  },
  routes,
  proxy: proxy.dev,
});

app.ts 内容如下

import React from 'react';

export const rootContainer = (container: JSX.Element) => {
  return <React.StrictMode>{container}</React.StrictMode>;
};

提供一下 package.json

{
  "name": "ant-design-pro",
  "version": "4.5.0",
  "private": true,
  "description": "An out-of-box UI solution for enterprise applications",
  "scripts": {
    "analyze": "cross-env ANALYZE=1 max build",
    "build": "max build",
    "deploy": "npm run site && npm run gh-pages",
    "dev": "npm run start:dev",
    "fetch:blocks": "pro fetch-blocks && npm run prettier",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "max setup",
    "lint": "max setup && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "precommit": "lint-staged",
    "prettier": "prettier -c --write \"src/**/*\"",
    "start": "cross-env UMI_ENV=dev max dev",
    "start:ui": "cross-env UMI_ENV=dev UMI=1 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:no-ui": "cross-env UMI_UI=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",
    "pretest": "node ./tests/beforeTest",
    "test": "max test",
    "test:all": "node ./tests/run-tests.js",
    "test:component": "max test ./src/components",
    "tsc": "tsc --noEmit"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn run lint-staged"
    }
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "yarn run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write",
      "git add"
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "dependencies": {
    "@ant-design/charts": "^1.1.1",
    "@ant-design/icons": "^4.0.0",
    "@ant-design/pro-card": "^1.18.20",
    "@ant-design/pro-descriptions": "^1.10.51",
    "@ant-design/pro-form": "^1.3.0",
    "@ant-design/pro-layout": "^6.9.0",
    "@ant-design/pro-table": "^2.17.0",
    "@axihe/snowflake": "^1.0.2",
    "@reduxjs/toolkit": "^1.8.2",
    "@umijs/max": "^4.0.0",
    "@umijs/route-utils": "^1.0.33",
    "ace-builds": "^1.4.12",
    "antd": "^4.18.0",
    "brace": "^0.11.1",
    "classnames": "^2.2.6",
    "color-hash": "^2.0.1",
    "common-tags": "^1.8.0",
    "echarts": "^5.1.0",
    "echarts-for-react": "^3.0.1",
    "immer": "^9.0.6",
    "lodash": "^4.17.11",
    "moment": "^2.25.3",
    "moment-timezone": "^0.5.33",
    "nanoid": "^3.1.22",
    "omit.js": "^2.0.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.0",
    "react-ace": "^9.4.0",
    "react-cookie": "^4.0.3",
    "react-dom": "^17.0.0",
    "react-helmet-async": "^1.0.4",
    "react-json-pretty": "^2.2.0",
    "react-json-tree": "^0.15.0",
    "react-json-view": "^1.21.3",
    "react-live-clock": "^5.1.0",
    "react-moment": "^1.1.1",
    "react-redux": "^8.0.2",
    "umi-request": "^1.0.8"
  },
  "devDependencies": {
    "@ant-design/pro-cli": "^1.0.28",
    "@types/classnames": "^2.2.7",
    "@types/express": "^4.17.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^26.0.0",
    "@types/lodash": "^4.14.144",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "@umijs/fabric": "^2.5.1",
    "@umijs/yorkie": "^2.0.3",
    "carlo": "^0.9.46",
    "chalk": "^4.0.0",
    "cross-env": "^7.0.0",
    "cross-port-killer": "^1.1.1",
    "detect-installer": "^1.0.1",
    "enzyme": "^3.11.0",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-airbnb-typescript": "^15.0.0",
    "eslint-plugin-import": "^2.25.2",
    "express": "^4.17.1",
    "gh-pages": "^3.0.0",
    "husky": "^5.2.0",
    "jsdom-global": "^3.0.2",
    "lint-staged": "^10.5.4",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^2.0.1",
    "puppeteer-core": "^8.0.0",
    "stylelint": "^13.0.0",
    "typescript": "^4.0.3"
  },
  "engines": {
    "node": ">=10.0.0"
  },
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.ts*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ]
}