search

umijs / umi

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

[Bug] Config issue while upgrading umijs v3 to umijs v4 #11126

Closed Khadhiri786 closed 1 year ago

Khadhiri786 commented 1 year ago

What happens?

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

How To Reproduce

updated package.json "dependencies": { "@ant-design/compatible": "^5.1.1", "@ant-design/icons": "^4.6.3", "@ant-design/plots": "^1.2.5", "@ant-design/pro-components": "^2.3.49", "@ant-design/pro-layout": "^7.4.0", "@apollo/react-common": "^3.1.4", "@apollo/react-components": "^3.1.5", "@apollo/react-hooks": "^3.1.5", "@dnd-kit/core": "^5.0.3", "@dnd-kit/modifiers": "^5.0.0", "@dnd-kit/sortable": "^6.0.1", "@dnd-kit/utilities": "^3.1.0", "antd": "^5.2.3", "apollo-boost": "^0.4.9", "apollo-client": "^2.6.10", "apollo-link-persisted-queries": "^0.2.2", "babel-plugin-add-react-displayname": "0.0.5", "babel-plugin-import": "^1.13.5", "babel-preset-react-app": "^10.0.1", "bootstrap": "^4.5.3", "chance": "^1.1.8", "classnames": "^2.3.1", "clevertap-web-sdk": "^1.3.5", "color": "^4.0.2", "color-hash": "^2.0.1", "crypto-js": "^4.1.1", "dayjs": "^1.10.7", "deep-diff": "^1.0.2", "esm": "^3.2.25", "exceljs": "^4.2.0", "fast-json-patch": "^3.1.1", "file-saver": "^2.0.5", "graphql": "^14.6.0", "graphql-codegen-persisted-query-ids": "^0.1.2", "graphql-tag": "^2.12.6", "jwt-decode": "~3.1.2", "legend-symbol": "github:orangemug/legend-symbol#v0.2.2", "less-loader": "~10.0.1", "lodash": "^4.17.21", "mapbox-gl": "^1.10.1", "mapbox-gl-draw-rectangle-mode": "^1.0.4", "moengage": "^0.1.3", "moment": "^2.29.3", "path-to-regexp": "^6.2.1", "prop-types": "^15.7.2", "qrcode.react": "^1.0.1", "react": "^18.2.0", "react-apollo": "^3.1.5", "react-aria-menubutton": "^7.0.3", "react-awesome-query-builder": "^5.4.0", "react-collapse": "^5.1.1", "react-color": "~2.19.3", "react-dom": "^16.14.0", "react-router": "^5.2.1", "react-slick": "~0.28.1", "react-sortable-hoc": "^2.0.0", "react-virtualized": "^9.22.3", "react-virtualized-auto-sizer": "^1.0.15", "react-window": "^1.8.9", "slick-carousel": "^1.8.1", "use-debounce": "^7.0.1", "uuid": "^8.3.2", "wellknown": "^0.5.0", }, config.ts `// @ts-nocheck import type { IConfig } from 'umi'; import { defineConfig, utils } from 'umi'; import defaultSettings from './defaultSettings'; import routes from './routes';

const { winPath } = utils; const { primaryColor, defaultFontFamily } = defaultSettings; const NODE_ENV = process.env.NODE_ENV || 'development';

let MFSU_ENABLED = process.env.MFSU_ENABLED; let UMI_DEVTOOL = process.env.UMI_DEVTOOL; if (process.env.UMI_FAST_MODE) { MFSU_ENABLED = true; UMI_DEVTOOL = 'eval'; }

const config: IConfig = defineConfig({ ...(MFSU_ENABLED ? { mfsu: {}, } : {}), antd: {}, fastRefresh: true, targets: { chrome: '91', firefox: '90', safari: '14', edge: '91', ios: '14.0', }, dva: {}, locale: { antd: true, default: 'en-US', baseNavigator: true, }, hash: true, dynamicImport: { loading: '@/components/PageLoading/index', }, nodeModulesTransform: { type: 'none', }, chainWebpack(config) { config.output.publicPath(${process.env.DEPLOY_URL || ''}/); config.module.rule('mjs-rule').test(/.m?js/).resolve.set('fullySpecified', false);

config.merge({
  // Should be supported in https://github.com/umijs/umi/pull/7043
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 3,
      automaticNameDelimiter: '.',
      cacheGroups: {
        '@turf/turf': {
          name: 'turfjs',
          test({ resource }) {
            return /[\\/]node_modules[\\/]@turf[\\/]turf[\\/]/.test(resource);
          },
          priority: 30,
        },
        mapboxgl: {
          name: 'mapboxgl',
          test({ resource }) {
            return /[\\/]node_modules[\\/]mapbox-gl[\\/]/.test(resource);
          },
          priority: 30,
        },
        graphql: {
          name: 'graphql',
          test({ resource }) {
            return /[\\/]src[\\/]graphql.tsx/.test(resource);
          },
          priority: 30,
        },
      },
    },
  },
});

}, // TODO: Exclude source maps if production. devtool: NODE_ENV === 'production' ? false : UMI_DEVTOOL || 'source-map', extraBabelPlugins: [ 'add-react-displayname', [ 'import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }, 'antd', ], [ 'import', { libraryName: '@ant-design/icons', libraryDirectory: 'es/icons', camel2DashComponentName: false, }, '@ant-design/icons', ], [ 'import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false, }, 'lodash', ], ], routes: routes, // Theme for antd: https://ant.design/docs/react/customize-theme theme: { 'primary-color': primaryColor, 'success-color': '#03c89c', 'warning-color': '#f5a62f', 'error-color': '#f32d46', 'highlight-color': '#f32d46', 'font-family': defaultFontFamily, }, define: { // If you add a value here, add it in .eslintrc.js "globals" too. MAPBOX_ACCESS_TOKEN: process.env.MAPBOX_ACCESS_TOKEN, MAPTILER_ACCESS_TOKEN: process.env.MAPTILER_ACCESS_TOKEN, PROJECTAPI_URL: process.env.PROJECTAPI_URL, // Static files like SVGs are not under /v1, they are served at the root. PROJECTAPI_STATIC_FILES_URL: process.env.PROJECTAPI_URL?.replace(/\/v1$/, ''), ENVIRONMENT_LABEL: process.env.ENVIRONMENT_LABEL || 'unknown', IS_DEV: process.env.IS_DEV === '1', DEPLOY_URL: process.env.DEPLOY_URL || '/', CHANGELOG_URL: process.env.CHANGELOG_URL || '/', COMMIT_REF: process.env.COMMIT_REF || 'NOT_SETLOCALLY', }, ignoreMomentLocale: true, copy: [], lessLoader: { javascriptEnabled: true, }, cssLoader: { modules: { getLocalIdent: ( context: { resourcePath: string; }, : string, localName: string, ) => { if ( context.resourcePath.includes('node_modules') || context.resourcePath.includes('ant.design.pro.less') || context.resourcePath.includes('global.less') || context.resourcePath.includes('global.scss') ) { // This returns a value like 'ant-result-icon' or 'needsBootstrap'. // They don't need to be namespaced because these styles are // supposed to be global across the app. In other words, these // class names should work no matter which component or page // is using them. return localName; }

    const match = context.resourcePath.match(/src(.*)/);

    if (match && match[1]) {
      const projectPath = match[1].replace('.less', '');
      const arr = winPath(projectPath)
        .split('/')
        .map((a: string) => a.replace(/([A-Z])/g, '-$1'))
        .map((a: string) => a.toLowerCase());

      // For each React component, this function builds a unique class name.
      // The result is like 'antd-pro-pages-projects-project-settings-exportButton'
      // We do this so that styles defined as part of a component are local
      // to that component. TODO: Change antd-pro to project?
      const className = `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
      return className;
    }

    return localName;
  },
},

}, manifest: { basePath: '/', }, });

