Aurelia / Webpack issues with newest Firefox (and other browsers) versions

Help Requests
1

Since the new browser updates (currently testing in Mozilla Firefox 84.0.2 but is also present on the new Safari for example) the Webpack bundling on my Aurelia-based web app isn’t working properly. When I use it on earlier browser version it seems that everything is ok.

Here’s the problem (screenshot attached). It seems that the vendor css/js bundles aren’t served properly. At first I thought that it is related with the usage of a Service Worker but it seems the problem originates from Webpack or Aurelia as I can see in the Debugger tab that most of the resources there are missing and I also added a ServiceWorker and it changed nothing about this issue.

1896×490
- this is what I am seeing when entering the instance of the app.

I can provide webpack.config code if needed as well. Just wanted to see if someone else is experiencing the same problems…

Any help would be appreciated.

Thanks in advance!

2

Did you upgrade webpack to v5?
Aurelia webpack plugin doesn’t work with webpack 5. Webpack 5 support · Issue #166 · aurelia/webpack-plugin · GitHub

3

Hi,

Thanks for the reply but I am aware of this issue and we are currently using webpack v4.46.0 which I think is fine?

The problem occured (and is present) only on the newest versions of the browsers. I read that they are making service workers mandatory for these versions so I thought it would be cache-related but when I added a SW to the app nothing changed.

Any other suggestions?

Stay safe !

4

not having any issues in a v1 project using ff 84.0.2 with webpack 4.46.0 i’m afraid.

5

Hi,

Ok so i tried updating all dependencies and everything related (got some extra time spending on those related with css distribution). Still no change unfortunately. Something is causing the css to appear as plain text even though it is absolutely the same on older and newer browser versions.
It seems to me that the style-loader does not function properly.

Here’s a portion of my webpack config where it is defined

  module: {
    rules: [
        {
            test: /\.css$/i,
            issuer: [{not: [{test: /\.html$/i}]}],
            use: extractCss ? [{
                loader: MiniCssExtractPlugin.loader
            },
                'css-loader'
            ] : ['style-loader', ...cssRules]
        },
        {
            test: /\.css$/i,
            issuer: [{test: /\.html$/i}],
            use: cssRules
        },
    ]
 }

I think it is related with the style-loader as this is the module responsible for serving and loading the style tags in the app’s head. I tried to update it via npm - no success unfortunately. I also tried to use different config settings here on the loader itself - still without any luck.

Any other help here would be appreciated.

Regards,
Nick

6

Can you replicate the same issue with a fresh new project or is it only for your existing one?