Vite build warns: script can't be bundled without type="module" attribute

Question

<!-- index.html -->
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<script type="module" src="./scripts/auth.js"></script>

# Vite terminal after running "npm run build"
build started...
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js">
in "/index.html" can't be bundled without type="module" attribute

I'm trying to add some external scripts to my index.html but the Vite build process assumes I want to have these scripts bundled. Is there any way to suppress this message?

Answer 1

There is an easy answer, and it is actually in the log itself.

Just add the type="module" attribute to your script tags, like so:

<script type="module" src="/src/main.js"></script>

Answer 2

I think I figured it out, but as always ymmv.

You might be able to do this in main.js or app.vue if you need it global, but I only needed the external script on one page. The old-school approach seemed to do it:

    mounted() {
      let externalScript = document.createElement('script');
      externalScript.setAttribute('src', 'https://[scripturletc].min.js')
      document.head.appendChild(externalScript)
    }

note: if you're doing your components in the new vue3 way, I think the above lines would go in your setup block.