Can not import postcss.config.ts when using a native ESM based project

[callumgare]

Describe the bug

Vite supports typescript based config files for things like postcss using ts-node to compile to js. Unfortunately this only works for CommonJS based projects. Native ESM based projects using vite (such as that generated by the vue-ts template where "type": "module" is set in package.json) produce an error when a postcss.config.ts file is present.

[plugin:vite:css] Failed to load PostCSS config (searchPath: /home/projects/vitejs-vite-dbn5r1): [Error] Must use import to load ES Module: /home/projects/vitejs-vite-dbn5r1/postcss.config.ts
require() of ES modules is not supported.
require() of /home/projects/vitejs-vite-dbn5r1/postcss.config.ts from /home/projects/vitejs-vite-dbn5r1/node_modules/vite/dist/node/chunks/dep-b6b8dfbf.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from /home/projects/vitejs-vite-dbn5r1/package.json.

Error: Must use import to load ES Module: /home/projects/vitejs-vite-dbn5r1/postcss.config.ts
require() of ES modules is not supported.
require() of /home/projects/vitejs-vite-dbn5r1/postcss.config.ts from /home/projects/vitejs-vite-dbn5r1/node_modules/vite/dist/node/chunks/dep-b6b8dfbf.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from /home/projects/vitejs-vite-dbn5r1/package.json.

    at createErrRequireEsm (/home/projects/vitejs-vite-dbn5r1/node_modules/ts-node/dist-raw/node-internal-errors.js:46:15)
    at assertScriptCanLoadAsCJSImpl (/home/projects/vitejs-vite-dbn5r1/node_modules/ts-node/dist-raw/node-internal-modules-cjs-loader.js:584:11)
    at registerExtension/require.extensions[ext] (/home/projects/vitejs-vite-dbn5r1/node_modules/ts-node/src/index.ts:1610:29)
    at [object Object]
    at [object Object]
    at [object Object]
    at [object Object]
    at [object Object]
    at [object Object]
    at [object Object]

/home/projects/vitejs-vite-dbn5r1/src/App.vue

Reproduction

https://stackblitz.com/edit/vitejs-vite-dbn5r1?file=postcss.config.ts

Steps to reproduce

Create new vue-ts project with https://vite.new/vue-ts or locally with npm create vite@latest ts-postcss-config -- --template vue-ts

Install ts-node as required by vite to load typescript based config files.

npm install ts-node --save-dev

Adding postcss.config.ts to the root with the contents:

import { defineConfig } from 'vite';

console.log('PostCSS config file has been imported');

export default defineConfig({});

System Info

Run on StackBlitz using the https://vite.new/vue-ts template

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    vite: ^4.1.0-beta.1 => 4.1.0-beta.2

Used Package Manager

npm

Logs

No response

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.

[bluwy]

I don't think there's anything we can do. It's an upstream issue at postcss/postcss-load-config#239. postcss-load-config should use import() in this case if the config is compiled to ESM.

[callumgare]

Ah I see. Hopefully it will be resolved upstream then. Thanks for looking into this :)