ENAMETOOLONG on a data:image/svg+xml;base64... background-image url

[karlvr]

Bug report

After some investigation I suspect that part of this is an issue in Webpack's naming of assets. A change in css-loader 6 seems to mean that inline data url images are exported as assets by webpack, but a big data url image is a really long file name; sometimes too long. I think the issue is that inline data url images shouldn't be exported as external assets, and I think that is a change in css-loader, so I have created the issue in this project.

Actual Behavior

Using css-loader version 6.2.0 webpack fails with an ENAMETOOLONG error when compiling the following css:

body {
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE2IDE3Ij4KICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiw4IEwxNiw0LjAwNjg0NTQ3IEMxNiwzLjQ0OTk0ODc2IDE1LjU1MTg5NDUsMyAxNC45OTkxMjgzLDMgTDEzLDMgTDEzLDUuMDAwMTkyNTEgQzEzLDUuNTUyMzcwOTQgMTIuNTU2MTM1Miw2IDEyLDYgQzExLjQ0NzcxNTMsNiAxMSw1LjU1NjI4MzM1IDExLDUuMDAwMTkyNTEgTDExLDMgTDUsMyBMNSw1LjAwMDE5MjUxIEM1LDUuNTUyMzcwOTQgNC41NTYxMzUxOCw2IDQsNiBDMy40NDc3MTUyNSw2IDMsNS41NTYyODMzNSAzLDUuMDAwMTkyNTEgTDMsMyBMMS4wMDA4NzE2NiwzIEMwLjQ0NDYzMDg2MSwzIDAsMy40NTA3ODAwNyAwLDQuMDA2ODQ1NDcgTDAsOCBMMTYsOCBaIE0xNiw5IEwxNiwxNS45OTMxNTQ1IEMxNiwxNi41NDkyMTk5IDE1LjU1NTM2OTEsMTcgMTQuOTk5MTI4MywxNyBMMS4wMDA4NzE2NiwxNyBDMC40NDgxMDU1MDUsMTcgMCwxNi41NTAwNTEyIDAsMTUuOTkzMTU0NSBMMCw5IEwxNiw5IFogTTQsMiBDMy40NDc3MTUyNSwyIDMsMS41NTIyODQ3NSAzLDEgQzMsMC40NDc3MTUyNSAzLjQ0NzcxNTI1LDAgNCwwIEM0LjU1MjI4NDc1LDAgNSwwLjQ0NzcxNTI1IDUsMSBDNSwxLjU1MjI4NDc1IDQuNTUyMjg0NzUsMiA0LDIgWiBNMTIsMiBDMTEuNDQ3NzE1MywyIDExLDEuNTUyMjg0NzUgMTEsMSBDMTEsMC40NDc3MTUyNSAxMS40NDc3MTUzLDAgMTIsMCBDMTIuNTUyMjg0NywwIDEzLDAuNDQ3NzE1MjUgMTMsMSBDMTMsMS41NTIyODQ3NSAxMi41NTIyODQ3LDIgMTIsMiBaIi8+Cjwvc3ZnPgo=');
}

This is the error:

