Next.js Discord

Discord Forum

Next.js and Tailwind CSS Compilation Error: ModuleParseError with Unexpected Character '@'

Unanswered
Greater Pewee posted this in #help-forum
Open in Discord
Greater PeweeOP
I'm encountering an issue while compiling my Next.js application with Tailwind CSS. The specific error message is:

index.tsx:935 Uncaught 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.

&913086567042674719 base;
| &913086567042674719 components;
| &913086567042674719 utilities;

Relevant Configurations
tailwind.config.js

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

postcss.config.js

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

next.config.js
/ @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
loader: 'custom',
remotePatterns: [
{
protocol: 'https',
hostname: 'cc.xxxxx.com',
port: '',
pathname: '/abcdefdr/',
},
],
},
output: 'standalone',
swcMinify: true,
compiler: {
removeConsole: process.env.NODE_ENV === 'production',
},
experimental: {
outputStandalone: true,
},
};

module.exports = nextConfig;

Dockerfile
Here's my current Dockerfile used for building the application:

FROM node:20 AS base

# Dependency Stage
FROM base AS deps

USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]


Could someone help identify what might be causing this error and suggest how I can resolve it? I appreciate any advice or guidance on how to approach fixing this issue.

Thank you!

8 Replies

@Greater Pewee I'm encountering an issue while compiling my Next.js application with Tailwind CSS. The specific error message is: index.tsx:935 Uncaught 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. > <@&913086567042674719> base; > | <@&913086567042674719> components; > | <@&913086567042674719> utilities; Relevant Configurations tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}', './pages/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: {}, }, plugins: [], }; postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, images: { loader: 'custom', remotePatterns: [ { protocol: 'https', hostname: 'cc.xxxxx.com', port: '', pathname: '/abcdefdr/**', }, ], }, output: 'standalone', swcMinify: true, compiler: { removeConsole: process.env.NODE_ENV === 'production', }, experimental: { outputStandalone: true, }, }; module.exports = nextConfig; Dockerfile Here's my current Dockerfile used for building the application: FROM node:20 AS base # Dependency Stage FROM base AS deps USER nextjs EXPOSE 3000 ENV PORT 3000 CMD ["node", "server.js"] Could someone help identify what might be causing this error and suggest how I can resolve it? I appreciate any advice or guidance on how to approach fixing this issue. Thank you!
joulev
do you have tailwindcss, postcss and autoprefixer installed in package.json?
Greater PeweeOP
Hi, yes sr. Look my Package.json

{
"name": "web_tinder_cuentas",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"lint": "next lint"
},
"dependencies": {
"cloudinary": "^2.2.0",
"pg": "^8.11.5",
"puppeteer": "^22.10.0",
"puppeteer-core": "^22.10.0",
"puppeteer-web": "^0.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-intl": "^6.6.6",
"react-multi-carousel": "^2.8.5",
"react-redux": "^9.1.1",
"redux": "^5.0.1",
"socket.io": "^4.7.5",
"socket.io-client": "^4.7.5",
"stripe": "^14.23.0",
"styled-components": "^6.1.8",
"utf-8-validate": "^5.0.10",
"uuid": "^9.0.1",
"web3": "^4.7.0",
"ws": "^8.17.0",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.13",
"autoprefixer": "^10.4.19",
"chai": "^5.1.0",
"css-loader": "^7.1.2",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"ethereum-waffle": "^4.0.10",
"file-loader": "^6.2.0",
"postcss": "^8.4.38",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-import": "^16.1.0",
"postcss-loader": "^8.1.1",
"postcss-nesting": "^12.1.5",
"postcss-preset-env": "^9.5.14",
"sass": "^1.77.6",
"style-loader": "^4.0.0",
"tailwindcss": "^3.4.4",
"url-loader": "^4.1.1"
}
}
joulev
that's most weird. the only thing out of the ordinary here i can see is your server.js... why are you not using next dev and next start for the dev and start commands respectively?
Greater PeweeOP
its because im usign custom server due to socket.io

Something like this:

// D:\IAs\Websites\Web_CuentasTinderVentas\Frontend\web_tinder_cuentas\server.js
import { createServer } from 'http';
import { parse } from 'url';
import next from 'next';
import { Server } from 'socket.io';

// Añada esto al principio de server.js
process.on('unhandledRejection', (reason, promise) => {
console.log('Unhandled Rejection at:', promise, 'reason:', reason);
});

const dev = process.env.NEXT_PUBLIC_NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const setupSocket = (server) => {
console.log('Inicializando servidor Socket.IO...');
const io = new Server(server, {
path: '/socket.io',
cors: {
origin: dev ? '*' : process.env.NEXT_PUBLIC_CORS_ORIGIN, // Ajusta el dominio en producción
methods: ['GET', 'POST']
},
});


io.on('connection', (socket) => {
console.log('Cliente conectado:', socket.id);

socket.on('disconnect', () => {
console.log('Cliente desconectado:', socket.id);
});

// Escuchar evento 'producto_creado' y emitirlo a todos los clientes conectados
socket.on('producto_creado', (producto) => {
// console.log('Nuevo producto creado:', producto);
io.emit('producto_creado', producto);
});
});
console.log('Servidor Socket.IO inicializado correctamente');

return io;
};

app.prepare().then(() => {
const server = createServer((req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
});

const io = setupSocket(server);

server.listen(process.env.NEXT_PUBLIC_SERVER_PORT, (err) => {
if (err) throw err;
console.log(> Servidor HTTP y Socket.IO listos en http://${process.env.NEXT_PUBLIC_SERVER_IP}:${process.env.NEXT_PUBLIC_SERVER_PORT});
});
});

export default app;
Greater PeweeOP
But if i do that. All my imports in all my components and files .js have to change right?

Im usign somethin like this
import { useRouter } from 'next/navigation';
import ErrorModal from './ErrorModal';
import MetaMaskWarning from './MetaMaskWarning';
import { depositBalance } from '../services/balanceModalService';
import { useAuth } from '../context/AuthContext';