Search code examples
javascripthtmltypescriptparceljs

Parcel.js says to add the type="module" attribute to the <script> tag but I've already added it

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.

Solution

  • 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.