Issue with running Next.js inside Nest.js framework - Unexpected character ‘@’ error
Unanswered
Multiflora rose seed chalcid posted this in #help-forum
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?
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
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)