babel-plugin-import配置babel按需引入antd模块，编译后报错.bezierEasingMixin()

分手后的思念是犯贱 2023-06-06 08:17 176阅读 0赞

用create-react-app做项目的时候，同时引入了antd，为了实现按需加载antd模块，用到他们提供的  [babel-plugin-import ][babel-plugin-import]  （ 一个用于按需加载组件代码和样式的 babel 插件）

虽然项目一开始是用create-react-app创建，但是之后有 yarn run eject，将所有内建的配置暴露出来，这样可以自由重新配置webpack，至于为什么要这样，是因为目前create-react-app初始化的项目

并不支持less文件，但是它已经把webpack的一些基础配置也封装起来了。而antd是基于less开发的，为了更灵活地使用antd甚至是改动一下antd中的less源码，很有必要重新配置一下webpack.

yarn run eject之后，为了实现按需加载，我重新配置了webpack.config.dev.js 当然webpack.config.prod.js也一样

其实只是一个简单的改动：在babel-loader之前插入了一段简单的配置。如下

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

1           // Process JS with Babel.
     2           {
     3             test: /\.(js|jsx|mjs)$/,
     4             include: paths.appSrc,
     5             loader: require.resolve('babel-loader'),
     6             options: {
     7               plugins:[
     8                   ['import',{libraryName:'antd', style:true}]
     9               ],
    10               // This is a feature of `babel-loader` for webpack (not Babel itself).
    11               // It enables caching results in ./node_modules/.cache/babel-loader/
    12               // directory for faster rebuilds.
    13               cacheDirectory: true,
    14             },
    15           },

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

然后 yarn run start   编译完成后  发现报错了。错误如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>Failed to compile</code> <code>./node_modules/antd/lib/button/style/index.less</code> <code>Module build failed:</code> &nbsp; <code>// https://github.com/ant-design/ant-motion/issues/44&nbsp;</code> <code>.bezierEasingMixin();</code> <code>^</code> <code>Inline JavaScript is not enabled. Is it set&nbsp;</code><code>in</code>&nbsp;<code>your options?</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>in</code>&nbsp;<code>C:\Users\HP\Desktop\react-antD\react-antd\node_modules\antd\lib\style\color\bezierEasing.less (line 110, column 0)</code> <code>This error occurred during the build time and cannot be dismissed.</code> </td> 
 </tr> 
 </tbody> 
</table>

如何解决这个问题呢？报错信息给了一个链接  [https://github.com/ant-design/ant-motion/issues/44][https_github.com_ant-design_ant-motion_issues_44]

于是打开项目package.json发现less版本是^3.0.4

目前来看，解决方案：将less版本降到3.0以下 比如安装 2.7.3版本。

两种方式：

1.yarn add less@^2.7.3

2.打开项目的package.json 找到dependencies下面的less 将其版本改为  "2.7.3"   然后 yarn install

[babel-plugin-import]: https://github.com/ant-design/babel-plugin-import
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230601/eaefb0a7d0de432e8e11b91a5952ea1b.png
[https_github.com_ant-design_ant-motion_issues_44]: https://github.com/ant-design/ant-motion/issues/44