vite subpath imports not working with query (e.g #bar.css?inline)

[Rajaniraiyn]

Describe the bug

I am using vite's resolve.alias for aliasing my files. below is my config

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "#WC",
        replacement: "./src/WC.ts",
      },
      {
        find: "#globals.css",
        replacement: "./src/styles/globals.css.ts"
      }
    ],
  },

All working perfectly except the #globals.css.
It shows the below error

[commonjs--resolver] Missing "#globals.css?used" specifier in "my-pkg" package
error during build:
Error: Missing "#globals.css?used" specifier in "my-pkg" package

But if I replace my alias from #globals.css → #globals.css?used all works fine. but the same issue is not occurring for other imports alias

Reproduction

https://stackblitz.com/edit/vitejs-vite-encmtd

https://stackblitz.com/edit/vitejs-vite-pseonw?file=counter.js

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 143.58 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.6.1 - /opt/homebrew/bin/node
    npm: 9.6.4 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 16.4

Used Package Manager

pnpm

Logs

Click to expand!

[commonjs--resolver] Missing "#bar.css?used" specifier in "vite-starter" package
error during build:
Error: Missing "#bar.css?used" specifier in "vite-starter" package
    at e (file://file:///home/projects/vitejs-vite-encmtd/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:16701:25)
    at n (file://file:///home/projects/vitejs-vite-encmtd/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:16701:627)
    at f (file://file:///home/projects/vitejs-vite-encmtd/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:16701:1357)
    at resolveExportsOrImports (file://file:///home/projects/vitejs-vite-encmtd/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:23459:20)
    at resolveSubpathImports (file://file:///home/projects/vitejs-vite-encmtd/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:22996:23)
    at Object.resolveId (file://file:///home/projects/vitejs-vite-encmtd/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:22803:37)
    at eval (file://file:///home/projects/vitejs-vite-encmtd/node_modules/rollup/dist/es/shared/node-entry.js:24576:40)
    at async PluginDriver.hookFirstAndGetPlugin (file://file:///home/projects/vitejs-vite-encmtd/node_modules/rollup/dist/es/shared/node-entry.js:24476:28)
    at async resolveId (file://file:///home/projects/vitejs-vite-encmtd/node_modules/rollup/dist/es/shared/node-entry.js:23373:26)
    at async ModuleLoader.resolveId (file://file:///home/projects/vitejs-vite-encmtd/node_modules/rollup/dist/es/shared/node-entry.js:23637:15)
 ELIFECYCLE  Command failed with exit code 1.

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 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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-encmtd (Open reproduction)

[bluwy]

The ?used is appended because of Vite's internals, which is caused by the CSS default import that's deprecated:

import style from '#bar.css'; // <-- should have ?inline

Ideally this should be imported as #bar.css?inline instead, but that doesn't work because of the query. So it doesn't match the alias or subpath imports (btw Vite 4.2 supports subpath imports without the alias ootb).

As a workaround, you could set a regex in resolve.alias to also map the queries. Re subpath imports, I'm not really sure if the spec would've allowed queries to also resolve too, so leaving this open for now.

[Rajaniraiyn]

Thanks @bluwy !
But #bar.css is not a css file. It is a TypeScript file bar.css.ts. if i change the import from import css from "#bar.css" to import css from "#bar.css.js", vite builds perfectly. Vite is considering my import as a CSS file rather than a TypeScript file.
So, vite must resolve #bar.css as TypeScript not as a CSS file. In the module resolution algorithm subpath imports must also be added before considering it as a css file just based on the file extension.

[patak-dev]

Why are you adding the imports as a resolve.alias? subpath imports are working now in Vite.

But the reproduction still fails during build if that is removed, so it looks like a Vite issue
https://stackblitz.com/edit/vitejs-vite-fdcb8p

I think we should have restrained from using .css.ts, but there are other projects like vanilla-extract that are doing the same.

[Rajaniraiyn]

@patak-dev Initially I thought it is an issue that subpath imports in vite that it is not working. But latter I realised that that it is an issue with vite resolution.

actually vanilla-extract have striped out the query strings at vite-plugin/src/index.ts#L91.

this must be actually resolved properly without this need.
Thanks!

[ziedHamdi]

I have the same error but I don't know how to interpret it:

12:14:06 AM [vite] page reload src/hooks.server.ts
Missing "./dist/service" specifier in "@user-credits/stripe-mongoose" package
12:14:06 AM [vite] Error when evaluating SSR module /src/hooks.server.ts: failed to import "/src/hooks/init.ts"
|- Error: Missing "./dist/service" specifier in "@user-credits/stripe-mongoose" package
    at e (file:///C:/Users/zhamd/work/svelte-user-credits/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:21445:25)
    at n (file:///C:/Users/zhamd/work/svelte-user-credits/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:21445:627)
    at o (file:///C:/Users/zhamd/work/svelte-user-credits/node_modules/.pnpm/vite@4.5.0_@types+node@20.9.0/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:21445:1297)

The file /src/hooks/init.ts is as follows:

import {Connection, Types} from 'mongoose';
import { MongooseStripeContainerSingleton, connectToDb, disconnectFromDb, resolveConfigReader, resolveStripeClient, MongooseDaoFactory } from '@user-credits/stripe-mongoose';
import { ServiceProxy } from '../lib/server/rest/ServiceProxy';
import { AwilixContainer } from "awilix/lib/container";
import { IService, PaymentService } from '@user-credits/core';
import { IConfigReader } from '@user-credits/stripe-mongoose/dist/service';
import { asValue } from 'awilix';

export let ioc: AwilixContainer<object>;
export let iConfigReader: IConfigReader;
export let service: IService<Types.ObjectId>;
export let serviceProxy: ServiceProxy<Types.ObjectId>;

export function isInitialized(): boolean {
	return ioc != null;
}

export async function beforeStartup() {
	if(!isInitialized()) {
		ioc = await MongooseStripeContainerSingleton.getInstance();
		const connection: Connection = await connectToDb("mongodb://localhost:27001", "user-credits")
		// Connect to MongoDB
		const mongooseDaoFactory = new MongooseDaoFactory(connection);
		const paymentClient = await resolveStripeClient();
		iConfigReader = await resolveConfigReader();
		service = new PaymentService(mongooseDaoFactory, paymentClient, iConfigReader.currency() ?? "usd") as unknown as IService<Types.ObjectId>;
		serviceProxy = new ServiceProxy<Types.ObjectId>(service);
		ioc.register( {service: asValue(service)} );
		ioc.register( {serviceProxy: asValue(serviceProxy)} );
		console.log('Connected to MongoDB');
	}
}

export async function onShutDown() {
	if(isInitialized()) {
		ioc = null;
		iConfigReader = null;
		service = null;
		serviceProxy = null;
		// Disconnect from MongoDB on server shutdown
		await disconnectFromDb();
		console.log('Disconnected from MongoDB');
	}
}

And the library I'm importing doesn't directly mention any "./dist/service".

You can reproduce it by running

git clone https://github.com/ziedHamdi/svelte-user-credits.git
pnpm i && pnpm build
//or pnpm dev and visit http://localhost:5173