Home > Mobile >  npx create-next-app doesn't run due to Global CSS error?
npx create-next-app doesn't run due to Global CSS error?

Time:07-13

I am creating a next app using the npx create-next-app command but getting the following error w/o any changes.

ERROR:

npm run dev
npm WARN config global `--global`, `--local` are deprecated. Use `--location=glo
bal` instead.

> [email protected] dev
> next dev

    ready - started server on 0.0.0.0:3000, url: http://localhost:3000
    (node:23324) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use
    new ModuleGraph API
    (Use `node --trace-deprecation ...` to show where the warning was created)
    error - ../../#HACKYOURBIZ/test/styles/globals.css
    Global CSS cannot be imported from files other than your Custom <App>. Due to th
    e Global nature of stylesheets, and to avoid conflicts, Please move all first-pa
    rty global CSS imports to pages/_app.js. Or convert the import to Component-Leve
    l CSS (CSS Modules).
    Read more: https://nextjs.org/docs/messages/css-global
    Location: ..\..\#HACKYOURBIZ\test\pages\_app.js

Any ideas as to how I can get this up and running?

Some of my older Next Apps seem to work just fine but when I create a new one ERROR

Here is package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.0"
  }
}

CodePudding user response:

Ok, so I finally found the source of the error.

The problem was that the parent directory of my project contained the '#' character (Location: ..\..\#HACKYOURBIZ\test\pages\_app.js). After removing the '#', the program compiled successfully.

  • Related