webpack-cli] [Error: ENAMETOOLONG: name too long, open '/Users/karlvr/target/frontend/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE2IDE3Ij4KICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiw4IEwxNiw0LjAwNjg0NTQ3IEMxNiwzLjQ0OTk0ODc2IDE1LjU1MTg5NDUsMyAxNC45OTkxMjgzLDMgTDEzLDMgTDEzLDUuMDAwMTkyNTEgQzEzLDUuNTUyMzcwOTQgMTIuNTU2MTM1Miw2IDEyLDYgQzExLjQ0NzcxNTMsNiAxMSw1LjU1NjI4MzM1IDExLDUuMDAwMTkyNTEgTDExLDMgTDUsMyBMNSw1LjAwMDE5MjUxIEM1LDUuNTUyMzcwOTQgNC41NTYxMzUxOCw2IDQsNiBDMy40NDc3MTUyNSw2IDMsNS41NTYyODMzNSAzLDUuMDAwMTkyNTEgTDMsMyBMMS4wMDA4NzE2NiwzIEMwLjQ0NDYzMDg2MSwzIDAsMy40NTA3ODAwNyAwLDQuMDA2ODQ1NDcgTDAsOCBMMTYsOCBaIE0xNiw5IEwxNiwxNS45OTMxNTQ1IEMxNiwxNi41NDkyMTk5IDE1LjU1NTM2OTEsMTcgMTQuOTk5MTI4MywxNyBMMS4wMDA4NzE2NiwxNyBDMC40NDgxMDU1MDUsMTcgMCwxNi41NTAwNTEyIDAsMTUuOTkzMTU0NSBMMCw5IEwxNiw5IFogTTQsMiBDMy40NDc3MTUyNSwyIDMsMS41NTIyODQ3NSAzLDEgQzMsMC40NDc3MTUyNSAzLjQ0NzcxNTI1LDAgNCwwIEM0LjU1MjI4NDc1LDAgNSwwLjQ0NzcxNTI1IDUsMSBDNSwxLjU1MjI4NDc1IDQuNTUyMjg0NzUsMiA0LDIgWiBNMTIsMiBDMTEuNDQ3NzE1MywyIDExLDEuNTUyMjg0NzUgMTEsMSBDMTEsMC40NDc3MTUyNSAxMS40NDc3MTUzLDAgMTIsMCBDMTIuNTUyMjg0NywwIDEzLDAuNDQ3NzE1MjUgMTMsMSBDMTMsMS41NTIyODQ3NSAxMi41NTIyODQ3LDIgMTIsMiBaIi8+Cjwvc3ZnPgo=.ec063434'] {
  errno: -63,
  code: 'ENAMETOOLONG',
  syscall: 'open',
  path: '/Users/karlvr/target/frontend/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE2IDE3Ij4KICA8cGF0aCBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNiw4IEwxNiw0LjAwNjg0NTQ3IEMxNiwzLjQ0OTk0ODc2IDE1LjU1MTg5NDUsMyAxNC45OTkxMjgzLDMgTDEzLDMgTDEzLDUuMDAwMTkyNTEgQzEzLDUuNTUyMzcwOTQgMTIuNTU2MTM1Miw2IDEyLDYgQzExLjQ0NzcxNTMsNiAxMSw1LjU1NjI4MzM1IDExLDUuMDAwMTkyNTEgTDExLDMgTDUsMyBMNSw1LjAwMDE5MjUxIEM1LDUuNTUyMzcwOTQgNC41NTYxMzUxOCw2IDQsNiBDMy40NDc3MTUyNSw2IDMsNS41NTYyODMzNSAzLDUuMDAwMTkyNTEgTDMsMyBMMS4wMDA4NzE2NiwzIEMwLjQ0NDYzMDg2MSwzIDAsMy40NTA3ODAwNyAwLDQuMDA2ODQ1NDcgTDAsOCBMMTYsOCBaIE0xNiw5IEwxNiwxNS45OTMxNTQ1IEMxNiwxNi41NDkyMTk5IDE1LjU1NTM2OTEsMTcgMTQuOTk5MTI4MywxNyBMMS4wMDA4NzE2NiwxNyBDMC40NDgxMDU1MDUsMTcgMCwxNi41NTAwNTEyIDAsMTUuOTkzMTU0NSBMMCw5IEwxNiw5IFogTTQsMiBDMy40NDc3MTUyNSwyIDMsMS41NTIyODQ3NSAzLDEgQzMsMC40NDc3MTUyNSAzLjQ0NzcxNTI1LDAgNCwwIEM0LjU1MjI4NDc1LDAgNSwwLjQ0NzcxNTI1IDUsMSBDNSwxLjU1MjI4NDc1IDQuNTUyMjg0NzUsMiA0LDIgWiBNMTIsMiBDMTEuNDQ3NzE1MywyIDExLDEuNTUyMjg0NzUgMTEsMSBDMTEsMC40NDc3MTUyNSAxMS40NDc3MTUzLDAgMTIsMCBDMTIuNTUyMjg0NywwIDEzLDAuNDQ3NzE1MjUgMTMsMSBDMTMsMS41NTIyODQ3NSAxMi41NTIyODQ3LDIgMTIsMiBaIi8+Cjwvc3ZnPgo=.ec063434'
}
 ERROR  Command failed with exit code 2.

Expected Behavior

With css-loader version 5.2.7 there is no error and the CSS is output with the url(data:image/svg...) intact.

How Do We Reproduce?

Here is the gist of it https://gist.github.com/karlvr/90759ad647661e9bbd3d58f7998eb14b

The key is the assetModuleFilename and css-loader 6.2.0. If you truncate the base64 image data you will get a file output with that base64 image data as its name, and the decoded images data as its body.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 11.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 17.13 MB / 64.00 GB
  Binaries:
    Node: 14.17.5 - ~/.nvm/versions/node/v14.17.5/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.14.14 - ~/.nvm/versions/node/v14.17.5/bin/npm
  Browsers:
    Chrome: 92.0.4515.159
    Firefox: 91.0.2
    Safari: 14.1.2
  Packages:
    webpack: ^5.51.1 => 5.51.1 
    webpack-cli: ^4.8.0 => 4.8.0 

[alexander-akait]

Duplicate webpack/webpack#13835, we should not use content as filename, should be fixed in webpack itself

[joshkel]

In case it helps anyone - as mentioned above and in the linked Webpack issue, a fix / workaround is to change your Webpack configuration to not extract data URL assets. How to do this depends on your Webpack configuration; in my case, I had the following fallback block at the end of my module rules:

            {
              type: 'asset/resource',
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
            },

Changing it to asset and letting it selectively inline modules fixed things:

            {
              type: 'asset',
              parser: {
                dataUrlCondition: { maxSize: imageInlineSizeLimit },
              },
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
            },

For further information, see Webpack 5's Asset Modules documentation.

[rabinage]

You can ignore the inline data url with the URL filter function.

{
  test: /\.css$/i,
  use: [
    {
      loader: "css-loader",
      options: {
        url: {
          filter: (url) => {
            if (/^data:(image|font)/i.test(url)) {
              return false;
            }
            return true;
          },
        },
      },
    },
  ],
},

[karlvr]

@joshkel @rabinage thank you both. I have combined these two approaches... I have had to modify the regex to match the Google Fonts that were the source of my problems:

{
  test: /\.css$/i,
  use: [
    {
      loader: "css-loader",
      options: {
        url: {
          filter: (url) => {
            if (/^data:/.test(url)) {
              return false;
            }
            return true;
          },
        },
      },
    },
  ],
},

I've gone aggressive and said css-loader can ignore any data urls... I'm not sure what downsides I face!