Next 12 SWC - Base 64 background image in CSS Module file can't be resolved.

[leonardofaria]

What version of Next.js are you using?

12.0.3

What version of Node.js are you using?

16.12.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next build / next dev

Describe the Bug

I am moving an app from Next.js 11 to 12 and I'd like to use SWC.

It looks like a base64 SVG image that I have as background-image inside a scss file is blocking me.

Expected Behavior

It should work like with Babel.

Here is my babel.config.js just in case:

// eslint-disable-next-line func-names
module.exports = function (api) {
  api.cache(true);

  const presets = ['next/babel'];

  const env = {
    development: {
      presets,
      plugins: ['istanbul'],
    },
    production: {
      presets,
    },
    test: {
      presets: [
        [
          '@babel/preset-env',
          {
            useBuiltIns: 'usage',
            corejs: 2,
          },
        ],
        '@babel/react',
        '@babel/preset-typescript',
      ],
    },
  };

  return {
    env,
  };
};

I have removed this file in order to use SWC (https://nextjs.org/docs/messages/swc-disabled)

To Reproduce

Create a component that uses CSS(SCSS) Modules:

/* ComponentName.module.scss */

.something {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5PdmFsPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPiAgICAgICAgPGNpcmNsZSBpZD0icGF0aC0xIiBjeD0iOCIgY3k9IjgiIHI9IjgiPjwvY2lyY2xlPiAgICA8L2RlZnM+ICAgIDxnIGlkPSJGb3VuZGF0aW9ucy9JY29ucy8xNi9SYWRpbyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iT3ZhbCI+ICAgICAgICAgICAgPHVzZSBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgICAgIDxjaXJjbGUgc3Ryb2tlPSIjNDM0NzREIiBzdHJva2Utd2lkdGg9IjEiIGN4PSI4IiBjeT0iOCIgcj0iNy41Ij48L2NpcmNsZT4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==');
}

When I try yarn dev or yarn build:

error - ./components/ComponentName/ComponentName.module.scss:4:0
Module not found: Can't resolve '../../koba/styles/data:image/svg+xml;base64,PD94bWw....

[leonardofaria]

Closing this, it seems to be related to loaders, not SWC.

[kherock]

I'm seeing this same issue, were you able to resolve your problem @leonardofaria?

[kherock]

nvm, I see this is resolved by #31134

[leonardofaria]

That's right @kherock, using next@12.0.4-canary.9 the error is no longer there.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.