模版代码下载下来导入到dva搭建的项目里面，启动时报错(npm start)

[Liuqing650]

你好，我下载的Home项目引入到项目工程里面，为了方便，我全部放到了components下面，引入和基本流程没有问题。在家里的win10上面启动没有报错，在win7上面启动就报错了，错误原因：
in ./src/components/Index/less/antMotion_style.less
Module build failed: ModuleBuildError: Module build failed: JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'
@ F:\Web\mabyloveProjects\mabylove\weblove\node_modules.2.6.0@antd\lib\button\style\index.less (line 11, column 2)
near lines:
.btn;
.btn-default;

at DependenciesBlock.onModuleBuildFailed (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:315:19)
at nextLoader (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:270:31)
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:292:15
at context.callback (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.0.6.9@webpack-core\lib\NormalModuleMixin.js:148:14)
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.2.3@less-loader\index.js:68:16
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\render.js:33:38
at F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\parse.js:63:17
at Object.finish [as _finish] (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\parser\parser.js:183:28)
at Object.ImportVisitor._onSequencerEmpty (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\visitors\import-visitor.js:35:14)
at ImportSequencer.tryRun (F:\Web\mabyloveProjects\mabylove\weblove\node_modules\.2.6.1@less\lib\less\visitors\import-sequencer.js:50:14)

@ ./src/components/Index/index.jsx 57:0-38

便于清晰的认识到：我特意截了图：
构建组件的时候，在index.jsx中出现错误：(其实就是antMotion_style.less样式报错)

接着就是错误的位置啦

接上一个的错误的具体位置

希望给一个解决方法。谢谢

[Liuqing650]

在antMotion_style.less去掉了@import './ant-d.less';样式的引入，需要用到样式的地方可以修改成
import {Button,Icon,} from 'antd';
就基本解决了问题

[jljsj33]

https://ant.design/docs/react/customize-theme-cn#1)-package.theme（推荐）
额，，，定置主题我用的是第二种方法，，，如果报错，你可以尝试下第一种方法

[Liuqing650]

好主意！！

[jljsj33]

把文件包发我邮箱。。。我看看第二种定制具体啥问题。。。

[afc163]

多了一层 import 会导致 less 编译的顺序发生变化，很奇怪的问题，还需要再深入看看。目前 ant-d.less 可以先改成这样来解决：

+ @import "~antd/lib/style/themes/default.less";
  @import "custom.less";   // 把 custom.less 里的 import default.less 这句拿到上面去
  @import "~antd/lib/style/core/index.less";

[jljsj33]

恩。。。我把定制皮服整成推荐那个吧。。。免得又出问题

[zhaoyu69]

Jimdo/typings-for-css-modules-loader#63
错误引导到这个issue，但是好像又不是这个问题
帮忙看下什么问题，谢谢啦

[jljsj33]

@zhaoyu69 参考这个 ant-design/ant-design#7927 (comment)

[youngluo]

暂时将less版本降到3.0以下

[hsz]

As @youngluo mentioned - downgrading less to lower than 3.0 fixes this issue.

[lanmingle]

我所遇到的错误是：

// #44
.bezierEasingMixin();

我使用的是 TS 方式：目前这个配置可以解决，希望能帮忙遇到同样问题。

/* config-overrides.js */

const tsImportPluginFactory = require('ts-import-plugin');
const { getLoader } = require("react-app-rewired");
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {

    const tsLoader = getLoader(
        config.module.rules,
        rule =>
            rule.loader &&
            typeof rule.loader === 'string' &&
            rule.loader.includes('ts-loader')
    );

    tsLoader.options = {
        getCustomTransformers: () => ({
            before: [
                tsImportPluginFactory({
                    libraryDirectory: 'es',
                    libraryName: 'antd',
                    style: true,
                }),
            ],
        })
    };

    config = rewireLess.withLoaderOptions({
        javascriptEnabled: true,
        // modifyVars: { "@primary-color": "#1DA57A" },
    })(config, env);

    return config;

};

[lzr900515]

@zhaoyu69 有可能是less的问题， "less": "^2.7.3", "less-loader": "^4.1.0", 把less版本降到3.0以下，我这边就没问题了。

[family2hu]

但是webpack4要求less要升级，不能在2.x~

[oopsguy]

开启 JavaScript 就可以了

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true
  }
}

[wdwlbsmlw]

@oopsguy 你这个办法是最简单的，谢谢分享。

[xubiaosunny]

@oopsguy 配置在那个位置？

[LJH95224]

在electron-vue中，使用脚手架生成之后，修改了options，仍然还是报之前的错误，修改less版本之后，custom也报错

[chb-cn]

@lanmingle 十分感谢，您的办法有效。没想到跟着官网做居然有bug，可能是yarn创建项目时有问题吧，反正执行create-react-app my-project --scripts-version=react-scripts-ts-antd时给我报了好多警告，说什么window32位不兼容还是什么的。。。我的本子应该是64位的啊。。。

[yanhaijing]

@afc163 less4已经不支持less中嵌入js了，现在只能降级成less3 才能避免这个报错
colorPalette 新的less对自定义函数的支持，需要改写成插件，不过更建议用postcss来实现类似功能
https://github.com/ant-design/ant-design/blob/master/components/style/color/colorPalette.less

