Site is not using JS after build in production mode

[swthate]

This is for a new project. I haven't done anything fancy with vue.config.js and haven't experienced this issue before.

After running npm run build (I also made the same change you did in the latest release by adding --modern to it in package.json) and then entering production mode to do some testing, the page loads blank. But not entirely blank, it actually does style the page with the correct css, but there is no js. Everything is a Vue component, so the main component does not render and leaves a "blank" page.

In the network tab in chrome dev tools it shows the app.xxx.css file and a backend.js file, but no app.xxx.js file. However, when running npm run build it does say it successfully creates both css and js files.

I can even see app.xxx.js in web/dist. It does have the minified js in it, and I can recognize bits of my Vue components in there, so that's working.

My _base.twig template file appears correct. I've never used twigpack before, but all looks well:

{{ craft.twigpack.includeCssModule("app.css", true) }}
.
.
.
{{ craft.twigpack.includeJsModule("app.js", true) }}
{{ craft.twigpack.includeJsModule("chunk-vendors.js", true) }}

manifest.json looks correct, too. Is there something silly I am missing?

[chasegiunta]

@swthate Tough to troubleshoot. If you view source, is Twigpack outputting the correct lines for app.js?

<script type="module" src="http://craft-vue.test/dist/js/app.123456.js"></script>
<script nomodule src="http://craft-vue.test/dist/js/app-legacy.123456.js"></script>

[chasegiunta]

Also, list which versions of Twigpack, vue, @vue/cli-service, webpack-manifest-plugin you're using

[swthate]

No, it doesn't output anything, except this:

<script>
  !function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();
</script>

Versions:

Twigpack: 1.1.8
vue: 2.6.10
@vue/cli-service: 3.8.0
webpack-manifest-plugin: 2.0.4

Also, strangely enough, if I removed the true option from craft.twigpack.includeJsModule it does output lines trying to load the app.js files... except they have the wrong hash or key.

I looked over the twigpack config settings, I haven't changed anything in there, and they look correct.

[chasegiunta]

Goto utilities & clear your twigpack cache

[swthate]

Great Scott that was it! You're a gentleman and a scholar, thank you.

[chasegiunta]

No problem! Glad it worked. Recommend running

php craft clear-caches/twigpack-manifest-cache

in your post deployment scripts