"require() of ES modules is not supported" in case PostCSS has its own config file #12472
Description
I'm using React Router as a...
framework
Reproduction
- create new react router app by running
npx create-react-router@latest my-react-router-app - cd into the project and create
postcss.config.ts, move related config fromvite.config.tsintopostcss.config.ts - run
npm run dev - it throws an error with request to istall
ts-node, install it, re-runnpm run dev - observe an issue
System Info
System: OS: macOS 15.1.1 CPU: (12) arm64 Apple M3 Pro Memory: 346.23 MB / 36.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 23.3.0 - /opt/homebrew/opt/node@22/bin/node Yarn: 1.22.22 - /opt/homebrew/bin/yarn npm: 10.9.1 - /opt/homebrew/opt/node@22/bin/npm Browsers: Chrome: 131.0.6778.87 Safari: 18.1.1 npmPackages: @react-router/dev: ^7.0.2 => 7.0.2 @react-router/node: ^7.0.2 => 7.0.2 @react-router/serve: ^7.0.2 => 7.0.2 react-router: ^7.0.2 => 7.0.2 vite: ^5.4.11 => 5.4.11Used Package Manager
npm
Expected Behavior
while I am aware that there is existing a problem with ESM-based config of PostCSS in vite pre-v6 (here is the link) related to vite vendoring postcss-load-config version as part of its own bundle. at a time I succeeded to workaround it by having postcss.config.ts but importing it into vite.config.ts like this (i prefer to keep configs in separate files to lower cognitive overhead of having to deal with one gigantic config)
// ... import postcss from "./postcss.config.ts"; export default defineConfig({ // ... css: { postcss }, });the same workaround doesn't work for @react-router/dev: despite me importing PostCSS manually it seems like react-router still tries to load postcss config from a file to pass it to vite by itself. the only way to make it work currently i suppose is to avoid having a separate postcss.config.ts at all and keeping it as part of vite config
the expected behavior would be to load postcss config from a file not just when it is there, but also when postcss isn't set in vite config manually
Actual Behavior
[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/modror/git/my-react-router-app): [Error] Must use import to load ES Module: /Users/modror/git/my-react-router-app/postcss.config.ts require() of ES modules is not supported. require() of /Users/modror/git/my-react-router-app/postcss.config.ts from /Users/modror/git/my-react-router-app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.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 /Users/modror/git/my-react-router-app/package.json. Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/modror/git/my-react-router-app/postcss.config.ts require() of ES modules is not supported. require() of /Users/modror/git/my-react-router-app/postcss.config.ts from /Users/modror/git/my-react-router-app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.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 /Users/modror/git/my-react-router-app/package.json. at createErrRequireEsm (/Users/modror/git/my-react-router-app/node_modules/ts-node/dist-raw/node-internal-errors.js:46:15) at assertScriptCanLoadAsCJSImpl (/Users/modror/git/my-react-router-app/node_modules/ts-node/dist-raw/node-internal-modules-cjs-loader.js:584:11) at Object.require.extensions.<computed> [as .ts] (/Users/modror/git/my-react-router-app/node_modules/ts-node/src/index.ts:1610:5) at Module.load (node:internal/modules/cjs/loader:1303:32) at Function._load (node:internal/modules/cjs/loader:1117:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:218:24) at Module.require (node:internal/modules/cjs/loader:1325:12) at require (node:internal/modules/helpers:136:16) at file:///Users/modror/git/my-react-router-app/node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:33810:16] { code: 'ERR_REQUIRE_ESM' }