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
Solved the issue, actually had to deploy in production mode.
Shortly:
next.config.js :
Then move the
.next/standalone
folder to plesk and set nodejs to useserver.js
as starting binary. You might also need to copy thepublic
and.next/static
folders in app root folder.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?