`resolve-url-loader`: CSS error - on using arbitrary values in SCSS - Next.js

[Divyansh Singh]

What version of Tailwind CSS are you using?

2.2.4

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 11.0.1 (PostCSS 8.3.6, SASS 1.36.0)

What version of Node.js are you using?

14.7.1

What browser are you using?

N/A

What operating system are you using?

Windows 11 (22000.100)

Reproduction repository

https://github.com/brc-dd/nextjs-tailwindcss-bug

Describe your issue

When using arbitrary values like this in a SCSS module file:

.foo {
  @apply text-[#0e407c];
}

Webpack is throwing the following error during production build:

D:\foobar on main ≡ via  14.17.1
➜ rm -r .next; yarn build
yarn run v1.22.5
$ next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
info  - Creating an optimized production build
Failed to compile.

./styles/foo.module.scss.webpack[javascript/auto]!=!./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[3].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[3].use[4]!./styles/foo.module.scss
Error: resolve-url-loader: CSS error
  Invalid mapping: {"generated":{"line":1,"column":25},"source":"file://D:\\foobar\\styles\\foo.module.scss","original":{"column":null},"name":null}


> Build error occurred
Error: > Build failed because of webpack errors
    at D:\foobar\node_modules\next\dist\build\index.js:15:924
    at async Span.traceAsyncFn (D:\foobar\node_modules\next\dist\telemetry\trace\trace.js:6:584)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The same code is working fine with CSS modules, and also in development mode.

[Divyansh Singh]

It appears that setting sourceMap option to false for resolve-url-loader seems to do the job. Also, according to the comments in the code, it should be safe to do so.

Here is the next.config.js to override the config:

module.exports = {
  webpack(config) {
    const rules = config.module.rules
      .find((rule) => typeof rule.oneOf === 'object')
      .oneOf.filter((rule) => Array.isArray(rule.use));

    rules.forEach((rule) => {
      rule.use.forEach((moduleLoader) => {
        if (moduleLoader.loader.includes('resolve-url-loader'))
          moduleLoader.options.sourceMap = false;
      });
    });

    return config;
  },
};

But I am not sure if this fixes the root problem or just hides it. So, I am keeping this issue open for the moment.

[Paul Hayes]

@brc-dd Thank you so much, was encountering this exact same problem last night and it took some serious debugging to find out what was causing my Next build to fail as it was all working fine locally on my machine! I've included your suggestion in my next.config.js file and it seems to be working for now.

Did you have any further updates on whether this is safe to leave it as is?

[Divyansh Singh]

@PaulHaze I've been using this for a few months now across multiple projects. Didn't experienced any issue till now. So I'm guessing the override should be safe for you. You can also check this answer: https://stackoverflow.com/a/68959514/11613622. But it won't work if you're applying only arbitrary valued class(es), or if, like me, you're using headwind or similar plugins that automatically sort the classes and move arbitrary valued classes to last.

[Divyansh Singh]

Gonna close this as it is no longer happening on the latest Next.js versions. They have updated the resolve-url-loader, which was causing the bug.