Build error when using JS imports: Browser scripts cannot have imports or exports

[moritzlaube]

Hi everyone!

I am using parcel@nightly (2.0.0-nightly.728) and until today everything worked fine. Also the bundling of my Javascript modules. I am importing gsap and lozad and a custom javascript file.

All of a sudden I am getting this error message from @parcel/transformer-js:
Browser scripts cannot have imports or exports. Use a <script type="module"> instead.

I tried everything from npm ci to deleting the node_modules folder and reinstalling. It stopped compiling my imports in main.js. Does (or did) anyone experience the same issue? Thanks for your help!

[devongovett]

You need to add type="module" to your script tag. There should be an error message describing this but codeframes might be broke at the moment (see #6485).

[DeMoorJasper]

Maybe we should do something similar to what NextJS does to provide more details for certain errors by linking to a markdown file that explains it in a bit more detail, like this: https://github.com/vercel/next.js/tree/canary/errors we could also create a section for this in the docs site

The console might be a bit limiting for explaining certain errors, like this one about type="module"

what do you think @devongovett ?

[devongovett]

Yup I was thinking the same. Just waiting until they are closer to done so we don't have to change all the URLs. We could either link to docs sections or have separate pages for each error. Not sure what's better.

[Himavanth]

@devongovett Is there a workaround to adding type="module" in app code ? We are using beta.3.1 currently and we are trying to find a backward compatible way for our users to upgrade to rc.0

[sfrieson]

I found this super confusing because I cannot find in the docs where it says to do this. At the same time the Getting Started page specifically says:

NB: Parcel converts JS assets to ES5, which won't run in in the context of a <script type="module"> tag, so just use plain <script> tags with no type attribute in your source HTML.

After reading this thread and the docs a few times over, I'm realizing that you all are referencing a release candidate here, but I'd also like to note that doing an npm install --save-dev parcel today gave me parcel@2.0.0-rc.0.

Maybe this was release more broadly than expected?

[mathcodes]

🙏 @devongovett

[jessabyrne]

I'm having the same issue with

    "parcel": "^2.0.0-nightly.746",
    "@parcel/transformer-raw": "^2.0.0-nightly.746",
    "@parcel/transformer-typescript-tsc": "^2.0.0-nightly.746",

(I also tried with the transformers at nightly.748)
not sure where to add type="module" when it comes to the TS compiler options.

[mischnic]

You should be using 748 for the transformers, because currently the nightly version numbers between parcel and most other plugins are offset by 2. So parcel@2.0.0-nightly.746 and @parcel/transformer-raw@2.0.0-nightly.748 were released at the same time from the same commit.

Do you use TS or JS as your entry point for Parcel? Can you share a code example that triggers the error for you?

[jessabyrne]

I use TS. Offset by 2 makes sense, so now I've just tried:

    "parcel": "^2.0.0-nightly.749",
    "@parcel/transformer-raw": "^2.0.0-nightly.751",
    "@parcel/transformer-typescript-tsc": "^2.0.0-nightly.751",

And running
parcel build public/index.html --no-scope-hoist
or
parcel public/index.html

fails

🚨 Build failed.
@parcel/transformer-js: Browser scripts cannot have imports or exports. Use a <script type="module"> instead.
/Users/jessabyrne/project/src/index.tsx:1:1
> 1 | import 'firebase/auth';
>   | ^
  2 | import 'typeface-arial';

I also tried deleting .parcelrc and node_modules and reinstalling/building
My .parcelrc looks like this:

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"],
    "*.{jpg,png,svg}": ["@parcel/transformer-raw"]
  }
}

[mischnic]

You need to add type="module" to the script tag that references the TS file in public/index.html

[wll8]

If this is caused by an update, I did not upgrade any packages, and I still received this error, which brought a lot of unnecessary trouble to the developers and brought great uncertainty to the stability of the project!

[Ckarles]

Following the getting started

NB: Parcel converts JS assets to ES5, which won't run in in the context of a <script type="module"> tag, so just use plain <script> tags with no type attribute in your source HTML.

Makes encountering this error pretty quickly, I'd suggest to clarify that section so that new users won't encounter that error after writing their first statement in the index.{js,ts}, which will usually be an ES6 import.

[singuerinc]

Maybe a bit unrelated... I'm not interested in the js script made as module, but the one for older browsers only. Is there a way to say: "just create the legacy script"?

[403-html]

Set super old browser https://parceljs.org/getting-started/webapp/#declaring-browser-targets
List: https://github.com/browserslist/browserslist#full-list

[403-html]

Weird, but... Even if I declared type module (tried every combination, even both in index.html and package.json together) I get an error like guys above.

[mischnic]

That's actually a different error.

The one reported above has looks different and would also show a codeframe from the HTML script tag: https://parceljs.org/blog/rc0/#classic-scripts-vs.-es-modules

[403-html]

you're right! still can't get around it

[7Creed]

I am also having same error. How did you solve yours?

[EnginKARATAS]

I`m trying to work p5 lib with typescript. Same error happening.
My solution:
I change package.json dependencies versions. it worked
https://github.com/EnginKARATAS/2dplatform-game/blob/main/package.json

[paxperscientiam]

After pulling out my hair for a bit, I found the resolution for my variation of this problem: remove the type="text/javascript" attribute from the script tag.

Yes, I indeed had the "type" attribute twice. Once I removed the errant type attribute, the error was cleared and javascript was generated.

I hope this helps someone else.

Also, it might be helpful if parcel detected such blunders. Parcel outputs the same recommendation to add type='module' even when it's present already (albeit when there's another type attribute on the tag).

[dioptre]

Using a transformer-raw transformer got me over this mountain. Hope that helps other people.

[jcucuzza]

Using a transformer-raw transformer got me over this mountain. Hope that helps other people.

can you elaborate @dioptre ? did you add something to your .panelrc file and what version are you on?

[dioptre]

Basically the transformation/tree-shaking/optimization process was very much broken for me.

My project is using hundreds of millions of lines of code which I can't go through and find the missing parts parcel randomly removed from underneath me. I think its due to the older nature of the code in some parts, and probably use of globals but who knows. I needed a solution, and this was it:

"url:donteatmyfile.*.js": ["@parcel/transformer-raw"],

Just prefix the files you don't want touched by parcels optimizer (above its donteatmyfile.*.js), and it should all work.

[dioptre]

Also forgot to include the import part, as an example (or in import code just use it as you normally would with the url prefix) like:

<script src="url:../donteatmyfile.plugin.js"/>

[LeoDog896]

Heres the config I ended up using for my .parcelrc:

  "transformers": {
    "raw:*": ["@parcel/transformer-raw"],
  }

You can set files to be "raw" by using raw:../plugin.js.