Inline JavaScript is not enabled. Is it set in your options?

[duxard]

What problem does this feature solve?

Hi team, I bumped into the following problem and wasn't able to find a proper place to post the issue. 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) the following ERROR comes up:

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

As far as I can see I added { javascriptEnabled: true } option but it did not help. Any ideas on how to troubleshoot the issue?

[email protected] [email protected]

What does the proposed API look like?

N/A

[cipchk]

@duxard Can you provide your angular and ng-zorro-antd version numbers?

[duxard]

@cipchk I'm using the following versions: angular 11.2.1 ng-zorro-antd 11.3.0

[cipchk]

Try removing the node_modules and yarn.lock (or package_lock.json) files, then reinstalling the dependency yarn.

If still, try to upgrade less to ^3.9.0.

[duxard]

Tried it out, but unfortunately it did not help :(

[gizmoGremlin]

@duxard did you find a solution? I have same problem. Thanks

[cipchk]

@duxard @gizmoGremlin Can you provider less installed package infomation via yarn why less.

[duxard]

@gizmoGremlin looks like 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 (as it was in my case)

@cipchk i'm using npm - what is the correct way (npm command) to provide you with the required information?

[duxard]

@cipchk

+-- @angular-devkit/[email protected]

| +-- [email protected]

| | `-- [email protected] deduped

| `-- [email protected]

`-- [email protected]

`-- [email protected] deduped

[cipchk]

@duxard It looks like less is currently a 4.x version, try to force a ^3.9.0 version in package.json.

[duxard]

@cipchk gotcha, will give it try! Thank you

[bguezzie]

This is happening for me, as well. Originally I was on Less 4.x but even after switching to ^3.9.0 I see the same behavior. "@angular-devkit/build-angular": "^14.2.6", "ng-zorro-antd": "^14.1.1", "less": "^3.9.0",

Any advice on how to proceed? Is there a version of ng-zorro that uses the newer @plugin model?

[EDIT] If there's a way to pass the javascript enablement flag to Less via Angular config, that'll work too, but I don't see anything like that.

[npetillon]

I encountered the same problem when testing esbuild from angular v16. The response of the issue angular-cli:

The javascriptEnabled option is deprecated by Less and is not recommended due to security concerns. This was actually discussed in 2018 (Angular v6 timeframe) in regards to what appears to be the same package (https://github.com/angular/angular-cli/issues/10430). Due to potential security concerns with users unintentionally executing JS at build time, further discussion with the team will be needed to determine a long-term path forward.

[DanialV]

Still have this problem even after updating ant design to version 16

X [ERROR] Inline JavaScript is not enabled. Is it set in your options? [plugin angular-less]

    node_modules/ng-zorro-antd/style/color/bezierEasing.less:110:0:
      110 │ .bezierEasingMixin();

[JoaoPauloLousada]

I also have this issue when I migrate to angular V16. Don't know how to fix it properly.

[qyjs]

Still have this problem even after updating ant design to version 16

[DanialV]

This is the singular error hindering my project's compatibility with ES Build. Could you let me know if there are any plans to address this issue in the near future?

[shalltears]

I also have this error, but because i use @angular-devkit/build-angular:browser-esbuild to builder it is angular docs：https://angular.io/guide/esbuild

[cipchk]

@qyjs @shalltears Since esbuild does not support inline Javascript by default, see: https://github.com/angular/angular-cli/issues/25572

[belwalshubham]

Hey I'm also getting this below error how can I resolve this

 ERROR #98123  WEBPACK.DEVELOP

Generating development JavaScript bundle failed

Module build failed (from ./node_modules/gatsby-plugin-less/node_module
s/less-loader/dist/cjs.js):

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
      Error in /Users/shubhambelwal/Documents/xxx/nod
e_modules/antd/es/style/color/bezierEasing.less (line 110, column 0)

Here is my Gatsby configuration in gatsby-config.js:

module.exports = {
  plugins: [
    'gatsby-plugin-antd',
    'gatsby-plugin-less',
    {
      resolve: 'gatsby-plugin-antd',
      options: {
        javascriptEnabled: true,
        style: true,
      }
    },
    {
      resolve: 'gatsby-plugin-less',
      options: {
        javascriptEnabled: true,
      },
  ]
}

I have the following dependencies installed:

gatsby-plugin-less@^6.20.0
less@^2.7.1
less-loader@^3.0.0
gatsby-plugin-antd@^2.2.0
antd@^3.26.11

Despite configuring the plugins with javascriptEnabled: true, I'm still encountering this error. How can I resolve this issue?

Any help or insights would be greatly appreciated. Thank you!

[ogix]

This issue is already open for 2 years. Any updates? It should be fixed before Angular drops support for this flag.

[micobarac]

Still the same in Angular 17.3.0 and NG-Zorro 17.3.0:

▲ [WARNING] Deprecated inline execution of JavaScript has been enabled ("javascriptEnabled") [plugin angular-less]

    node_modules/ng-zorro-antd/style/color/bezierEasing.less:110:0:
      110 │ .bezierEasingMixin();
          ╵ ^

  JavaScript found within less stylesheets may be executed at build time. [https://lesscss.org/usage/#less-options]
  Support for "javascriptEnabled" may be removed from the Angular CLI starting with Angular v19.
  The plugin "angular-less" was triggered by this import

    angular:styles/global:styles:1:8:

[micobarac]

Here's an example of how you can define a Bezier easing function in Less, without javascript:

// Define a mixin for Bezier easing
.bezierEasingMixin(@x1, @y1, @x2, @y2) {
  @bezierEasing: cubic-bezier(@x1, @y1, @x2, @y2);
}

// Usage example
.myAnimation {
  .bezierEasingMixin(0.26, 0.09, 0.37, 0.18);
  transition: all 0.3s @bezierEasing; // Use the Bezier easing in a CSS property
}

[gkorakas-eli]

Any updates?