参考：https://stackoverflow.com/questions/58343406/how-to-replace-the-deprecated-javascriptenabled-option-in-less-loader-with-a-new

[redeom]

  css: {
    requireModuleExtension: false, 
    loaderOptions: {
      less: {
        javascriptEnabled: true,
        lessOptions: {
          globalVars: {
            primary: '#333'
          },
          javascriptEnabled: true
        }
      }
    }

[Marchccc]

laravel-mix:

mix.js('resources/js/app.js', 'public/js')
    .react()
    .webpackConfig({
        module: { rules: [{
            test: /\.less$/,
            use: [
                {
                    loader: "less-loader",
                    options: {
                        lessOptions: {
                            javascriptEnabled: true,
                        }
                    }
                }
            ]
        }]}
    })
    .sass('resources/sass/app.scss', 'public/css', [
    ]);

[dongcer]

开启 JavaScript 就可以了

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true
  }
}

np这个方法完美

[xuek9900]

开启 JavaScript 就可以了

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true
  }
}

vite 里遇到一样的问题，被你一语道破。

[cristichiru]

If using nuxt3 with Vite:

1. Do not install less-loader, as Vite will load less by itself.
2. Set in vite.config.ts:

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          white: '#333',
          'component-background': '#777',
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px',
        },
        javascriptEnabled: true,
      },
    }
  }
})

Ref: vitejs/vite#332

[K-Artisan]

Vue CLI v5.0.1

// package.json
"dependencies": {
    "ant-design-vue": "2.2.8",
     ...
    "vue": "^3.2.13",
  },
  "devDependencies": {
    ...
    "less": "^4.0.0",
    "less-loader": "^8.0.0",

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
        less: {
           // javascriptEnabled: true // old solution
           // HERE is the difference!
            lessOptions: {
                javascriptEnabled: true
            }
        }
    }
  }
})

It's work!

[duxard]

Hi team, I bumped into the same problem and wasn't able to resolve it. I'm using storybook tool in my project and this is my configuration for it (pls pay attention to less-loader):

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                javascriptEnabled: true
              },
            },
          },
        ],
      },
    ],
  },
}

However, when I'm trying to compile the project (npm run storybook) that ERROR comes up again and again:

.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

[email protected]
[email protected]

Any ideas on that?..

[lscgzwd]

The same, I have spent three hours on it, did not solved.
Try to comment out that check logic in node_modules, have no effect

[duxard]

@ Iscgzwd
looks kike the problem goes away if you use angular @13 & Ng-Zorro @13

After some experimenting I had come to conclusion that it did not work with @11 versions of libraries.

[freeliujian]

开启 JavaScript 就可以了

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true
  }
}

good job~!!!!!!!

[Kidoi]

I use vite to set up my program, try to change the theme color but found Inline JavaScript is not enabled. Is it set in your options?.
Then found this issue but it didnt work with the solution javascriptEnabled: true. Even try to shift the version of the less but still didnt work.
...

Finally, I found that I hadnt open the setting of the importStyle of the unplugin-vue-components.
Hope this comment would help someone. Just dont be stuck in this problem for 3 hours like me!!! 😭

plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: 'less' })] // look here!!!!!!
    })
],
css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "@/style/common.less";',
        modifyVars: themeColor,
        javascriptEnabled: true,
      }
    }
}

[vjpr]

I needed to use:

    loader: await resolve('less-loader'),
    options: {
      lessOptions: {
        // For: https://github.com/ant-design/ant-motion/issues/44#issuecomment-1110489052
        javascriptEnabled: true,
      }
    },

[EddieEldridge]

"less": "^4.1.2",
"vite": "^2.9.9",
"antd": "^4.20.5"

 css: {
        preprocessorOptions: {
            less: {
                modifyVars: getThemeVariables({
                    'dark': false,
                    'primary-color': '205, 154, 1'
                }),
                javascriptEnabled: true,
            },
        },
    }

Still throws Internal server error: Inline JavaScript is not enabled.

I cannot downgrade to a lower version of Less <3.0.0 because the latest version of Antd uses each function which isn't in older versions of Less.

[wallisonfelipe]

In webpack.mix.js, change:
mix.js('resources/js/app.js', jsOutputDir) .react() .webpackConfig(require('./webpack.config')) .less('resources/less/theme.less', cssOutputDir);

to

mix.js('resources/js/app.js', jsOutputDir) .react() .webpackConfig(require('./webpack.config')) .less('resources/less/theme.less', cssOutputDir, { lessOptions: { javascriptEnabled: true } });

[ramyasenthilkumar2019]

@EddieEldridge

Here is what I have used to fix the issue in less > 4.0

use: [ 'style-loader', 'css-loader', { loader: 'less-loader', options: { implementation: less, lessOptions: { javascriptEnabled: true } } } ]

[EddieEldridge]

@EddieEldridge

Here is what I have used to fix the issue in less > 4.0

use: [ 'style-loader', 'css-loader', { loader: 'less-loader', options: { implementation: less, lessOptions: { javascriptEnabled: true } } } ]

Thank you. My issue was that I wasn't specifying my config file. Stupid thing but thanks for letting me know anyways!