VSCode extension does not work when using yarn PnP

[steelywing]

UnoCSS version

0.58

Describe the bug

VSCode extension is not working when install unocss with yarn, the UnoCSS console output:

⚠️ Error on loading config. Config directory: c:\App\vite-ts\vite-project
Error: Cannot find module 'unocss'

it is normal when using npm

Reproduction

yarn create vite vite-project --template vanilla
cd vite-project
yarn add unocss

add a basic unocss config

import { defineConfig, presetAttributify, presetUno } from 'unocss';

export default defineConfig({
    presets: [
        presetUno(),
    ],
});

open the project in VSCode

System Info

No response

Validations

• Read the Contributing Guidelines.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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.

[steelywing]

This should relate to Yarn PNP, I see TailwindCSS extension will try to load the .pnp.js

https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-server/src/server.ts#L580

[Simon-He95]

I have not reproduced this problem in the latest version. Please provide a more detailed reproduction demo.

[FWest98]

The issue is with the use of Yarn PnP specifically. When using PnP, all packages are zipped and made available on demand within the runtime, so there is no node_modules folder. Consequently, the extension cannot find the unocss module.

Other plugins integrate with the concept of Editor SDKs to get the dynamic dependency loading features, but the UnoCSS extension seems to load the uno.config.ts file in the VS Code context, after which the import {..} from "unocss" line (predictably) fails.

Stacktrace from the VS Code log:

⚪️ UnoCSS for VS Code v0.58.8

📂 roots search mode.

-----------
🛠 Resolving config for /d/<path>
⚠️ Error on loading config. Config directory: /d/<path>
Error: Cannot find module 'unocss'
Require stack:
- /d/<path>/uno.config.ts
	at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
	at Function.resolve (node:internal/modules/cjs/helpers:127:19)
	at _resolve4 (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:33588:36)
	at jiti2 (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:33653:30)
	at /d/<path>/uno.config.ts:2:15
	at evalModule (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:33704:15)
	at jiti2 (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:33667:20)
	at loadConfigFile (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:90176:13)
	at async Object.load (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:90102:24)
	at async loadConfig (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:90239:18)
	at async reloadConfig (/home/Floris/.vscode-server/extensions/antfu.unocss-0.58.8/dist/index.js:90291:20)
🗂️ Enabled context: [none]

[userquin]

does your project empty spaces in the path? it seems you're using Windows, bad combination using spaces or accents in the path.

[FWest98]

While, yes, the example above did have spaces in the path, the same issue with the exact same tracelog appears when running in a directory without spaces, or even when running on macOS.

[cyberalien]

Tested, have same issue.

No special characters in path.

MacOS 14.3.1
Node 20.5.0
Yarn 3.6.0

[cyberalien]

Actually, even vite.config.ts fails without UnoCSS:

So this is not UnoCSS error.

[FWest98]

This is probably caused by not using the proper PnP Editor SDK: https://yarnpkg.com/getting-started/editor-sdks. Installing this will let VS Code resolve the PnP dependencies, instead of looking in node_modules.