[vite] Internal server error: Failed to load PostCSS config

[lanzoninicola]

Qwik Version

"@builder.io/qwik": "0.0.38", "@builder.io/qwik-city": "0.0.23"

Operating System (or Browser)

Win10

Node Version (if applicable)

16.13.1 (Currently using 64-bit executable)

Which component is affected?

Starters / CLI

Expected Behaviour

Opening the initial page in the browser

Actual Behaviour

Steps to reproduce from the terminal:

1. npm init qwik@latest

2. Select a name to the project

3. Select starter: Qwik city

4. Select server: Cloudflare Pages

5. Select features: Prettier, Tailwindcss

6. Move to the project folder

7. Run npm install

8. Run npm start

Additional Information

Full error output: qwik_terminal_output.txt

[lanzoninicola]

I don't know, but it seems related to vitejs/vite#5316

[dacki]

I ran into the same issue on linux. Following the error message I could at least rename the files to postcss.config.cjs (or postcss.config.mjs) and tailwind.config.cjs (or tailwind.config.mjs) as a workaround.

[nnelgxorz]

Qwik City is using Vite 3 now, which went all in on ESM. CommonJS files need to be explicitly named as .cjs, like @dacki said. 👍

[chmich]

had the same error. i removed the postcss.config.js and it works.
Vite 3.1.3

[YohannesTz]

Thanks! also worked for me too!

[AGirlHasNoName100]

mee too @chmich

[PhytonNet]

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

[xuyaofang]

mee too @chmich
Vite 3.2.0

[claudioares]

Tive esse erro usando o linux ubuntu. Eu removi trocando a extensão .js do arquivo (postcss.config.js) para extensão .cjs ( postcss.config.cjs).

[Aprotix]

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

This worked instantly

[georginklv]

I have the same problem with vuetify 3, none of this above works for me. Any ideas ?

[Jays0x]

I had the same issue but when I removed postCSS.config file it worked!

[vinayakkuradia]

For those who are trying to make Tailwind work with Vite, follow below steps:

• Rename postcss.config.js to postcss.config.cjs (keep tailwind.config.js as it is)
• Change the content of postcss.config.cjs as follows:
  module.exports = ({ env }) => ({ plugins: [ require('tailwindcss')(), require('autoprefixer')() ] })

The above is array format for plugins.
Ref: Vite Postcss Config Postcss Load Config

[evn-seyednov]

In my case delete type: mode from package.json resolved the issue

[m-tufail]

vite 4.3.6
instead of cjs use mjs extension.

[phukao]

Add
"type": "module"
to package.json

[chmich]

What @phukao said also solved another problem for me. Only way to get svelte to run on vite.

[sathishg1990]

``dfdf

[pedroferreira37]

@chmich, I'm using Svelte on WSL2. I was getting the same error, but I just run npm install -D tailwindcss postcss autoprefixer and it worked.

[Ishan-Sandaruwan]

had the same error. i removed the postcss.config.js and it works. Vite 3.1.3

its worked

[jaceksl1]

had the same error. i removed the postcss.config.js and it works. Vite 3.1.3

the best solution

[nireve]

Resolved this by upgrading to postcss@8.4.28 and tailwind@3.3.3 (on vite@3.1.3).

[DavilmanXD]

I ran into the same issue on linux. Following the error message I could at least rename the files to postcss.config.cjs and tailwind.config.cjs as a workaround.

Thaaaaaaaaaaaaaaaaaaaaks

[nasrulhazim]

• module.exports = ({ env }) => ({ plugins: [ require('tailwindcss')(), require('autoprefixer')() ] })

nice. it works. thank you so much.

[eugene-makarov]

Replacing module.exports with export default worked for me

// postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

[akberqureshi361]

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

the best solutions thank you

[prathu9]

Replacing module.exports with export default worked for me

// postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

This is bext solution.

[adamaslan]

not working for me
"postcss": "^8.4.38",
"tailwindcss": "^3.4.1",
"vite": "^5.2.0"

my error is similar tho:
[vite] Internal server error: [postcss] Unexpected token, expected "(" (4:16)
Plugin: vite:css
File: /Users/adamaslan/code/fractal/three-fun/src/index.css:undefined:NaN

[wmertens]

@adamaslan looks like there's a missing ( on line 4 in your index.css file that it doesn't expect.

[johnston75]

VITE v4.5.3. I rename postcss.config.js and this works for me. thanks....

Anyway, there is still no fixed solution to this problem, the solutions still vary. I don't know the root cause.

[KING9045]

For those who are trying to make Tailwind work with Vite, follow below steps:

* Rename `postcss.config.js` to `postcss.config.cjs` (keep `tailwind.config.js` as it is)

* Change the content of `postcss.config.cjs` as follows:
  `module.exports = ({ env }) => ({ plugins: [ require('tailwindcss')(), require('autoprefixer')() ] })`

The above is array format for plugins. Ref: Vite Postcss Config Postcss Load Config

I had same issue and it worked for me using the above reference

[VybzTech]

I ran into the same issue on linux. Following the error message I could at least rename the files to postcss.config.cjs and tailwind.config.cjs as a workaround.

This helped me too 19/04/24

[willzfrank]

These are the steps that worked for me:

1. I converted postcss.config.js to postcss.config.cjs.
2. In my package.json, I updated "type": "module" in my package.json.
3. I updated my tailwind.config.js file as follows:

/** @type {import('tailwindcss').Config}*/
export const content = ['./src/**/*.{js,jsx,ts,tsx}']
export const theme = {
  extend: {},
}
export const plugins = []

4. Finally, I ran npm run dev.

[omerwaqaskhan]

"postcss": "^8.4.38",
"postcss-import": "^16.1.0",
"tailwindcss": "^3.4.3",
"vite": "^5.2.10"

Only deleting the file postcss.config.js works.
Nothing else works

[andreakouakou09]

with VITE 4.5.3 Rename postcss.config.js to `postcss.config.mjs

[Michaecyber]

removed the postcss.config.js and it will works.