2

I'm trying to configure my first project with Nx.

My client explicitly request the use of React with Typescript, Nx and the Ant design UI Kit.

I've successfully created a new project with the required specification, at least using the CSS version of the Ant design kit. Of course, I need to customize the UI kit with colors and other modification. According to the Ant documentation, I need to use the less styles in order to modify them.

I choose to enable the less style in Nx (for each react component I have a component-name.module.less file).

Now, if I try to import the antd less style, the build process fails with the following error:

> nx run react-ui-kit:build
Bundling react-ui-kit...
Error during bundle: SyntaxError: Inline JavaScript is not enabled. Is it set in your options? in /Users/luca/Jellyfish/Customers/client/libs/react-ui-kit/node_modules/antd/lib/style/color/bezierEasing.less on line 110, column 1:
109 // https://github.com/ant-design/ant-motion/issues/44
110 .bezierEasingMixin();
111

I understand that I should edit the less-build script in order to enable the javascript inlining, something like:

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

Unfortunately, I can't understand where to put this configuration inside my nx project.

Did someone have a similar problem? Any suggestion?

LucaRoverelli
  • 1,116
  • 1
  • 9
  • 15
  • That "build script" appears to be Webpack configuration. – jonrsharpe Feb 17 '21 at 09:06
  • @jonrsharpe yes, but I don't know WHERE to put it on the nx project – LucaRoverelli Feb 17 '21 at 09:12
  • Well are you using Webpack? Where's the rest of your Webpack configuration? You can see the codebase; we can't. – jonrsharpe Feb 17 '21 at 09:13
  • @jonrsharpe that's the problem. Since it is an Nx project (https://nx.dev/) the webpack configuration seems to be wrapped somewhere inside an nx plugin, so I don't have the configuration file – LucaRoverelli Feb 17 '21 at 09:22
  • 1
    @LucaRoverelli: Pretty sure you found out, but if you look inside your `workspace.json` file, you'll find a `"webpackConfig"` entry where you can specify the path to your webpack config file. See [this](https://github.com/nrwl/nx/issues/3480) – Greg Forel Apr 13 '21 at 20:18

0 Answers0