Learn react practice antdUI framework in creating a project encountered some problems, here to make a record, if you feel helpful remember to click on the attention add favorites thank you

Create a project

yarn create react-app antd-demo

Installing the UI Framework

yarn add antd

Install on demand to introduce + custom theme dependencies

yarn add react-app-rewired customize-cra babel-plugin-import less less-loader

Modify the package. The json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
Copy the code

Create config-overrides. Js in the root directory

/ / concrete rules of the modified configuration const {override, fixBabelImports addLessLoader} = the require (' customize - cra); module.exports = override( fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ lessOptions:{ javascriptEnabled: true, modifyVars: { '@primary-color': 'green' }, } }), );Copy the code

Note: there is no need to introduce styles in the component itself, i.e. import ‘antd/dist/antd. CSS ‘should be deleted

unexpected

The following errors may occur during project startup

TypeError: this.getOptions is not a function

Cause: The version of less-loader installed is too high. Solution: 1. Yarn uninstall less-loader 2. Yarn add [email protected]

Inline JavaScript is not enabled. Is it set in your options?

Error analysis

From the above error message, we can deduce the key point of the error: The error message shows that the error occurred in the mixin part compilation of less. Inline JavaScript is not enabled. Is it set in your options? . In fact, if you are familiar with less, you can know the mixin implementation of less. This is actually a less style of inputitem in the ANTD-Mobile package that uses a parameterized mixin. If mixin is used, javascriptEnabled: true must be configured in the less-loader.

Solution For projects using create-React-app there is no way to modify webpack.config.js directly either you use eject ‘catapult’ but this is not recommended. Another solution we use is react-app-rewired. Using react-app-rewired requires adding the configuration of less to config-overrides. Add less configuration you can add react-app-rewire-less and javascriptEnabled: true in config

conclusion

When creating a project, if yarn install plug-in, always use this command, do not use YARN and then use NPM or CNPM command, this will cause some strange problems, I personally tested, if you think it is helpful to remember to click the following and favorites, thank you