Vitest problem with LESS files

[oferitz]

Describe the bug

I'm trying to migrate a project from CRA+Jest to Vite+Vitest, so far everything went well but now i'm stuck at a point where vitest is failing the majority of the tests with the same error:

SyntaxError: Invalid or unexpected token
 - /node_modules/antd/lib/date-picker/style/index.js:3:1

Digging into this file reveals that this file is doing require to other file who contains a LESS variable

 "use strict";

require("./index.less");
require("../../button/style");
require("../../tag/style");

index.less

@root-entry-name: default;

@import './index-pure.less';

So the underlying error is actually:

Invalid or unexpected token
/Users/oferitz/Projects/my-project/node_modules/antd/lib/date-picker/style/index.less:1
@root-entry-name: default;
^

Now in the app itself everything is working fine, the app transpiles, all less files and variables resolved correctly with this vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'
import tsconfigPaths from 'vite-tsconfig-paths'
import eslintPlugin from 'vite-plugin-eslint'
import svgr from 'vite-plugin-svgr'
import vitePluginImp from 'vite-plugin-imp'
import { configDefaults } from 'vitest/config'

export default defineConfig(({ mode }) => {
  return {
    build: {
      sourcemap: true
    },
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          modifyVars: {
            // LESS variables
          }
        }
      }
    },

    resolve: {
      alias: [
        // Alias for Ant Design less files
        { find: /^~/, replacement: '' }
      ]
    },
    plugins: [
      react(),
      vitePluginImp({
        libList: [
          {
            libName: 'antd',
            libDirectory: 'es',
            style: name => `antd/es/${name}/style`
          }
        ]
      }),
      svgr(),
      checker({ typescript: true }),
      tsconfigPaths(),
      eslintPlugin()
    ],
    define: {
      ...(mode === 'development' && { global: 'window', 'process.env': {} })
    },
    test: {
      globals: true,
      environment: 'jsdom',
      setupFiles: './src/setupTests.ts'
    }
  }
})

To my understanding Vitest is using the above config so what am i missing here? I tried to set some configuration options like deps : {fallbackCJS : true} but it didn't help... Any help will be appreciated.

Reproduction

-

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1
    Memory: 94.95 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.13.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
    Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 109.0.5414.119
    Firefox Developer Edition: 110.0
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react: ^3.0.1 => 3.0.1 
    @vitest/ui: ^0.28.2 => 0.28.2 
    vite: ^4.0.4 => 4.0.4 
    vitest: ^0.28.2 => 0.28.2

Used Package Manager

npm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[oferitz]

Closing cause i found the cause: there was an import from lib somewhere and not from es

import 'antd/lib/date-picker/style/index' -> import 'antd/es/date-picker/style/index'

[rluvaton]

Possible fix to future visitors:

I had a problem with antd styles as well but the solution above me did not work maybe because antd was used by a dependency, so I created a PR to fix it in: #3465 and it's fixed in v0.31.2