The company’s project was launched, and the middle stage was built with Ant Design Pro. I encountered some problems when I proposed to be compatible with IE11. First umi officials seem to write about the target configuration in the config the targets: {ie: 11,}, plus running after this configuration, or an error under IE11: unknown character, reason is IE11 does not support the template string. At this time, the config also needs to add:

{...targets: { ie: 11 },  
    esbuild: { target: 'es5'}},Copy the code

The page was loaded asynchronously, and the application ran normally without any error. After the route jumped to the home page, the page containing ANTD Form could not be rendered (normal in Chrome). The loading of the page was always displayed, and the console did not output any error. The first thought was a version problem. After several attempts, the following versions were fixed and worked properly in IE11: the reason is unknown… Also ask big guy to advise.

//package.json
"dependencies": {..."@ant-design/pro-form": "1.33.1"."@ant-design/pro-layout": "6.23.4"."@ant-design/pro-table": "2.47.1"."@umijs/route-utils": "1.0.37"."antd": "4.16.10"."react": "17.0.2"."umi": "3.5.18"
},
"devDependencies": {..."@babel/core": "7.4.5"."@umijs/fabric": "2.6.2"."@umijs/openapi": "1.1.19"."@umijs/plugin-blocks": 2.2.2 ""."@umijs/plugin-esbuild": "1.3.1"."@umijs/plugin-openapi": "1.3.0"."@umijs/preset-ant-design-pro": "1.3.3"."@umijs/preset-dumi": "1.1.24"."@umijs/preset-react": "1.8.22"."@umijs/yorkie": "At 2.0.5."
}
Copy the code

To share another problem encountered, an error was reported using splitChunks written on umi’s official website: Chunk of Vendors Not found Paste the splitChunks configuration from config:

{...chunks: ['vendors'.'umi'].chainWebpack: (config) = > {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all'.minSize: 30000.minChunks: 3.automaticNameDelimiter: '. '.cacheGroups: {
            vendor: {
              name: 'vendors'.test({ resource }) {
                return /[\\/]node_modules[\\/]/.test(resource);
              },
              priority: 10,},},},},},}); }}Copy the code

Json, such as the Query-String and moment libraries, which are automatically installed when antD and Ant Design Pro are installed. Vendors error extracting if it is introduced in the project code but not in the project’s package.json. Install swagger- uI-react library; use swagger- uI-react library.