RESOLVED In my React…

2 minute read

[RESOLVED] In my React App the script tags output in my index.html as a part of my build are <script type="module" . I’m actually trying to target IE11 for my project. I’ve changed the target and module options in tsconfig.json but no luck there. Is there a differen typescript option to conifgure to go back to using text/javascript or possibly some other configuration I am missing? Thank you!


what type of project is it?

react / application

I have very limited experience with react. Someone around here hopefully has the answer tho, maybe edit your question - say something like In my React App the script tags… Sorry, wish I could be more help.

you should also have another script type with the nomodule attribute, which is what gets loaded for older browsers. they call that feature “differential loading”. if you only have the type="module" tag, then something might be going on.

here’s how it should look

Thanks and this definitely looks like my problem. I had come across this pattern during my googling so I’m glad to be confirmed that this is what I should dig into.

You can see my output definitely does not contain the nomodule tags ``` <body>

&lt;div id="root"&gt;&lt;/div&gt;   &lt;script src="runtime.js" type="module"&gt;&lt;/script&gt;&lt;script src="polyfills.js" type="module"&gt;&lt;/script&gt;&lt;script src="vendor.js" type="module"&gt;&lt;/script&gt;&lt;script src="main.js" type="module"&gt;&lt;/script&gt;&lt;/body&gt; &lt;/html&gt;```  is this result from an nx project? If you recall should this be configured out of the box or something the developer needs to setup separately?
  • that is from an Nx project. i think it’s supposed to work out of the box. i didn’t do anything to explicitly configure it, but this project was generated a while ago, so not on the latest version

you might want to check apps/&lt;appname&gt;/.browserslistrc. i don’t know if the differential loading is driven from that, but you’ll want to make sure ie11 is enabled there

actually, just checked my browserlist and i have note IE 9-11, so probably not that. we don’t actually support IE11

sorry i can’t be more helpful

Are you building with the –prod flag?

Aha! thanks Justin I’m guessing you noticed the lack of hashes on my scripts. Was unaware of that flag so many thanks. Appreciate your help also Brian!

I know you are not building an angular app but check out <> on serving for IE. This is called differential loading.

Amusingly enough seeing Brian’s screenshot with the hashes reminded me I needed to start looking into configuring that.