携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

周日本要加班赶赶进度，奈何家里电脑环境出现了问题，竟然使我一点需求未写。那就记录下.bezierEasingMixin();问题帮大家避坑。

问题表现

".bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options?"
上面这句话是终端输出，提示意思要配置javaScript enabled，但是哪里配置？如何配置？也是一脸懵圈。

问题原因

经过网上查询得知，.bezierEasingMixin();这个问题，主要是因为webpack从3升级到4，造成的与less版本不兼容。所以选择正确的版本应该就能解决，可问题是我们根本没法知道它到底和那个less版本兼容。另一个原因是antd的动态引入也会引起上述问题。

解决方式

知道引起的原因，找解决方法就简单了很多。你也可以先想下，再往下读。
法一：就是降低webpack到3，这就使的升级问题消失了，但由于项目刚刚升级到4，从技术角度也应该升级到4，不应该因为一个问题的出现而放弃了webpack4带来的性能提升。法二：就是降低less版本，虽然我们不知道less真正能与之适配的版本，但是可以给他降低到一个很低版本就可以了。这里建议大家使用，3.0以下版本。法三：就issue提示，结合社区方案，我们可以通过修改less-loader的配置。加上javascriptEnabled: true；这样也就行了。法四：由于我这次是在react项目中遇到的，并且项目中使用了craco。那么就可以通过安装craco-less然后在craco.config.js文件中配置javascriptEnabled：true;法五：降低node到12.18.3,这里能够解决的原因我也不清楚，但是解决后项目出现了其他问题。这个方法给出来，只是提醒大家可能是node版本问题，但不建议使用这个。前面四个中选择即可。

实战

法二操作过程如下：

   终端> npm uninstall less-loader //卸载当前less-loader
   终端> npm install less-loader@2.7.6 --save

法三配置如下：

 css: {
    loaderOptions: {
        less: {
            javascriptEnabled: true // 该解决方案核心配置
        }
    }
  }

法四配置过程如下：

终端> npm i craco-less //安装craco-less依赖

// 以下在craco.confige.js中
const CracoLessPlugin = require('craco-less')；

module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
              lessLoaderOptions: {
                  lessOptions: {
                      javascriptEnabled: true
                  }
              }
            }
        }
    ]
}

结束语

计划总是赶不上变化，本想加班赶进度，竟然又是踩坑的一天。人生百态需要笑对，愿明天的坑都被今天趟平，今天过后一帆风顺、一马平川、好运连绵。关注+点赞+收藏。谢谢大家🙏

顺境中的好运，为人们所希冀；逆境中的好运，则为人们所惊奇。