carbon icon indicating copy to clipboard operation
carbon copied to clipboard

Could not find files for / in .next/build-manifest.json

Open 27shutterclicks opened this issue 2 years ago • 3 comments

Describe the bug I followed the Contributing Guidelines to fork the repo and install yarn.

On step 4, when builing and starting the application using yarn dev, I get the error:

Could not find files for / in .next/build-manifest.json

When navigating to localhost:3000, all I see is a black blank page.

Anything I can do to fix this?

To Reproduce Steps to reproduce the behavior:

  1. Fork on Github and clone
  2. Make sure yarn is globally installed (npm install -g yarn)
  3. Run yarn to download required packages
  4. Build and start the application: yarn dev

Expected behavior Access application at localhost:3000

Screenshots Black screen at localhost:3000

Info (please complete the following information):

  • OS: Windows 10
  • Browser : Chrome

27shutterclicks avatar Oct 07 '22 20:10 27shutterclicks

If I refresh the page at localhost:3000 while it is blank, I get a server error:

ModuleError: Module Error (from ./node_modules/next/dist/build/webpack/loaders/error-loader.js):
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).

27shutterclicks avatar Oct 07 '22 21:10 27shutterclicks

In the terminal, I see the error may be related to ./node_modules/codemirror/mode/tiddlywiki/tiddlywiki.css

error - ./node_modules/codemirror/mode/tiddlywiki/tiddlywiki.css
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).

27shutterclicks avatar Oct 07 '22 22:10 27shutterclicks

I somewhat fixed this by hacking away at it in probably no logical fashion. The truth is I am total noob at Node.js, Next.js, modules, etc., and I have no understanding of how everything gets loaded, processed, or anything.

To fix this, I added a few lines to next.config.js, based on what was suggested here: https://josipmisko.com/next-js/global-css-cannot-be-imported-from-files-other-than-your-custom-app#:~:text=Fix%20Next%20misconfiguration

      config.module.rules.push({
        test: /\.css$/,
        use: ['css-loader']
      })

I am aware that css-loader probably doesn't exist, but now the app loads fine at localhost:3000.

Evidently, I am getting a bunch of warnings in the console related to css-loader not found:

Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
...
Module not found: Can't resolve 'css-loader' in 'W:\projects\playground\carbon\carbon'

I am open to suggestions on how to better fix this and I am also curious if it's something specific to my case or is everyone likely to run into this issue?

27shutterclicks avatar Oct 08 '22 21:10 27shutterclicks