Error resolving preset within config file

[nwhittaker]

Possibly related to #1185. The plugin is throwing an error during initialization. It appears to no longer be able to follow one of the preset paths.

The project is in a monorepo using pnpm to manage dependencies. The preset file exists as a dependency of the parent project. The tailwind config exists in a child project. As a result, the child project's dependency is a symlink to the parent project's dependency.

The underscores in the stack trace are placeholders to privatize the name of the dependency while maintaining the line length.

[Global] Initializing projects...
[packages/child-project/config/tailwind.config.js] Initializing...
[packages/child-project/config/tailwind.config.js] supported features: ["layer:base","separator:root","content-list","jit","css-at-config-as-project","relative-content-paths","transpiled-configs"]
[packages/child-project/config/tailwind.config.js] Loaded tailwindcss v3.4.17: /parent-project/node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.8.0_@swc+helpers@0.5.15__@types+node@22.13.4_typescript@5.6.3_/node_modules/tailwindcss
[packages/child-project/config/tailwind.config.js] Loaded Tailwind CSS config file: /parent-project/packages/child-project/config/tailwind.config.js
[packages/child-project/config/tailwind.config.js] Loaded postcss v8.5.1: /parent-project/node_modules/.pnpm/postcss@8.5.1/node_modules/postcss
[packages/child-project/config/tailwind.config.js] Building...
[Error - 2:10:18 PM] Unable to load config file at: /parent-project/packages/child-project/config/tailwind.config.js
[Error - 2:10:18 PM] TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '/parent-project/node_modules/.pnpm/____________________@git+https+++git@github.com+___________________________...
    at readFileSync (node:fs:448:42)
    at t.readFileSync (node:electron/js2c/node_init:2:10175)
    at require.readFileSync (eval at <anonymous> (/Users/username/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.6/dist/tailwindServer.js:3548:800), <anonymous>:9:14)
    at jiti (/parent-project/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:245281)
    at /parent-project/packages/child-project/config/tailwind.config.js:5:5
    at evalModule (/parent-project/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:247313)
    at jiti (/parent-project/node_modules/.pnpm/jiti@1.21.6/node_modules/jiti/dist/jiti.js:1:245241)
    at /parent-project/node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.8.0_@swc+helpers@0.5.15__@types+node@22.13.4_typescript@5.6.3_/node_modules/tailwindcss/lib/lib/load-config.js:52:26
    at Object.loadConfig [as module] (/parent-project/node_modules/.pnpm/tailwindcss@3.4.17_ts-node@10.9.2_@swc+core@1.8.0_@swc+helpers@0.5.15__@types+node@22.13.4_typescript@5.6.3_/node_modules/tailwindcss/lib/lib/load-config.js:62:6)
    at D (/Users/username/.vscode/extensions/bradlc.vscode-tailwindcss-0.14.6/dist/tailwindServer.js:3542:11614) {
  code: 'ERR_INVALID_ARG_VALUE'
}
[Global] Initialized 1 projects

[thecrypticace]

I don't think this isn't related to recursive symlinks. It wouldn't get that far to loading the config file. Any chance you could post the config file (even if the package name is redacted)?

[thecrypticace]

Ooh also do you have a typescript config file with path mappings in the project?

[nwhittaker]

I don't think this isn't related to recursive symlinks. It wouldn't get that far to loading the config file.

To clarify, the config file itself is not accessed via a symlink. It's a path in the preset config that is a symlink. If I copy the shared dependency to the child project so the preset is accessed directly, I no longer see the error. Interestingly, I have another preset that also follows a symlink, but does work. The only difference is this symlink leads to another package in the monorepo (instead of to a dependency in the pnpm store).

Any chance you could post the config file (even if the package name is redacted)?

It looks something like this:

/** @type {import('tailwindcss/types').Config} */
module.exports = {
  presets: [
    require('___________/tailwindcss/presets/default.config.cjs'), // <- works
    require('____________________/config/tailwind.config.js'),     // <- fails with error
  ],

  content: […],
  theme: {…},
}

Ooh also do you have a typescript config file with path mappings in the project?

I do. I tried removing them and also adding an explicit mapping for the preset file, but didn't get a difference in behavior. Happy to try something else, if needed.

[thecrypticace]

So I tracked the error in Node so I could understand what the exact requirements are for the validated path because it's obviously getting a string (or at least it prints as one) and it seems like the path itself can't include a null byte regardless of it being a string or UInt8Array.

It would be super weird that the path has one in it but I can't think of another reason it'd fail.

Any chance you're on on Windows? Also what version of the extension are you using?

[nwhittaker]

Any chance you're on on Windows? Also what version of the extension are you using?

I'm on macOS 15.3.1 running version 0.14.6 of the extension and v22.12.0 of node. I see that extension version was recently published, but I know I've seen the error for a little while now.

I tried playing around with the path string. It's cut off in the error log, but the full path contains a "#" character. When I remove that character, I no longer get the error. At this point, this feels more like a bug with pnpm or node.

[nwhittaker]

I suspect require() is transforming the path in a bad way. If I call readFileSync() directly with the path, it works. If I move the "#" character towards the front of the string so it doesn't get cut off in the log, I see it's escaped as "\x00#" which should explain why readFileSync() is throwing.

[thecrypticace]

but the full path contains a "#" character.

OOOH! Yep. This might a problem with enhanced-resolve. It allows escaping # characters with \0 (no idea why) but afaik it's not supposed to return paths with a NUL byte. Lemme look into this.

https://github.com/webpack/enhanced-resolve?tab=readme-ov-file#escaping

[thecrypticace]

Oh literally says it right there in the readme…

When a # is resolved as path it will be escaped in the result. Here: .../some\0#thing.js.

So I guess this is something we've got to handle on our side. Fun.

[thecrypticace]

The fix will go out in the next release — probably Monday or Tuesday. 👍