Vite PostCSS module error when building app in Svelte

Question

I came across this strange error in Svelte; every time I ran npm run dev, this vite error would appear:

[vite] Internal server error: Failed to load PostCSS config (searchPath: /Users/Documents/Personal projects): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: /Users/Documents/Personal projects): [Failed to load PostCSS config] Failed to load PostCSS config (searchPath: /Users/Documents/Personal projects): [Error] Cannot find module 'autoprefixer'

I'm new to vite so it took me an hour of research, to figure out how to export the module, I was able to fix it by creating a postcss.config.cjs file and inside the file add:

module.exports = {
    autoprefixer: {}
}

I hope this helps anyone that comes across the same/similar error.

Theory

Answer 1

Create postcss.config.cjs file and add:

module.exports = {
    autoprefixer: {}
}

The reason why it wasn't building, is because svelte wasn't exporting the autoprefixer module

Theory

CommonJS files when using vite need to be explicitly named as .cjs. See issue on GitHub – Amoritta

Answer 2

I solved this issue by deleting the node_modules directory, and ran npm i again.

Whitish

Answer 3

I had similar problem while following a tutorial and i fixed this way.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

npm i

and then finally

npm run dev

Bethlehem

Answer 4

1. Go to your Root folder (Root folder contains. folders like src)
2. Create a new file, name it postcss.config.js
3. Paste this into the postcss.config.js file

module.exports = {
        autoprefixer: {}
    }

4. Save, delete npm_modules folder if its there
5. go to root folder using cd in terminal, run npm install
6. run ng serve

Congeal

Answer 5

Just to add this to your package.json

"type": "module",

about "scripts"

Martita

Answer 6

You can also switch to entirely TypeScript

postcss.config.ts

import tailwindConfig from './tailwind.config'
import autoprefixer from 'autoprefixer'
import tailwind from 'tailwindcss'

export default {
  plugins: [tailwind(tailwindConfig), autoprefixer],
}

Update vite.config.ts with postcss as a css config

...
import postcss from './postcss.config'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss,
  },
})

Update tsconfig.node.json to include the config

{
  ...
  "include": [
    "vite.config.ts",
    "postcss.config.ts",
    "tailwind.config.ts"
  ]
}

Example From GitHub

Scheller