Importing an invalid URL breaks chunk loading

[rikbrowning]

• Operating System: Windows 10
• Node Version: 14.15.0
• NPM Version: 7.20.0
• webpack Version: 5.48.0
• mini-css-extract-plugin Version: 2.2.0

Expected Behavior

Having an invalid import in my SCSS should not break the loading of other Chunks. This worked when using webpack v4.

Actual Behavior

You get an error in the console and the chunks don't load.

Code

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    mode:"production",
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
            MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
};

How Do We Reproduce?

Put together this repo showcasing the issue: https://github.com/rikbrowning/webpack5-link-issue

[alexander-akait]

I don't see here the problem, your write invalid absolute URL (we ignore them) and we keep them in your code, so you have extra request with invalid url, don't forget sass keep absolute URLs as is in CSS, css-loader ignore absolute URL and keep them, otherwise loading fond from googlefonts and other services will not work, feel free to feedback

[rikbrowning]

@alexander-akait an invalid URL is causing none of our chunks to work. This didn't happen in webpack 4 so not quite sure what has changed. This issue maybe a related to a change further up stream. My concern is not that we get the error but that it causes the rest of the chunk to not execute.

[alexander-akait]

@rikbrowning it is runtime code, you can add rule for your linter to catch this

My concern is not that we get the error but that it causes the rest of the chunk to not execute.

Why do you need broken URL?

[rikbrowning]

So the URL does work (its a URL for font license check) but what happens is when a user has an adblocker installed it will stop loading that URL (return 404) which previously was fine as the chunk still loaded. Now though nothing renders on the page due to that chunk failing.

[alexander-akait]

Please open an issue in font repo and ask them to remove broken URL, in future we will respect http/https URLs, we already have it for JS https://github.com/webpack/webpack/pull/13925, so you build will be broken too, the main problem error in onerror is not contain information to determine where is the error, so if something is not loaded in CSS chunk then everything is not loaded, otherwise you may get unpredictable results, in your specific example, this is not a problem, but if you take the picture in general, it can mess up the visible part of your application, also extra unnecessary requests are bad for perf

[rikbrowning]

So the URL does work as I stated in my previous comment, the issue is when a user has an adblocker installed. The font repo is fine. The CSS Chunk not loading is fair, but then why does the remainder of the JS Chunk not load?

[alexander-akait]

Because you can rely on styles (change them) after loading CSS in your JS and it will be broken too

[rikbrowning]

How did this work in previous versions? Cause rolling webpack back fixes the issue.

[alexander-akait]

webpack design for static analyzable code, loading something broken is wrong, to solve it please remove wrong/broken at-rule import

[alexander-akait]

JS and CSS chunks should be loaded together, otherwise, as I said above, you create unsafe place(s) for your code

[alexander-akait]

I opened a discussion of this in internal slack channel for this, I will return with full answer late, anyway you should avoid these situations

[danielsaul]

We're having a very similar issue.

Our CSS chunks import fonts from Google Fonts. Unfortunately some of our enterprise clients block Google Fonts on their network, and so the fonts fail to import. Due to the decision here to block the entire chunk, our entire application therefore fails.

Failure to import a font file should ideally not cause an entire chunk to fail - it's purely cosmetic.

Is there any workaround for this?