Caught (in promise) TypeError: c[t] is not a function, Index.js code doesn't run when served publicly, Updated Webpack

[gdkoo]

Bug report

What is the current behavior?
When bundled files are served publicly, any code inside the index.js (entry point for bundle) does not execute or run. However, all imports into index.js which include functions run with no problem. When bundle is served using webpack-dev-server, there is no problem there. To test, I deleted all the code in index.js and wrote a console.log() inside a function. The function did not execute at all.

The following error is thrown:

in.54452d4fe8f830e3.js:2 Uncaught (in promise) TypeError: c[t] is not a function
    at l (main.54452d4fe8f830e3.js:2:44054)
    at main.54452d4fe8f830e3.js:2:42746
    at l.a (main.54452d4fe8f830e3.js:2:44555)
    at 131 (main.54452d4fe8f830e3.js:2:42615)
    at l (main.54452d4fe8f830e3.js:2:44054)
    at main.54452d4fe8f830e3.js:2:47290
    at main.54452d4fe8f830e3.js:2:47298
l

Looking into the bundled file where the error is:

 function l(t) {
        var e = u[t];
        if (void 0 !== e)
            return e.exports;
        var n = u[t] = {
            exports: {}
        };
        return c[t](n, n.exports, l),
        n.exports
    }
    l.m = c,
    t = "function" == typeof Symbol ? Symbol("webpack queues") : "__webpack_queues__",
    e = "function" == typeof Symbol ? Symbol("webpack exports") : "__webpack_exports__",
    n = "function" == typeof Symbol ? Symbol("webpack error") : "__webpack_error__",
    r = t=>{
        t && !t.d && (t.d = 1,
        t.forEach((t=>t.r--)),
        t.forEach((t=>t.r-- ? t.r++ : t())))
    }
    ,

The imports include files that use top-level await. Other than that, there are no promises in the index.js.

Css, html, and images in bundle all display correctly.

If the current behavior is a bug, please provide the steps to reproduce.

https://github.com/gdkoo/SleepWakeRegulate/blob/main/webpack.config.cjs

What is the expected behavior?

Using miniCSSExtractPlugin and HTML Webpack Plugin, index.html, style.css, and index.js should all be bundled into main.js and main.css, and an index.html should be generated in a public folder. This is all happening correctly. When running npm run build and npm run serve, the code all executes correctly. However, when served to Firebase hosting or another emulator, the bundled code executes everything except code from index.js. This ranges from simple console.log()s to images that are added to the DOM.

After some debugging, I found that removing the './style.css' import specifically (which thereby prevents the main.css bundle), rebundling, and serving publicly led to the rest of index.js file executing as expected. However, doing so removes the css stylesheet. I suspect the issue in my case might have to do with the miniCSSExtractPlugin.

Other relevant information:
webpack version: 5.83.1
Node.js version: v16.18.0
Operating System: macOS 11.0.1
Additional tools:
@webpack-cli/generators: ^3.0.1 => 3.0.1
babel-loader: ^9.1.0 => 9.1.0
css-loader: ^6.7.2 => 6.7.2
html-webpack-plugin: ^5.5.1 => 5.5.1
style-loader: ^3.3.1 => 3.3.1
url-loader: ^4.1.1 => 4.1.1
webpack: ^5.83.1 => 5.83.1
webpack-cli: ^5.0.1 => 5.0.1
webpack-dev-server: ^4.11.1 => 4.11.1

[tzachbon]

I'm also encountering the same issue. To better understand the root cause, I plan on replicating it within a simplified project context.

[alexander-akait]

Please use:

experiments: {
    futureDefaults: true,
    css: false,
  },

CSS is under experiments right now, also you can see warnings, because

"global" has been used, it will be undefined in next major version.
The global namespace object is a Node.js feature and isn't available in browsers.

[alexander-akait]

Other solution when you enable futureDefault is set type: "javascript/auto", for CSS, i.e.

{
        test: /\.css$/,
        sideEffects: true,
        type: "javascript/auto",
        include: [
         path.resolve(__dirname, 'src/style.css'),
        ],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },

I will improve warnings in css-loader

[gdkoo]

Thank you. The first solution solved the issue.

[alexander-akait]

Fixed in css-loader, style-loader and mini-css-extract-plugin. Now they do nothing when built-in CSS support enabled (so no problems with code generation), also they are warhing about set type: "javascript/auto" or disable experiments.css.

Feel free to feedback