Adding browserlists target for browsers that do not support modules causes module script tag to not have type="module"

[kmiyashiro]

🐛 bug report

Using new URL() to import an image introduces the usage of import.meta.url in the module build. This is fine if you are only building for modern browsers, but if you add a target for browsers that do not support modules (using browserslist), the script tag for the modern build is suddenly missing type="module", which causes an error:

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

This output is different than described here: https://parceljs.org/blog/rc0/#differential-bundling, which does show a type="module" attr being added.

🎛 Configuration (.babelrc, package.json, cli command)

https://github.com/kmiyashiro/parcel-module-bug

🤔 Expected Behavior

Module build script tag should have type="module", like it does when building for only modern browsers.

😯 Current Behavior

See repro repo

💁 Possible Solution

🔦 Context

Only building for modern browsers works for now. I cannot build for older browsers without breaking the output for modern browsers.

💻 Code Sample

https://github.com/kmiyashiro/parcel-module-bug

🌍 Your Environment

Software	Version(s)
Parcel	2.2.1
Node	14.9
npm	7.21
Operating System	macOS 12.1

[bekh6ex]

I have the same issue with building a web-extension with Parcel. In Firefox content scripts and background scripts do not use type="module". Not sure about Chrome, but I would expect the same.

[mischnic]

The problem here is actually that <script type="module" src="index.js" /> is technically invalid HTML. Then Parcel is missing a type="module" and also includes a strange empty script body:

<script src="/index.5aa6dbec.js">
	(function () {

	})();
</script>
<script src="/index.73769faa.js" nomodule="" defer=""></script>

[kmiyashiro]

Ah, not sure why I didn't catch that. You're right, fixing the syntax causes parcel to generate the correct script tag. Kind of odd that it behaves differently based on browser target though.