Error: Loading PostCSS Plugin failed: Invalid or unexpected token (Vue.js, tailwind css)

Issue

Cloned my repo from github as working from a new machine, installed all the dependencies for my project but throwing up this error and not sure what is going on or how to fix it. Have tried uninstalling all node modules and reinstalling. Reinstalled postCSS to version 8 as is recommended. Any ideas?

Error

 ERROR  Failed to compile with 1 error                                                 17:43:02

 error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Invalid or unexpected token

(@/home/project/postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.23:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Solution

I got the same error when I tried deploying my Vue app to Digital Ocean droplet. Although my app was building and running perfectly in my local machine, it wasn’t working in the server machine.

Then I checked my Node version which was v14.17.1 in my local machine but in my server a different version was running (probably v10.0.1). After I upgraded my Node version in my server to v14.17.1 I was able to build and run exactly as I did in my local machine.

So I would suggest you to check if the Node version is similar, if not then update and try it again. I hope it works for you.

I also tried uninstalling and re-installing all the dependencies, re-installed PostCSS 8.0 as well but none of it worked. Only after I used the same node version it was running perfectly in the server as it did in my local machine.

Answered By – Shihab

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0