Next.js Discord

Discord Forum

Issue with running Next.js inside Nest.js framework - Unexpected character ‘@’ error

Unanswered
Multiflora rose seed chalcid posted this in #help-forum
Open in Discord
Avatar
Multiflora rose seed chalcidOP
Hello everyone,

I’m currently facing an issue with running a Next.js web application inside a Nest.js framework. When I run Next.js with standard parameters (i.e., through npm run dev), everything works perfectly. However, when I try to run Next.js inside Nest.js, the settings get messed up and I encounter an error: Module parse failed: Unexpected character '@' (1:0).

The problem seems to be specifically related to the use of @import and :root in my CSS file. Here are some specific questions I have:

What are the ways to enable support for such formats in a CSS file?
How can I add a global.css file through configuration (not through the head component)?
How can I wrap a CSS file so that it’s imported differently and doesn’t cause an error?

// layout.tsx
import React, { ReactNode } from 'react'
import '@/styles/globals.css';
import { Metadata } from 'next'
import LanguageProvider from '@/context/Language';


// main.ts / NEST
import { NestFactory } from '@nestjs/core';
import { FastifyAdapter, NestFastifyApplication } from '@nestjs/platform-fastify';
import { Request, Response, NextFunction } from 'express';
import { AppModule } from './app.module';
import path = require('path');

// eslint-disable-next-line @typescript-eslint/no-var-requires
const next = require('next');
async function run() {
  const app = await NestFactory.create<NestFastifyApplication>(
    AppModule,
    new FastifyAdapter(),
  );
  
  const nextApp = next({
    dev: true,
    dir: path.resolve(__dirname, '..\\..\\client')
  });
  const handle = nextApp.getRequestHandler();
  await nextApp.prepare();

  app.use((request: Request, response: Response, next: NextFunction) => {
    if (!request.url.startsWith('/api'))
      return handle(request, response);
    else
      next();
  });

  app.setGlobalPrefix('api');
  await app.listen(process.env.PORT || 3000);
}
run();

4 Replies

Avatar
Multiflora rose seed chalcidOP
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "dotenv": "^16.4.5",
    "next": "^14.1.1",
    "react": "^18",
    "react-dom": "^18",
    "sharp": "^0.33.2",
    "universal-cookie": "^7.1.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "typescript": "^5"
  }
}
{
  "name": "nest-app",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "build": "prisma generate && nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@nestjs/common": "^10.0.0",
    "next": "^14.1.3",
  },
  "devDependencies": { },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node"
  }
}
 â—‹ Compiling / ...
 ⨯ ./styles/globals.css
Module parse failed: Unexpected character '@' (1:0)