Vite and Antd error -> [vite:css] Inline JavaScript is not enabled. Is it set in your options?

Question

I'm not sure how to around fixing this error that came about migrating from CRA to vite.

> vite build

vite v2.9.13 building for production...
✓ 3811 modules transformed.
[vite:css] Inline JavaScript is not enabled. Is it set in your options?
file: /Users/nikos/WebstormProjects/web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/date-picker/style/index.less:110:0
error during build:
Error: Inline JavaScript is not enabled. Is it set in your options?
    at less (/Users/nikos/WebstormProjects/web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:38106:33)
    at async compileCSS (/Users/nikos/WebstormProjects/...

If I add this to Vite config

  less: {
    javascriptEnabled: true,
  },

It changes to

file: /Users/nikos/WebstormProjects/web/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/tag/style/index.less:110:0 which contains:

Answer 1

Add this to your vite config

  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: '@root-entry-name: default;',
      },
    },
  },