export default config; `

Context

github-actions[bot] commented 1 year ago

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

fz6m commented 1 year ago

package.json

Umi

- "umi": "^3",
+ "@umijs/max": "^4"

Other

{
  "@ant-design/compatible": "^5.1.1",
  "@ant-design/icons": "^4.6.3",
  "@ant-design/plots": "^1.2.5",
  "@ant-design/pro-components": "^2.3.49",
  "@ant-design/pro-layout": "^7.4.0",
  "@apollo/react-common": "^3.1.4",
  "@apollo/react-components": "^3.1.5",
  "@apollo/react-hooks": "^3.1.5",
  "@dnd-kit/core": "^5.0.3",
  "@dnd-kit/modifiers": "^5.0.0",
  "@dnd-kit/sortable": "^6.0.1",
  "@dnd-kit/utilities": "^3.1.0",
  "antd": "^5.2.3",
  "apollo-boost": "^0.4.9",
  "apollo-client": "^2.6.10",
  "apollo-link-persisted-queries": "^0.2.2",
  "babel-plugin-add-react-displayname": "0.0.5",
  "babel-plugin-import": "^1.13.5",
  "babel-preset-react-app": "^10.0.1",
  "bootstrap": "^4.5.3",
  "chance": "^1.1.8",
  "classnames": "^2.3.1",
  "clevertap-web-sdk": "^1.3.5",
  "color": "^4.0.2",
  "color-hash": "^2.0.1",
  "crypto-js": "^4.1.1",
  "dayjs": "^1.10.7",
  "deep-diff": "^1.0.2",
  "esm": "^3.2.25",
  "exceljs": "^4.2.0",
  "fast-json-patch": "^3.1.1",
  "file-saver": "^2.0.5",
  "graphql": "^14.6.0",
  "graphql-codegen-persisted-query-ids": "^0.1.2",
  "graphql-tag": "^2.12.6",
  "jwt-decode": "~3.1.2",
  "legend-symbol": "github:orangemug/legend-symbol#v0.2.2",
  "less-loader": "~10.0.1",
  "lodash": "^4.17.21",
  "mapbox-gl": "^1.10.1",
  "mapbox-gl-draw-rectangle-mode": "^1.0.4",
  "moengage": "^0.1.3",
  "moment": "^2.29.3",
  "path-to-regexp": "^6.2.1",
  "prop-types": "^15.7.2",
  "qrcode.react": "^1.0.1",
  "react": "^18.2.0",
  "react-apollo": "^3.1.5",
  "react-aria-menubutton": "^7.0.3",
  "react-awesome-query-builder": "^5.4.0",
  "react-collapse": "^5.1.1",
  "react-color": "~2.19.3",
- "react-dom": "^16.14.0",
+ "react-dom": "^18",
- "react-router": "^5.2.1",
  "react-slick": "~0.28.1",
  "react-sortable-hoc": "^2.0.0",
  "react-virtualized": "^9.22.3",
  "react-virtualized-auto-sizer": "^1.0.15",
  "react-window": "^1.8.9",
  "slick-carousel": "^1.8.1",
  "use-debounce": "^7.0.1",
  "uuid": "^8.3.2",
  "wellknown": "^0.5.0"
}

Config

-   fastRefresh: true,

- targets: {
-   chrome: '91',
-   firefox: '90',
-   safari: '14',
-   edge: '91',
-   ios: '14.0',
- },
+ targets: { chrome: 91, firefox: 90, safari: 14 }

- dynamicImport: {
     // move to `src/loading.tsx`
-   loading: '@/components/PageLoading/index',
- },

- nodeModulesTransform: {
-   type: 'none',
- },

+ publicPath: `${process.env.DEPLOY_URL || ''}/`

// remove all `chainWebpack`
- chainWebpack()

- ignoreMomentLocale: true,
- copy: [],
- lessLoader: {
-   javascriptEnabled: true,
- },

- cssLoader
- manifest

Compatible with react router v5 :

+ reactRouter5Compat: {}
+ historyWithQuery: {}

Update routes config

See https://umijs.org/docs/guides/routes

Update layout file

See https://umijs.org/docs/introduce/upgrade-to-umi-4

Khadhiri786 commented 1 year ago

@fz6m I have updated config.ts, but still I getting issue image

`// @ts-nocheck import type { IConfig } from 'umi'; import { defineConfig, utils } from 'umi'; import defaultSettings from './defaultSettings'; import routes from './routes';

