skip to Main Content

I’ve setup a react app (via create-react-app), which I deployed via Plesk (which I don’t know much, but I have to use that…), but it seems nextjs doesn’t understand tailwind css. All is fine locally.

Here’s the error I get:
I have the following error message:

Server Error

ModuleParseError: Module parse failed: Unexpected character '@' (1:0)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js
You may need an additional loader to handle the result of these loaders.
> @tailwind base;
| @tailwind components;
| @tailwind utilities;

tailwind.conf.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

next.conf.js

/** @type {import('next').NextConfig} */

const nextConfig = {}

module.exports = nextConfig

postcss.conf.js

const { join } = require('path');

module.exports = {
  plugins: {
    tailwindcss: {
        config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
}

From what I’ve seen googling around, this could be a webpack problem, but I don’t have any config file…

Any idea?

(I was wondering if using node 16.20.1 could be an issue?)

2

Answers


  1. Chosen as BEST ANSWER

    Solved the issue, actually had to deploy in production mode.

    Shortly:

    next.config.js :

    module.exports = {
      output: 'standalone',
    }
    

    Then move the .next/standalone folder to plesk and set nodejs to use server.js as starting binary. You might also need to copy the public and .next/static folders in app root folder.


  2. I’m also facing this issue and followed you steps . Could you please explain it briefly what exactly need to be done to resolve it?

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search