I'm getting an error that is telling me to add the type="module" attribute to the <script> tag when I run Parcel but I already have. I am trying to follow this tutorial but using my own code which has exports in it. See below:

I'm new to Parcel so I'm unsure if this is a bug with Parcel or if I'm doing something wrong and the error message is misleading. I'm simply trying to use parcel to package this code but I'm getting the below error. I'm using the default configuration.

When I run npx parcel test2.html --no-hmr (I have hmr off because it just does not seem to work and causes issues.) I'm expecting it to build but instead I get:

@parcel/transformer-js: Browser scripts cannot have imports or exports.

I was under the impression that Parcel was supposed to repackage these files so they would work in a browser. That seems like the whole point. Am I missing something?

Here is the rest of the output:

  C:\wamp64\www\wp-content\plugins\application\js\Person.js:4:12
    3 | exports.PersonType = exports.Person = void 0;
  > 4 | const _1 = require("./");
  >   |            ^^^^^^^^^^^^^
    5 | const uuid_1 = require("uuid");
    6 | class Person {

  C:\wamp64\www\wp-content\plugins\application\js\ts\tests\test2.html:6:5
    5 |     <title>Test 2</title>
  > 6 |     <script type="module" src="../../Address.js"></script>
  >   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The environment was originally created here
    7 |     <script type="module" src="../../Application.js"></script>
    8 |     <script type="module" src="../../ApplicationForm.js"></script>

  ℹ Add the type="module" attribute to the <script> tag.
  ℹ Learn more: 

As you can see it recommends to: Add the type="module" attribute to the <script> tag. But if you look at the line it is referencing as the problem it already has type="module"

My environment:

• Parcel: 2.4.0
• Node: 16.14.2
• Windows 10

If I remove the script tags from my html file it builds fine but obviously that is not a real solution. It does isolate the problem to the script tags, the files being imported, or Parcel itself.

It doesn't seem to matter what modules I try to import with the script tag. Some files export more than one module so I thought that could be the issue. It, however, give the same results when I try to bring in a file with only one module.

After searching the internet it seems like the recommendation to add type="module" to the script tags is working for everyone else but continues to fail for me. I suspect that I either have something misconfigured or this is a bug with Parcel.

I'm getting an error that is telling me to add the type="module" attribute to the <script> tag when I run Parcel but I already have. I am trying to follow this tutorial but using my own code which has exports in it. See below:

I'm new to Parcel so I'm unsure if this is a bug with Parcel or if I'm doing something wrong and the error message is misleading. I'm simply trying to use parcel to package this code but I'm getting the below error. I'm using the default configuration.

When I run npx parcel test2.html --no-hmr (I have hmr off because it just does not seem to work and causes issues.) I'm expecting it to build but instead I get:

@parcel/transformer-js: Browser scripts cannot have imports or exports.

I was under the impression that Parcel was supposed to repackage these files so they would work in a browser. That seems like the whole point. Am I missing something?

Here is the rest of the output:

  C:\wamp64\www\wp-content\plugins\application\js\Person.js:4:12
    3 | exports.PersonType = exports.Person = void 0;
  > 4 | const _1 = require("./");
  >   |            ^^^^^^^^^^^^^
    5 | const uuid_1 = require("uuid");
    6 | class Person {

  C:\wamp64\www\wp-content\plugins\application\js\ts\tests\test2.html:6:5
    5 |     <title>Test 2</title>
  > 6 |     <script type="module" src="../../Address.js"></script>
  >   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ The environment was originally created here
    7 |     <script type="module" src="../../Application.js"></script>
    8 |     <script type="module" src="../../ApplicationForm.js"></script>

  ℹ Add the type="module" attribute to the <script> tag.
  ℹ Learn more: https://parceljs.org/languages/javascript/#classic-scripts

As you can see it recommends to: Add the type="module" attribute to the <script> tag. But if you look at the line it is referencing as the problem it already has type="module"

My environment:

• Parcel: 2.4.0
• Node: 16.14.2
• Windows 10

If I remove the script tags from my html file it builds fine but obviously that is not a real solution. It does isolate the problem to the script tags, the files being imported, or Parcel itself.

It doesn't seem to matter what modules I try to import with the script tag. Some files export more than one module so I thought that could be the issue. It, however, give the same results when I try to bring in a file with only one module.

After searching the internet it seems like the recommendation to add type="module" to the script tags is working for everyone else but continues to fail for me. I suspect that I either have something misconfigured or this is a bug with Parcel.

• javascript
• html
• typescript
• parceljs

• Is that Person.js code with exports your code or a transpiled version? – Bergi Commented Mar 31, 2022 at 19:40
• It is transpiled from Person.ts. I've tried loading the Person.ts directly into the type attribute but I get the same error. I think it automatically transpiles it if needed. – Jacob Chmielowiec Commented Mar 31, 2022 at 19:46
• The weird thing is it looks like it's transpiling to commonjs. But maybe that only appears so in that excerpt, I don't know. – Bergi Commented Mar 31, 2022 at 20:14

5 Answers 5

There are two ways you can resolve this error

1st - just add the type attribute in script tag module

<script type="module" src="./index.js"></script>

and make sure the package.json

 "scripts": {
        "start": "parcel src/index.html"
      }

and now run the npm run start it will run

if this not work then try 2nd method

2nd -

Recreate the project like this,

Make a project folder now run npm init -y to create package.json

now create your files or copy and paste them into this folder. (Example all your code in a src folder then copy paste src folder in this project folder)

Now run this command to install parcel npm install -g parcel-bundler

it took some time to install

Now open package.json and change the script

"scripts": {
    "start": "parcel serve src/index.html"
  },

save it Now run this command npm run start

And Boom it will work.

Well it seems to be working and I believe it was one of two things that did it:

1. I tried using babel to transpile and then decided to go back to using the default built into Parcel.
2. During this process I reinstalled my dependencies including Parcel.

If anyone knows why this fixed the problem please comment below for future visitors.

Its something in Parcel 2 and in this version because of Differential bundling which you can read from here and its automatically using the module/nomodule pattern base on the browsers which you declared in the "browserslist" key in your package.json file. the only thing you need to do while working with parcel 2 is Just use a **<script type="module"tag> **in your HTML file, pointing to your source code, and Parcel will automatically generate a nomodule version as well if needed and if its not needed then its mean your browser support and you are good to go

I got the same error

Package exports are disabled by default so I added this to package.json:

“@parcel/resolver-default”: { “PackageExports”: true }

Fixed my issue.

After adding type="module" delete the .parcel-cache folder and then try