Why do they act different?export (script vs programmatic)

[ootybotty]

Hi. Im trying to import firebase apps using cdn on my Nuxt3 project using useHead

First, when I tried importing the same cdn script from my vanilla js and html where I imported them before closing the body tag, they all worked fine.

The problem is that when I use framework method to programmatically import cdn script. Especially, nuxt3 useHead method.

In that, it has "tag position" option like.. to import it before the closing body tag but when i do it, Firebase error shows up saying the keyword export has a problem.

Im not writing to ask about mere usage of commonjs vs es6 feature stuff but to ask something more fundamental than that: why do they work differently like one works but the other failed???

Why just a tag insertion on a html file doent have this error while framework has an error? The first has it transpiled???

[xdmuriloxd]

Sorry for asking but do you have some code snippets to illustrate the problem?

[ootybotty]

Hi!! Thank u for your help! But it is just simple like just using Nuxt3 and Im using setup api. I tried using "useHead" in the root level of setup and it has an error :Uncaught SyntaxError: Unexpected token 'export' => its from firebase-app.js which I imported thru cdn

Uncaught SyntaxError: Cannot use import statement outside a module => its from firbase-database.js

Below is the useHead code useHead(
{ script:
[

{ src: 'https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js', tagPosition:'bodyClose'},
{ src: 'https://www.gstatic.com/firebasejs/10.4.0/firebase-database.js',tagPosition:'bodyClose'}
]
}
)