Import aliased path for scss causes rollup error with Rollup failed to resolve import

[johannessorheim]

Describe the bug

We are using rollup-plugin-includepath and typescript-plugin-css-modules with scss includePaths configured, to be able to import React components and .module.scss modules in our components, without the need for relative references (../../../).

This works fine with both tsc and during development with vite start.
However, with vite build, we get an rollup-error caused by ?used parameter on the .scss files.

For example in our .tsx file:
import listItem from 'components/header/ListItem.module.scss';

and in our .scss file:
@import 'scss/variables.module.scss';

In vitejs I found this that might cause the error for us:
3e3c203#diff-121079017d1fa98d6a0ea3354d5c73df45ab277078228cd7384c7a4e84c5a813R187

As a workaround, I implemented a small rollup-plugin.
resolveId(source: string) {
if (source.endsWith('?used')) {
return { id: src/${source.slice(0, -'?used'.length)}, external: false };
}
return null;
},

Are we using these imports the wrong way, or is this a bug in vitejs?

Reproduction

Clone sample repository, npm install, npm run build
https://github.com/johannessorheim/Vite5811

This line triggers causes vite build to fail, and works with vite dev:
https://github.com/johannessorheim/Vite5811/blob/main/src/some/deep/folder/component.tsx#L4

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
    Memory: 4.00 GB / 15.74 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.45
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.29)
    Internet Explorer: 11.0.19041.1202
  npmPackages:
    @vitejs/plugin-react: ^1.0.8 => 1.0.8
    vite: ^2.6.14 => 2.6.14

Used Package Manager

npm

Logs

[vite]: Rollup failed to resolve import "components/header/ListItem.module.scss?used" from "src\components\header\small\NavigationMenu.tsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "components/header/ListItem.module.scss?used" from "src\components\header\small\NavigationMenu.tsx".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

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/vue-next 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.

[johannessorheim]

@yyx990803
3e3c203#diff-121079017d1fa98d6a0ea3354d5c73df45ab277078228cd7384c7a4e84c5a813R177

[johannessorheim]

I find that the plugin rollup-plugin-includepath seems to be obsolete and not maintained.
Are there any other recommended way to have scss typescript support with Vite + React Typescript, both in tsx-files and in scss-files?

[johannessorheim]

Seems this issue has been resolved by #8245