He tenido un proyecto ejecutándose en Nextjs 10 durante el último año. Actualicé a Nextjs 11.1.1 y cuando ejecuto "npm run dev" aparece el siguiente error:

 Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules). Read more: https://nextjs.org/docs/messages/css-global Location: pages\_app.js

Ya he leído mucho sobre este problema y la única importación de css global que tengo está en _app.js. Aquí está mi _app.js reducido:

 import '../styles/globals.scss' export default function App() { <div> hello </div> }

Y mi globals.scss reducido:

 .test{ border:5px black; }

Y mi archivo package.json

 { "name": "cabbieadvocate", "version": "0.1.0", "private": true, "engines": { "node": "16.0.0", "npm": "7.10.0" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start -p $PORT" }, "cacheDirectories": [ ".next/cache", "node_modules" ], "dependencies": { "@prisma/client": "^2.22.1", "@uppy/core": "^2.0.2", "@uppy/react": "^2.0.2", "@uppy/xhr-upload": "^2.0.2", "bulma": "^0.9.2", "googleapis": "^73.0.0", "is-buffer": "^2.0.5", "lodash": "^4.17.21", "multer": "^1.4.2", "mysql": "^2.18.1", "next": "11.1.1", "next-auth": "^3.20.1", "postmark": "^2.7.4", "react": "^17.0.2", "react-dom": "^17.0.2", "react-phone-number-input": "^3.1.21", "react-visibility-detector": "^1.1.1", "react-visibility-sensor-v2": "^1.0.0", "sass": "^1.32.12", "twilio": "^3.63.0", "validator": "^13.6.0" }, "devDependencies": { "node-jose-tools": "^1.6.28", "prisma": "^2.22.1" } }

Esto no tiene ningún sentido, por favor ayuda.