with pnpm vite resolve styles @import prefix with ~ error

Describe the bug

with pnpm, vite resolve dependency package styles @import prefix with ~ error

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: /^~/,
        replacement: '',
      },
    ],
  },
});

// src/main.tsx
import 'dantdv3/es/style/index.less'

// dantdv3/es/style/index.less
@import '~antd/es/table/style/index.less';
@import '~antd/es/style/themes/default.less';

Reproduction

https://github.com/lastSeries/vite-pnpm-less-resolve

System Info

System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 612.50 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.6.1 - ~/.nvm/versions/node/v16.6.1/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 7.20.3 - ~/.nvm/versions/node/v16.6.1/bin/npm
  Browsers:
    Chrome: 100.0.4896.127
    Firefox: 97.0.1
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-react: ^1.3.0 => 1.3.1 
    vite: ^2.9.2 => 2.9.5

Used Package Manager

pnpm

Logs

ENOENT: no such file or directory, open '${workspaceFolder}/antd/es/style/themes/default.less'
5:06:36 PM [vite] Internal server error: ENOENT: no such file or directory, open '${workspaceFolder}/antd/es/style/themes/default.less'
  Plugin: vite:css
  File: ${workspaceFolder}/node_modules/.pnpm/dantdv3@0.3.27_react-dom@18.0.0+react@18.0.0/node_modules/dantdv3/es/style/antd-extension.less
  1  |  @import '~antd/es/table/style/index.less';
     |                                             ^
  2  |  @import '~antd/es/style/themes/default.less';
  3  |

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[bluwy]

Importing files with @import '~bla' is not supported in Vite and I don’t think aliasing ~ should be a way to fix it. Aliases should (ideally) only be used for your source code. The ~ convention in less is Webpack-specific, and it’s also discouraged now, so I’d recommend contacting the package author to remove the ~ and it should work again. Otherwise sapphi-red’s workaround is the way to go for now. Closing as wontfix.

[bluwy]

The issue is that if you alias ~ to workaround the less import, Vite will import it from /node_modules/antd which wouldn’t work for pnpm like you mentioned. This behaviour is incorrect in the first place because Vite should resolve the import from /node_modules/dantdv3/node_modules/antd instead, but since this is an effect of using the ~ alias affecting node_modules, it’s out of scope for Vite here IMO.