Next.js: Broken build on `9.5.4`

[nfantone]

Bug report

Describe the bug

After upgrading to 9.5.4 from 9.5.3, next build is no longer working for me. I'm also using [email protected] + postcss.

To Reproduce

# Running on `9.5.3` (works fine)
yarn dev

$ cross-env NEXT_TELEMETRY_DISABLED=1 NODE_ENV=development next -p 8090
info  - Loaded env from /dev/project/.env.local
ready - started server on http://localhost:8090

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefault
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
event - compiled successfully

# Upgrade to `9.5.4` and try again
rm yarn.lock
yarn add next@latest
yarn dev

$ cross-env NEXT_TELEMETRY_DISABLED=1 NODE_ENV=development next -p 8090
info  - Loaded env from /dev/project/.env.local
ready - started server on http://localhost:8090

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefault
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
error - ./src/styles/core.css (./node_modules/next/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./src/styles/core.css)
Error: Can't resolve '/fonts/la-brands-400-98099f67.eot' in '/dev/project/src/styles'
event - build page: /_error
wait  - compiling...
error - ./src/styles/core.css (./node_modules/next/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./src/styles/core.css)
Error: Can't resolve '/fonts/la-brands-400-98099f67.eot' in '/dev/project/src/styles'
Error: Cannot find module '/dev/project/.next/build-manifest.json'

Then it starts looping on a MODULE_NOT_FOUND exception

Require stack:
- /dev/project/node_modules/next/dist/next-server/server/load-components.js
- /dev/project/node_modules/next/dist/next-server/server/api-utils.js
- /dev/project/node_modules/next/dist/next-server/server/next-server.js
- /dev/project/node_modules/next/dist/server/next.js
- /dev/project/node_modules/next/dist/server/lib/start-server.js
- /dev/project/node_modules/next/dist/cli/next-dev.js
- /dev/project/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at loadComponents (/dev/project/node_modules/next/dist/next-server/server/load-components.js:1:886)
    at DevServer.findPageComponents (/dev/project/node_modules/next/dist/next-server/server/next-server.js:54:189)
    at DevServer.renderErrorToHTML (/dev/project/node_modules/next/dist/next-server/server/next-server.js:103:114)
    at DevServer.renderErrorToHTML (/dev/project/node_modules/next/dist/server/next-dev-server.js:34:974)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/dev/project/node_modules/next/dist/next-server/server/load-components.js',
    '/dev/project/node_modules/next/dist/next-server/server/api-utils.js',
    '/dev/project/node_modules/next/dist/next-server/server/next-server.js',
    '/dev/project/node_modules/next/dist/server/next.js',
    '/dev/project/node_modules/next/dist/server/lib/start-server.js',
    '/dev/project/node_modules/next/dist/cli/next-dev.js',
    '/dev/project/node_modules/next/dist/bin/next'
  ]
}

Expected behavior

Build should continue to work. No other change was introduced in the failing project.

• Reverting back to 9.5.3 solves the issue.
• The file it's complaining about (/fonts/la-brands-400-98099f67.eot) it's actually there and has always been.
• next build fails with the exact same error.

System information

• OS: macOS 10.15.7 (19H2)
• Version of Next.js: 9.5.4
• Version of Node.js: v12.19.0

[ijjk]

~Hi, I'm not able to reproduce on a minimal project with Next.js v9.5.4 and tailwindcss v1.8.12. Can you provide a repo with a minimal reproduction so we can investigate this further?~

Looks like minimal reproduction is using url() to a non-relative file in a CSS/SCSS file

After investigation this seems to be from breaking changes in v4.0.0 of css-loader which was updated in https://github.com/vercel/next.js/pull/16973

[spencewood]

I am also running into this issue after upgrade. The problem seems to lie in importing fonts via url:

@font-face {
  font-family: "somefont";
  src: url("/fonts/some-font.eot"); /* from public directory */
}

It previously could find fonts on 9.5.3, but with 9.5.4 the css-loader cannot find these paths.

[UncleClapton]

I have this error in my css as well.

using this @font-face config:

@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('/static/fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
}

with the ttf file being located at <project_root>/public/static/fonts/OpenSans/OpenSans-Regular.ttf. results in the following error:

