Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript doesn't work with "type": "module" in package.json #239

Closed
TimothyGu opened this issue Jul 25, 2022 · 11 comments · Fixed by #249
Closed

TypeScript doesn't work with "type": "module" in package.json #239

TimothyGu opened this issue Jul 25, 2022 · 11 comments · Fixed by #249

Comments

@TimothyGu
Copy link

Running any postcss-cli command fails with

  • "type": "module" in package.json, and
  • TypeScript config file (postcss.config.ts)

Details

After support for .mjs was added in version 4 of this module, I expected ESM-mode TypeScript to work as well. Unfortunately, it does not.

The issue has to do with how TypeScript config files are loaded:

// Register TypeScript compiler instance
registerer = require('ts-node').register()
return require(configFile)

Using ts-node.register() / require() with "type": "module" is simply unsupported. See ts-node documentation.

Workaround

The ts-node documentation describes a valid workaround:

  • You have moved your project to ESM but still have a config file, such as webpack.config.ts, which must be executed as CommonJS
    • Solution: Configure a module type override. Docs

Indeed, if I include

  "ts-node": {
    "moduleTypes": {
      "postcss.config.ts": "cjs"
    }
  }

in tsconfig.json then the error goes away.

Error (Logs|Stacks)

https://gist.github.com/TimothyGu/e65fcba3fd759cd6fa2e415ed2047b77#file-readme-md

Reproduction (Code)

See https://gist.github.com/TimothyGu/e65fcba3fd759cd6fa2e415ed2047b77

$ git clone https://gist.github.com/e65fcba3fd759cd6fa2e415ed2047b77.git testdir
$ cd testdir
$ yarn
$ node_modules/.bin/postcss test.css

Environment

OS node npm/yarn package
Linux 5.17.15-1-MANJARO 18.3.0 yarn 1.22.19 postcss 8.4.14
postcss-cli 10.0.0
postcss-load-config 4.0.1
see yarn.lock
@TimothyGu
Copy link
Author

For what it's worth, webpack had the same issue: webpack/webpack-cli#2458

Their fix does not work with postcss, however:

$ NODE_OPTIONS=--loader=ts-node/esm node_modules/.bin/postcss test.css

still throws the same error.

@ai
Copy link
Member

ai commented Jul 30, 2022

Seems like for now there is no good way to use TS and ESM together. All of them are very dirty (like hacking Node.js with custom loaders).

It is better to use .js for PostCSS configs until the problem will not be fixed on ecosystem level.

If you have any trick in mind, we can review the PR.

@polyzen
Copy link

polyzen commented Mar 29, 2023

From vitejs/vite#11894: postcss-load-config should use import() in this case if the config is compiled to ESM.

@ai
Copy link
Member

ai commented Mar 29, 2023

@polyzen do you have an idea how to fix it?

@polyzen
Copy link

polyzen commented Mar 29, 2023

I do not.

@polyzen
Copy link

polyzen commented Mar 31, 2023

https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support

I do not know if this is equivalent, but tailwind.config.ts (and vite.config.ts) works in this situation. Perhaps their implementation can be inspiration.

archlinux-github pushed a commit to archlinux/neoasknot that referenced this issue Mar 31, 2023
Also use named variables so type-checking works:
postcss/postcss#1824

Once the following is resolved a TypeScript config file could be used:
postcss/postcss-load-config#239
@xiaohaoo
Copy link

xiaohaoo commented Jun 2, 2023

来自vitejs/vite#11894postcss-load-config should use import() in this case if the config is compiled to ESM.

我认为这是一个bug,为什么还没修复

@brc-dd
Copy link
Contributor

brc-dd commented Aug 11, 2023

Tailwind uses jiti + sucrase to handle this: https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/load-config.ts

I can create a PR here if the maintainers allow. jiti already comes with babel, so sucrase is only required if you want to increase perf.

Also, this issue is similar to #246. Fixing this will close it too.

@ai
Copy link
Member

ai commented Aug 11, 2023

@TimothyGu can you check that #246 works on your big repo?

@karlhorky
Copy link

Thanks for the release [email protected] with full ESM support in postcss.config.ts with "type": "module" @brc-dd and @ai 🙌

@gyf0601
Copy link

gyf0601 commented Apr 12, 2024

should use this config
"ts-node": { "transpileOnly": true, "moduleTypes": { "webpack.config.ts": "cjs", // Globs are also supported with the same behavior as tsconfig "include" "webpack-config-scripts/**/*": "cjs" } }
https://github.com/TypeStrong/ts-node/tree/97f9afd046b66a0fe05a7d76e7a32f94b872016f#module-type-overrides

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants