typescript - Next.js build mislukt te compileren (HookWebpackError: <css input>:61:1: Gemiste puntkomma)

Het probleem:

next.js kan het build-commando niet uitvoeren, ook al kan ik het zonder problemen in de ontwikkelingsmodus draaien. Er wordt gezegd dat er een puntkomma ontbreekt in de css. Natuurlijk ontbreekt er geen, het zou niet compileren in de dev-modus als dat zo was. En ter algemene informatie: ik gebruik css-modules voor dit project. Dus al mijn css is name.module.css.

hier is de waarschuwing die de console geeft, en het is de volledige stacktrace. Verandert ook niet als ik de --debug vlag gebruik. en ik voer npm run build uit, wat overeenkomt met het script "build": "next build" in mijn package.json.

> [email  build
> next build

info  - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
info  - Creating an optimized production build  
Failed to compile.

HookWebpackError: <css input>:61:1: Missed semicolon


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/Users/name/Documents/coding_files/personal_projects/projectName/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Wat ik geprobeerd heb:

Eerst keek ik hier naar het probleem. Ik vond een paar berichten met vergelijkbare fouten.

Post 1 Van postclarificatie: dit is mijn volledige stacktrace weergegeven.

Post 2 Ik heb npm install uitgevoerd en het vond niets om bij te werken. en ik veranderde mijn import naar "next/app" in plaats daarvan. Dat hielp ook niet.

Afgezien van berichten heb ik een duik genomen in de next.js-code in node_modules om te proberen te begrijpen wat er aan de hand was, maar ik kwam nergens omdat het een webpack-ding is, wat ik niet had beseft. Ik zag ook een ander bericht dat ik niet kan vinden waarin stond dat deze fout soms voorkomt bij het importeren van Google Fonts, dus heb ik al mijn Google Fonts uitgeschakeld en dit gebeurt nog steeds. Ik begrijp niet helemaal hoe het fouten kan geven bij het bouwen, maar niet bij het ontwikkelen.

Afsluitende gedachten

Ik vermoed dat er ergens iets in een bestand wordt geïmporteerd, omdat dat het probleem leek te zijn in het andere bericht dat ik las (hetgene dat ik niet kan vinden), maar ik kan het niet vinden. Dat, of het ontbreken van mijn next.config.js-bestand veroorzaakt het probleem (ik ben een beginner met next.js). Ook gebruik ik typescript, als dat helpt.

Elke hulp wordt echt gewaardeerd.

Dank je iedereen 😄

Antwoord #1

Ik kreeg dezelfde fout. Om het probleem aan te pakken heb ik alle imports van componenten die hun scss-bestanden in de component laden die ik verdacht het probleem te veroorzaken, uitgecommentarieerd. Vervolgens begon ik componenten één voor één uit te commentariëren en vond ik de component die de fout veroorzaakte. Toen heb ik de inhoud van het scss-bestand van die component uitgecommentarieerd en begon ik de stijlen opeenvolgend weer uit te commentariëren en vond uiteindelijk de regel die dit veroorzaakte.

In mijn geval was dit de animatie CSS-eigenschap die de verkeerde volgorde van parameters had.