Umi is the underlying front-end framework of Ant Financial, which has directly or indirectly served 600+ applications, including java, node, H5 wireless, Hybrid applications, pure front-end assets applications, CMS applications, and more.

$ umi -v --verbose

umi@2.0.0
darwin x64
node@v10.6.0
umi-build-dev@1.0.0
af-webpack@1.0.0
babel-preset-umi@1.0.0
umi-test@1.0.0
react@16.4.2 (/Users/chencheng/code/github.com/ant-design/ant-design-pro/node_modules/react)
react-dom@16.4.2 (/Users/chencheng/code/github.com/ant-design/ant-design-pro/node_modules/react-dom)
react-router@4.3.1 (/Users/chencheng/code/github.com/umijs/umi/packages/umi-build-dev/node_modules/react-router)
react-router-dom@4.3.1 (/Users/chencheng/code/github.com/ant-design/ant-design-pro/node_modules/react-router-dom)
dva@2.4.0 (/Users/chencheng/code/github.com/ant-design/ant-design-pro/node_modules/dva)
dva-loading@2.0.5
dva-immer@0.2.3
path-to-regexp@1.7.0

Install dependencies first,

$ yarn add @babel/polyfill

Then create a new src/global.js with the following contents:

import '@babel/polyfill';

The title can be dynamically modified via react-helmet.

Note: In a hybrid application, if you use react-helmet in the ios web container, you can try react-document-title.

E.g.

Upgrade the node version and make sure the version is 8.10 or greater.

E.g.

Check the babel configuration to remove unnecessary presets and plugins.

E.g.

Make sure you have package.json and have configured the name attribute.

E.g.

This is a problem with the webpack plugin, which does not affect the normal production of CSS files and can be ignored for now.

E.g.

You need to configure the NODE_PATH environment variable. If you use yarn, you can get the bin path by executing yarn global bin.

For example, I hope .svg not to produce base64, but to generate svg files, which can be configured like this:

export default {
  // Add exclude for url-loader
  urlLoaderExcludes: [/.svg$/],
  // Add loader
  chainWebpack(config) {
    config.module
      .rule('svg-with-file')
      .test(/.svg$/)
      .use('svg-with-file-loader')
      .loader('file-loader');
  },
};

umi use css modules by default, please write your css as css modules.

Ref:

• css-modules/css-modules
• CSS Modules usage tutorial

Modify .umirc.js:

{
  "disableCSSModules": true
}

However, it is not recommended to turn off css modules for no particular reason.

Install additional dependencies first,

$ npm i node-sass sass-loader --save

Then modify .umirc.js:

{
  "sass": {}
}

Make sure node version is above 8.10 and then execute:

$ node --inspect-brk ./node_modules/.bin/umi test

Then open chrome://inspect/#devices in the browser for inspect and breakpoints.

Several options are available:

• Use hashHistory instead of history: 'hash' in.umirc.js`
• Static, with exportStatic: true in .umirc.js
• The server configures the route fallback to index.html

It may be that the picture is not correctly quoted. You can refer to the code and import the picture correctly.

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file to use this image

console.log(logo); // logo.84287d09.png

function header() {
  // import image
  return <img src={logo} alt="Logo" />;
}

export default Header;

Use in css, be careful not to use absolute paths

.Logo {
  background-image: url(./logo.png);
}

Note: base64 will be taken when the image size is less than 10 k. That is, it will not be copied to the public folder, but will be stored as a base64 resource.

Why: umiJS SSR executes code first server-side, then client-side. The document, navigator object is only present client-side. Solution:

1. you absolutely need to have access to it in some React component, you should put that code in componentDidMount or useEffect. This lifecycle method will only be executed on the client.
2. add the judgment with something like typeof navigator !== 'undefined' or typeof document !== 'undefined'

Umi UI requires umi@2.9 or above, and this error will be reported if the version of the local project does not match.

The solution is to upgrade to the latest version.

• If the umi dependency in package.json is automatically matched to the latest version, such as ^ 2.9 or 2.x, delete the node_modules reload dependency.
• If the umi dependency in package.json does not match the latest version, such as ~2.8 or 2.8.0-beta.1, then it needs to be changed to ^ 2.9 or other matching to the latest version, then Remove node_modules and reload dependencies

Umi UI needs to have permission to create projects.

The solution is to raise the prompted path permissions and give execute permissions.。