next.js: Broken build on `9.5.4`

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 tailwindcss@1.8.12 + 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 21
Comments: 23 (15 by maintainers)

Commits related to this issue

Revert "Bump next from 9.5.3 to 9.5.4" This reverts commit 7e15a577 See: https://github.com/vercel/next.js/issues/17701 — committed to mrtnzlml-archive/kochka.com.mx by mrtnzlml 4 years ago
Handle css-loader file resolving change (#17724) This is a follow-up to https://github.com/vercel/next.js/pull/16973 which adds handling for the breaking change in the latest version of css-loader th... — committed to vercel/next.js by ijjk 4 years ago
Revert "Bump next from 9.5.3 to 9.5.4" This reverts commit ec8e4626 See: https://github.com/vercel/next.js/issues/17701 — committed to adeira/universe by mrtnzlml 4 years ago
Revert "Bump next from 9.5.3 to 9.5.4" This reverts commit ec8e4626 See: https://github.com/vercel/next.js/issues/17701 — committed to adeira/universe by mrtnzlml 4 years ago
Revert "Bump next from 9.5.3 to 9.5.4" This reverts commit ec8e4626 See: https://github.com/vercel/next.js/issues/17701 — committed to mrtnzlml-archive/kochka.com.mx by mrtnzlml 4 years ago

Most upvoted comments

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

+14

ijjk on Oct 8, 2020

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.

timneutkens on Oct 8, 2020

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.

spencewood on Oct 7, 2020

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

ijjk on Oct 10, 2020

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

pkellner on Oct 10, 2020

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";

flayks on Oct 8, 2020

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.

timneutkens on Oct 9, 2020

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.

UncleClapton on Oct 7, 2020

~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

ijjk on Oct 7, 2020