How to Solve Import antd Error: Module build failed

1. Create a project using the create-react-app tool

1
create-react-app antd-demo

2. Install babel-plugin-import

1
npm install babel-plugin-import --dev

3. Quote antd on demand

Introduced in App.js,

1
import { Button } from 'antd';

Configure babel in package.json

1
2
3
4
5
6
7
8
9
10
11
"babel": {
   "plugins": [
     [
       "import",
       {
         "libraryName""antd",
         "style"true
       }
     ]
   ]
 },

Finally, an error was reported when the project started, and the error message is as follows

1
2
3
4
5
6
7
8
./node_modules/antd/lib/button/style/index.less
Module build failed:
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      in E:\webstrom\migu\ngoc\web\react-interface\react-interface-cli\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)

Finally put “style”: “css” on it

The style here can be true or’css’, but I don’t know why I use true and I get an error.

babel-plugin-import configuration, options can be an array

1
2
3
  "plugins":[["import",options]] 
}

Import the js module:

1
["import", { "libraryName""antd" }]

Import js and css modules (LESS/Sass source files):

1
["import", { "libraryName""antd""style"true }]

Import js and css modules (css built-in files):

1
["import", { "libraryName""antd""style""css" }] 

Read More:

Leave a Reply

Your email address will not be published. Required fields are marked *