const { winPath } = utils; const { primaryColor, defaultFontFamily } = defaultSettings; const NODE_ENV = process.env.NODE_ENV || 'development';

let MFSU_ENABLED = process.env.MFSU_ENABLED; let UMI_DEVTOOL = process.env.UMI_DEVTOOL; if (process.env.UMI_FAST_MODE) { MFSU_ENABLED = true; UMI_DEVTOOL = 'eval'; }

const config: IConfig = defineConfig({ ...(MFSU_ENABLED ? { mfsu: {}, } : {}), antd: {}, targets: { chrome: 91, firefox: 90, safari: 14 }, publicPath: ${process.env.DEPLOY_URL || ''}/ dva: {}, locale: { antd: true, default: 'en-US', baseNavigator: true, }, hash: true, dynamicImport: { loading: '@/components/PageLoading/index', }, // TODO: Exclude source maps if production. devtool: NODE_ENV === 'production' ? false : UMI_DEVTOOL || 'source-map', extraBabelPlugins: [ 'add-react-displayname', [ 'import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }, 'antd', ], [ 'import', { libraryName: '@ant-design/icons', libraryDirectory: 'es/icons', camel2DashComponentName: false, }, '@ant-design/icons', ], [ 'import', { libraryName: 'lodash', libraryDirectory: '', camel2DashComponentName: false, }, 'lodash', ], ], routes: routes, // Theme for antd: https://ant.design/docs/react/customize-theme theme: { 'primary-color': primaryColor, 'success-color': '#03c89c', 'warning-color': '#f5a62f', 'error-color': '#f32d46', 'highlight-color': '#f32d46', 'font-family': defaultFontFamily, }, define: { // If you add a value here, add it in .eslintrc.js "globals" too. MAPBOX_ACCESS_TOKEN: process.env.MAPBOX_ACCESS_TOKEN, MAPTILER_ACCESS_TOKEN: process.env.MAPTILER_ACCESS_TOKEN, PRODUCTAPI_URL: process.env.PRODUCTAPI_URL, // Static files like SVGs are not under /v1, they are served at the root. PRODUCTAPI_STATIC_FILES_URL: process.env.PRODUCTAPI_URL?.replace(/\/v1$/, ''), ENVIRONMENT_LABEL: process.env.ENVIRONMENT_LABEL || 'unknown', IS_DEV: process.env.IS_DEV === '1', DEPLOY_URL: process.env.DEPLOY_URL || '/', CHANGELOG_URL: process.env.CHANGELOG_URL || '/', COMMIT_REF: process.env.COMMIT_REF || 'NOT_SET_LOCALLY', }, });

export default config; package.json "dependencies": { "@ant-design/compatible": "^5.1.1", "@ant-design/icons": "^4.6.3", "@ant-design/plots": "^1.2.5", "@ant-design/pro-components": "^2.3.49", "@ant-design/pro-layout": "^7.4.0", "@apollo/react-common": "^3.1.4", "@apollo/react-components": "^3.1.5", "@apollo/react-hooks": "^3.1.5", "@dnd-kit/core": "^5.0.3", "@dnd-kit/modifiers": "^5.0.0", "@dnd-kit/sortable": "^6.0.1", "@dnd-kit/utilities": "^3.1.0", "@mapbox/mapbox-gl-draw": "^1.3.0", "@mapbox/mapbox-gl-draw-static-mode": "^1.0.1", "@mdi/js": "^6.6.96", "@react-awesome-query-builder/antd": "6.1.0", "@react-pdf/renderer": "~1.6.17", "@turf/helpers": "^6.5.0", "@turf/turf": "^6.5.0", "@types/mapbox__mapbox-gl-draw": "^1.2.3", "@umijs/max": "^4.0.67", "@welldone-software/why-did-you-render": "^6.2.3", "antd": "^5.2.3", "apollo-boost": "^0.4.9", "apollo-client": "^2.6.10", "apollo-link-persisted-queries": "^0.2.2", "babel-plugin-add-react-displayname": "0.0.5", "babel-plugin-import": "^1.13.5", "babel-preset-react-app": "^10.0.1", "bootstrap": "^4.5.3", "chance": "^1.1.8", "classnames": "^2.3.1", "clevertap-web-sdk": "^1.3.5", "color": "^4.0.2", "color-hash": "^2.0.1", "crypto-js": "^4.1.1", "dayjs": "^1.10.7", "deep-diff": "^1.0.2", "esm": "^3.2.25", "exceljs": "^4.2.0", "fast-json-patch": "^3.1.1", "file-saver": "^2.0.5", "graphql": "^14.6.0", "graphql-codegen-persisted-query-ids": "^0.1.2", "graphql-tag": "^2.12.6", "jwt-decode": "~3.1.2", "legend-symbol": "github:orangemug/legend-symbol#v0.2.2", "less-loader": "~10.0.1", "lodash": "^4.17.21", "mapbox-gl": "^1.10.1", "mapbox-gl-draw-rectangle-mode": "^1.0.4", "prop-types": "^15.7.2", "react": "^18.2.0", "react-apollo": "^3.1.5", "react-aria-menubutton": "^7.0.3", "react-awesome-query-builder": "^5.4.0", "react-collapse": "^5.1.1", "react-color": "~2.19.3", "react-dom": "^18", "react-flip-move": "^3.0.4", "react-helmet": "^6.0.0", "react-map-gl": "5.2.10", "react-map-gl-draw": "^0.21.1", "react-markdown": "^7.0.1", "react-measure": "^2.3.0", "react-resizable": "^3.0.4", "react-slick": "~0.28.1", "react-sortable-hoc": "^2.0.0", "react-virtualized": "^9.22.3", "react-virtualized-auto-sizer": "^1.0.15", "react-window": "^1.8.9", "slick-carousel": "^1.8.1", "use-debounce": "^7.0.1", "uuid": "^8.3.2", "wellknown": "^0.5.0", }, `

muneeb-ahmad-pikessoft commented 1 year ago

@Khadhiri786 did you upgrade successfully? If yes then please share the steps. I would appreciate the effort. Thanks