CODEWITHSUNDEEP
javascriptvite
docta_faustus
docta_faustus

Reputation: 2799

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

<!-- 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?

Upvotes: 17

Views: 22647

Answers (2)

Slaveworx
Slaveworx

Reputation: 611

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>

Upvotes: 2

kl02
kl02

Reputation: 582

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.

Upvotes: 1

Related Questions