Legacy JS doesn't work after build

[thaoms]

When using this (for testing purposes):

{{ craft.twigpack.includeSafariNomoduleFix() }}
{{ craft.twigpack.includeJsModule("app.js", false) }}

JS doesn't work anymore, simply doesn't get executed and no errors.

I couldn't really find the issue, but it seems that the optimizer is misconfigured and the chunks are wrong.

styles: {
  name: settings.vars.cssName,
  test: /\.(pcss|css|vue)$/,
  chunks: 'all',
  enforce: true
}

When removing this block vue works fine but the chunks are wrong of course. Seems that putting al styles in one chunk is breaking js/vue.

When using the module version everything is fine.

Sorry for the bad description, but I'm still learning webpack.

[thaoms]

Seems related to this:
webpack-contrib/mini-css-extract-plugin#113
webpack-contrib/mini-css-extract-plugin#151
webpack/webpack#7300

Manually including styles.js (injecting inline or prepending to bundle) fixes the issue.

When not using styles in vue components this js file is empty but if you don't include it screws up the webpack internals and the entry js just fails quietly.

For now I fixed it by not writing styles into the components and removing the splitChunks config object and just including app.css.

The legacy JS still fails in IOS 10.2 (simulator) but that might be unrelated.

[khalwat]

Let me know if you find any more information @thaoms

[bwlng]

@thaoms Do you mind sharing how you manually including styles.js (and what that code looks like). I’m running into the same issue.

[TomDeSmet]

Maybe I can add my two cents here. Even when we use
{{ craft.twigpack.includeJsModule("app.js", false) }}
Javascript isn't executed on IE11 and we don't get any error.

This thread and problem took me on a Google journey and it seems that this is a WebPack bug. When WebPack combines all CSS assets into a single file it also generates a styles.js file. This needs to be loaded as well for it to work in IE11.

My solution was to add
<script nomodule>{{ craft.twigpack.includeFileFromManifest("styles.js") }}</script>
to my _layout template after
{{ craft.twigpack.includeSafariNomoduleFix() }} {{ craft.twigpack.includeJsModule("app.js", true) }}

Then you also need to installa Promise polyfill and import it in your app.js.

This made it work for me, but I don't understand why Andrew or others don't seem to have this issue and why it does happen here. I started a new project from scratch and still had the issue.

[moacode]

I was having the same issue as you @TomDeSmet and resolved it by reading this post: webpack/webpack#10057. Loading styles.js from the manifest is the approach I took as well.

[khalwat]

The reason not everyone is seeing it is that it happens only when Vue components from node_modules includes in .vue single file components, and is apparently a webpack bug that we can hope is fixed in webpack 5.

But yes, the work-around is to include {{ craft.twigpack.includeJsModule("styles.js") }}

[khalwat]

I am happy to report that this has been fixed in webpack 5!