Enable javascriptEnabled with LESS CSS (Use Ant Design)

[doiya46]

I antd less css need javascriptEnabled to compile option. Do you guys have any ideal to overrides bit.dev config.

1. In a component i have to import like: import "antd/lib/button/style/index.less"; or import 'antd/lib/style/themes/default.less';

Exam:

import React, { ReactNode } from "react";
import { Button } from "antd";
import "antd/lib/button/style/index.less";

declare const ButtonTypes: [
  "default",
  "primary",
  "ghost",
  "dashed",
  "link",
  "text"
];

export declare type ButtonType = typeof ButtonTypes[number];

export type NButtonProps = {
  /**
   * a node to be rendered in the special component.
   */
  children?: ReactNode;
  type?: ButtonType;
};

export function NButton({ children, type = "default" }: NButtonProps) {
  return <Button type={type}>{children}</Button>;
}

1. And get the error after: bit start

webpack 5.51.1 compiled with 1 error in 22841 ms
Module build failed (from ../../../../.bvm/versions/0.0.687/bit-0.0.687/node_modules/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 node_modules/.pnpm/registry.npmjs.org+antd@4.19.3_react-dom@17
.0.2+react@17.0.2/node_modules/antd/lib/style/color/bezierEasing.less (line 110, column 0)
ModuleBuildError: Module build failed (from 
../../../../.bvm/versions/0.0.687/bit-0.0.687/node_modules/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 node_modules/.pnpm/registry.npmjs.org+antd@4.19.3_react-dom@17
.0.2+react@17.0.2/node_modules/antd/lib/style/color/bezierEasing.less (line 110, column 0)
    at processResult 

Example case use craco.config.js with craco-less

const webpack = require('webpack');
const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          process: { env: {} },
        }),
      ],
    },
  },
};

[ohhoney1]

try it: import "antd/lib/button/style/css".

or custom webpack config, just add your custom react-env, and modify default webpack. and the example can be find in slack.

or try use babel plugin: babel-plugin-import, i make it yesterday: custom-babel, import it and set is as your react-components's env.