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

Question

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;

Answer 1

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.

Answer 2

I encountered this while running Node 10 and was also able to fix it by upgrading Node. For anyone else who encounters this I strongly recommend using the NVM (Node Version Manager) package, that way if other projects you have depend on older versions of Node you can quickly switch between them.

https://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04/

Answer 3

In my case eslint automatically formatted postcss.config.js and it was creating this error. So make sure all of your files are same as defined in tailwind setup.