react 項目中antd加載的坑：.bezierEasingMixin();

周日本要加班趕趕進度，奈何家裡電腦環境出現了問題，竟然使我一點需求未寫。那就記錄下.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 [email protected] --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
                  }
              }
            }
        }
    ]
}
           

結束語