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.

> @tailwind base;
> | @tailwind components;
> | @tailwind utilities;

Relevant Configurations

1. 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: [],
   };
   

2. postcss.config.js

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

3. 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,
       },
   };
   

Dockerfile

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

FROM node:20 AS base

# Dependency Stage
FROM base AS deps
RUN apt-get update && apt-get install -y make gcc g++ python3
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci --cache .npm
RUN npm install sharp -D tailwindcss@^3.0.0 postcss autoprefixer --cache .npm

# Build Stage
FROM base AS builder
WORKDIR /app
RUN if [ -d .next ]; then rm -rf .next; fi
COPY --from=deps /app/node_modules ./node_modules
COPY tailwind.config.js ./
COPY postcss.config.js ./
COPY . .
RUN npm run build --cache .npm

# Execution Stage
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
RUN groupadd --system --gid 1001 nodejs
RUN useradd --system --uid 1001 nextjs
COPY --from=builder /app/tailwind.config.js ./
COPY --from=builder /app/postcss.config.js ./

COPY --from=builder /app/public ./public
RUN mkdir .next
RUN chown -R nextjs:nodejs .next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder /app/server.js ./
COPY contracts/Payments.sol ./contracts/
COPY --from=builder /app/artifacts ./artifacts
COPY --from=builder /app/pages ./pages

COPY --from=builder /app/src ./src
COPY --from=builder /app/next.config.js ./

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

I’ve tried various solutions including verifying Next.js and Tailwind CSS configurations, ensuring all loaders are properly configured, and running the build locally and in Docker. However, the issue persists with the same module parse error.

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!