plugin-webpack won't render Vue 3 (and maybe other) apps if mount element is after module script tag in index.html #1744

andrewflbarnes · 2020-11-30T16:43:29Z

andrewflbarnes
Nov 30, 2020

When using the webpack plugin with a Vue app serving the built content (e.g. run snowpack build then serve the build directory) the application wasn't loading.

This appears to occur when the mount point appears in the template index.html after the script tag for the module.

e.g. Following the example from the vue template works:

  <body>
    <div id="app"></div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="/_dist_/index.js"></script>

but flipping this round to below will fail silently

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <script type="module" src="/_dist_/index.js"></script>
    <div id="app"></div>

This is with Vue 3 (haven't verified Vue 2 or any other apps) which uses the below in the entrypoint:

import { createApp } from 'vue'
const app = createApp(App)
app.mount('#app')

It looks like the issue is that snowpack build causes the generated bundled files to be loaded and executed before the div element in the index.html (I presume the JS gets run immediately before the initial DOM has fully loaded).

    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <script src="js/webpack-runtime.fb896d34f9d5c01569e4.js"></script>
        <script src="js/commons.f7ad63ba36b3cc3b6884.js"></script>
        <script src="js/index.c7beaf3816b10fabfe74.js"></script>
        <div id="app"></div>

This is at least what it looked like debugging in Chrome (86.0.4240.198) - a call to mount the application was made which attempts to retrieve a reference to the '#app' element which doesn't exist in the DOM yet so the application can't be mounted.

Having an index.html like this does work when serving the content generated from a build without the wepback plugin or when running snowpack dev.

It would be nice if the behaviour was consistent i.e. the application works even if the mounting element appears after the script module tag. At the very least I would thing shifting the script tags for the webpack bundles to be the last in the body would do the trick but I don't know if that comes with other issues?

It would be good to document the issue in the interim - maybe have a comment in the vue index.html template (and any others relevant) to make it clear that ordering matters when using the webpack plugin? I couldn't find anything on SO, the discussions or elsewhere indicating this would cause a problem.

Relevant package.json:

  "dependencies": {
    "vue": "^3.0.3",
//...
  },
  "devDependencies": {
    "@snowpack/plugin-vue": "^2.2.5",
    "@snowpack/plugin-webpack": "^2.1.1",
    "snowpack": "^2.17.1",
  },
//...

Can link to an example repo if wanted.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

plugin-webpack won't render Vue 3 (and maybe other) apps if mount element is after module script tag in index.html #1744

{{title}}

Replies: 0 comments

Select a reply

plugin-webpack won't render Vue 3 (and maybe other) apps if mount element is after module script tag in index.html #1744

andrewflbarnes Nov 30, 2020

Replies: 0 comments

andrewflbarnes
Nov 30, 2020