Open karlhorky opened 7 months ago
Start a new pull request in StackBlitz Codeflow.
.cts
extension for now.@brc-dd thanks!
I tried using postcss.config.cts
, but this resulted in a confusing ts-node
error which I was unable to find much info on:
[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/k/p/projec/packages/slide-decks): [TSError] ⨯ Unable to compile TypeScript:
error TS5110: Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.
TSError: ⨯ Unable to compile TypeScript:
error TS5110: Option 'module' must be set to 'NodeNext' when option 'moduleResolution' is set to 'NodeNext'.
at createTSError (/Users/k/p/projec/node_modules/ts-node/src/index.ts:859:12)
at reportTSError (/Users/k/p/projec/node_modules/ts-node/src/index.ts:863:19)
at /Users/k/p/projec/node_modules/ts-node/src/index.ts:1379:34
at Object.compile (/Users/k/p/projec/node_modules/ts-node/src/index.ts:1440:28)
at Module.m._compile (/Users/k/p/projec/node_modules/ts-node/src/index.ts:1617:30)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Object.require.extensions.<computed> [as .js] (/Users/k/p/projec/node_modules/ts-node/src/index.ts:1621:12)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.require (node:internal/modules/cjs/loader:1235:19)] {
diagnosticCodes: [ 5110 ]
}
fatal error: all goroutines are asleep - deadlock!
goroutine 1 [chan receive]:
github.com/evanw/esbuild/internal/helpers.(*ThreadSafeWaitGroup).Wait(...)
github.com/evanw/esbuild/internal/helpers/waitgroup.go:36
main.runService.func2()
github.com/evanw/esbuild/cmd/esbuild/service.go:114 +0x8c
main.runService(0x1)
github.com/evanw/esbuild/cmd/esbuild/service.go:160 +0x4b4
main.main()
github.com/evanw/esbuild/cmd/esbuild/main.go:240 +0x8d8
goroutine 18 [chan receive]:
main.runService.func1()
github.com/evanw/esbuild/cmd/esbuild/service.go:98 +0x40
created by main.runService
github.com/evanw/esbuild/cmd/esbuild/service.go:97 +0x1a0
goroutine 19 [chan receive]:
main.(*serviceType).sendRequest(0x140001ac060, {0x100866300, 0x140000d3b00})
github.com/evanw/esbuild/cmd/esbuild/service.go:192 +0x11c
main.runService.func3()
github.com/evanw/esbuild/cmd/esbuild/service.go:125 +0x38
created by main.runService
github.com/evanw/esbuild/cmd/esbuild/service.go:122 +0x308
error Command failed with exit code 1.
My tsconfig.json
file does indeed use NodeNext
for both module
and moduleResolution
:
{
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "eslint-config-upleveled/tsconfig.base.json",
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"checkJs": true,
"jsx": "preserve"
},
"include": [
"**/*.ts",
"**/*.tsx",
"**/*.js",
"**/*.jsx",
"**/*.cts",
"**/*.cjs",
"**/*.mjs"
],
"exclude": ["node_modules"]
}
I tried also switching to tsx
as suggested by other users having issues with ts-node
("NODE_OPTIONS='--import tsx' vite dev"
), but this led to a different confusing error, also thrown by ts-node
:
[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/k/p/projec/packages/slide-decks): [TypeError] Cannot assign to read only property '.mjs' of object '[object Object]'
TypeError: Cannot assign to read only property '.mjs' of object '[object Object]'
at registerExtension (/Users/k/p/projec/node_modules/ts-node/src/index.ts:1607:26)
at registerExtensions (/Users/k/p/projec/node_modules/ts-node/src/index.ts:1579:5)
at Object.register (/Users/k/p/projec/node_modules/ts-node/src/index.ts:600:3)
at file:///Users/k/p/projec/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:29068:43
at Object.search (file:///Users/k/p/projec/node_modules/vite/dist/node/chunks/dep-94_H5fT6.js:21277:48)]
error Command failed with exit code 1.
Probably ts-node has some issue with nodenext. You can do something like:
// tsconfig.json
{
// ...
"ts-node": {
"transpileOnly": true,
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node10"
}
}
}
Just for added clarity: you can install v5 of postcss-load-config
, you can override transitive dependencies to use v5, but Vite still contains postcss-load-config
v4 as vendored code. That's why, even after excising ts-node
from your codebase, you still get a ts-node
error.
IMO just stick with postcss.config.cjs
for now. It's just not worth the trouble trying to get ts-node
working in a modern environment.
I wonder if Vite v6 could reconsider vendoring postcss-load-config
? I definitely wasn't aware until now that installing my own postcss-load-config
means I'm writing a "type-safe" config for a completely different version than what's baked into Vite. That is… not ideal!
As an alternative to not vendoring postcss-load-config
, would Vite consider re-exporting the PostCSS config type from postcss-load-config
? This would have the advantage of allowing us to write type-safe configs using the same version of postcss-load-config
that Vite uses, and users would not need to install their own version of postcss-load-config
just to get access to the config typings.
Originally reported over here by @ElPrudi (before the issue was fixed in
postcss-load-config
):Describe the bug
Upgrading to a version after
postcss-load-config@5.0.0
(which added support for ESMpostcss.config.ts
w."type": "module"
does not resolve the problem in Vite thatrequire()
is used to load an ESMpostcss.config.ts
(or any other variations on the TS config) when in a"type": "module"
project:cc @bluwy
Reproduction
https://stackblitz.com/edit/vitejs-vite-2gepfr?file=package.json
Steps to reproduce
Create a config file called
postcss.config.ts
(or.postcssrc.ts
, as in the reproduction above):System Info
Used Package Manager
npm
Logs
See logs above
Validations