Vite not working with `"type": "module"` in `package.json`

Describe the bug

I am trying to create a Node project with "type": "module".

I’ve ported my config files from RequireJS module.exports to modern ES modules export default syntax.

On the console, I am seeing errors like the following:

1:20:56 PM [vite] Internal server error: Failed to load PostCSS config (searchPath: C:/workspace/muffi.net/src/MuffiNet.FrontendReact/ClientApp): [Error] require() of ES Module C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\postcss.config.js from C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js not supported.
Instead change the require of postcss.config.js in C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\postcss.config.js from C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js not supported.
Instead change the require of postcss.config.js in C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js to a dynamic import() which is available in all CommonJS modules.
    at Object.search (C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:22845:43)
    at async resolvePostcssConfig (C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:37590:22)
    at async compileCSS (C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:37361:27)
    at async TransformContext.transform (C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:37010:55)
    at async Object.transform (C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:39317:30)
    at async doTransform (C:\workspace\muffi.net\src\MuffiNet.FrontendReact\ClientApp\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:50037:29)

It looks like require statements are baked into vite\dist\node\chunks\dep-c9998dc6.js?

Reproduction

https://github.com/mindplay-dk/vite-tailwind-issue/commit/60e31c782991d5f4ce4c887cb770c7931f3c02ad

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 19.25 GB / 31.73 GB
  Binaries:
    Node: 16.15.1 - C:\nodejs\node.EXE
    Yarn: 1.22.19 - C:\nodejs\yarn.CMD
    npm: 8.11.0 - C:\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.49)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vitejs/plugin-react: ^1.3.2 => 1.3.2
    vite: ^2.9.14 => 2.9.14

Used Package Manager

yarn

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.

[mindplay-dk]

Thanks! I’m on vacation, but I will give this a shot when I’m back at work in a couple of weeks. 🙂

[sapphi-red]

It worked after changing:

1. Upgrade Vite to 3.0.0, plugin-react to 2.0.0.
2. Change "target": "es5" to "target": "es2015" in tsconfig.js.
3. Changing tailwind.config.js to CJS
   • Change filename to tailwind.config.cjs
   • Change export default config to module.exports = config

It seems tailwind does not support native ESM. Closing as it is already fixed on Vite side and the error is coming from tailwind.