error - ./src/scss/app.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-7-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./node_modules/resolve-url-loader??ref--6-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-7-4!./src/scss/app.scss)
Error: Can't resolve '/static/fonts/OpenSans/OpenSans-Regular.ttf' in '<project_root>/src/scss'

9.5.3 does not give this error.

[nfantone]

Confirmed. Exactly my case. Thanks @UncleClapton and @spencewood for jumping in.

[mjr]

Minimal reproduction repo.

https://codesandbox.io/s/great-margulis-m5tmn

@ijjk

[dutchenkoOleg]

Faced with same error

Error: Can't resolve '/pic/decor-top.svg'

I guess problem in updated sass-loader after #16970

[flayks]

Same issues with loading fonts in SCSS files:
Error: Can't resolve '/fonts/sans-regular.woff2' in '/Users/xxx/sites/xxx/styles'

[flayks]

I changed my SCSS variables (responsible for importing files) from "/directory" to "/public/directory" and it seems to fix the problem (for now at least) 👀

/* Directories
========================================================================== */
$dir-img: "/public/images";
$dir-fonts: "/public/fonts";

[dutchenkoOleg]

I cannot understand, why compiler trying to resolve absolute urls?
for inlining file in JS?

@flayks if hack with /public/images works - that meens that loader inlining files...

but I do not need this. I just want to use background: url('/path/to/my-file.ext') in normall CSS way.

[RobbyUitbeijerse]

Downgrading css-loader to 3.6.0 locally does resolve the issue, so #16970 indeed seems to be the cause (as mentioned by @dutchenkoOleg)

[edit] it actually seems to be intended: https://github.com/webpack-contrib/css-loader/issues/1153#issuecomment-685730357

[dutchenkoOleg]

or #16973 (@ijjk reported earler)

[nfantone]

Is sass-loader affecting css-loader? For the record, I'm not using SASS on my originally broken project.

Regardless, the release notes for the bumped sass-loader version say:

Bug Fixes

• handle absolute windows path in source maps

So it'd make sense to be related to this.

EDIT

I see that https://github.com/vercel/next.js/pull/16973, as pointed out by @dutchenkoOleg _does change_ css-loader version.

[timneutkens]

Let's stop spamming this issue as the root cause has been highlighted.

As @ijjk said it's related to css-loader being upgraded. @ijjk will work on a fix today.

[ijjk]

Hi, this should be corrected in the latest canary of Next.js v9.5.5-canary.0, please upgrade and give it a try!

[dutchenkoOleg]

It's alive!
Thanks

[nfantone]

Working great for me, as well! Thanks so much @ijjk.

[pkellner]

I know you guys are all over this issue, but ... I'm getting hammered with folks using my courses on Pluralsight and the examples are now completely dead. It's no different then your with-tailwindcss example when I add to the styles/index.css a simple class definition like this:

.heartredbutton {
  background-image: url('/heart-red.png');
}

and it expects to pick up the file from the /public folder. Instead, the app crashes with

error - ./styles/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./styles/index.css)

Is there a work-a-round I can give people? Will this magically start working? I have in my package.json 9.5.4 for next version.

[timneutkens]

https://github.com/vercel/next.js/issues/17701#issuecomment-705830332

You can use yarn add next@canary to use the latest canary release. A new release will be published later today.

[dutchenkoOleg]

@pkellner install canary version

npm i next@canary

[pkellner]

Thanks @timneutkens , I'm sure I have lots of other people with breaking builds who just think I uploaded broken source. When I update my package.json file to "next": "^9.5.5-canary.0", the error goes away.

Should I immediately update all my example package.json entries to that 9.5.5 canary? Will 9.5.4 magically start working after something changes in next? I appreciate the fast work around but the next step for me is very important as I'm sure there are at least 50 people out there who are doing my demos saying WTF?

Also, had I left a package-lock.json out there, would that have avoided all this? I don't ever check that lock file into my examples repo following the example of how Next setups up there examples repo (which also is broken right now)

[ijjk]

Hi, a new patch release v9.5.5 has been published which contains the fix for this issue

[pkellner]

It's totally an anti-pattern to leave "thank you" on an issue because it adds no value. But... @ijjk @timneutkens ... THANK YOU