carbon
carbon copied to clipboard
Could not find files for / in .next/build-manifest.json
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:
- Fork on Github and clone
- Make sure yarn is globally installed (npm install -g yarn)
- Run yarn to download required packages
- 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
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).
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).
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?