Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
84
rated 0 times [  85] [ 1]  / answers: 1 / hits: 5428  / 2 Years ago, thu, march 31, 2022, 12:00:00

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:wamp64wwwwp-contentpluginsapplicationjsPerson.js:4:12
3 | exports.PersonType = exports.Person = void 0;
> 4 | const _1 = require("./");
> | ^^^^^^^^^^^^^
5 | const uuid_1 = require("uuid");
6 | class Person {

C:wamp64wwwwp-contentpluginsapplicationjststeststest2.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.


More From » html

 Answers
2

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.


[#232] Tuesday, March 22, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
margaritakristinak

Total Points: 502
Total Questions: 127
Total Answers: 98

Location: England
Member since Mon, May 17, 2021
3 Years ago
;