We Keep Coding

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.

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:
I tried using babel to transpile and then decided to go back to using the default built into Parcel.
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

failed to load wasm application

I'm trying to host a website, and I use a .wasm file with .js scripts created by the wasm-pack tool.
I tested the project locally with npm and node.js and everything worked fine.
But Then I hosted it on a raspberry (apache2), and when I try to access it, I get in the following error:
Failed to load module script: The server responded with a non-JavaScript MIME type of "application/wasm". Strict MIME type checking is enforced for module scripts per HTML spec.
details
There are multiple files, but here is the idea:
my index.html loads the module bootstrap.js
// bootstrap.js content
import("./index.js").catch(e => console.error("Error importing `index.js`:", e));
my main code is in the index.js, which calls test_wasm_bg.js
And finally, test_wasm_bg.js loads the wasm file with this line:
// test_wasm_bg.js first line
import * as wasm from './test_wasm_bg.wasm';
Where is the problem?
What is the right way to load a web assembly file?

I finally found what is the right way to load a wasm application in a wasm-bindgen project!
In fact, everything was on this page
When you compile the project without wanting to run it with a bundler, you have to run wasm-pack build with a --target flag.
wasm-pack build --release --target web.
This creates a .js file (pkg/test_wasm.js in my example) with everything you need to load the wasm-application.
And then this is how you use the functions created by wasm-bindgen (index.js):
import init from './pkg/test_wasm.js';
import {ex_function, ex_Struct ...} from '../pkg/test_wasm.js';
function run {
// use the function ex_function1 here
}
init().then(run)
You include your index.js in your HTML file
<script type="module" src="./index.js"></script>
And then it work's !
Edit:
Now that's I understand the javascript ecosystem a bit more, I cab try to explain what I understand:
There are many ways to do imports in js, here is a list :
https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm
You don't need to know much about that, except that the default target of wasm-pack is a node style ecmascript module. This import will work in node.js, but not directly in the browser. So in node, you can import a function from a wasm file directly, like so:
import {ex_function} from "./test.wasm"
But these styles of import don't work in the browser right now. Maybe it will be possible in the future
But for now, your browser only knows about js modules. So if you try to import a .wasm file directly in the browser, it will throw a mime type error because it doesn't know how to deal with webassembly files.
The tool you use to go from ecmascipt modules (with a lot of nmp packages for example) to a single js file is called a web-bundler (webpack, rollup, snowpack ...). If you work on a big project with npm, you probably need one. Otherwise, the "--target web" will say to wasm-bindgen to instantiate the wasm module the right way (look at the pkg/test_wasm.js)

Importing Node Modules With JavaScript

I apologize for the simple question, but I'm pretty new to web development and JavaScript.
I want to import a package I've installed using npm, specifically shopify-buy following the guide here: https://shopify.github.io/js-buy-sdk/
The package is in my node_modules folder and I'm trying to import it into a JavaScript document using import Client from 'shopify-buy';
When I try to load everything up in Chrome, I get an error on the import line
Uncaught SyntaxError: Unexpected identifier
The Firefox error is a bit different: import declarations may only appear at top level
What am I doing wrong?
Edit:
The import line is the first line in my JavaScript file. And my HTML file is properly linked to the JS file (I think).
shopify.js
// Functions for SHOPIFY
import Client from 'shopify-buy';
const client = Client.buildClient({
domain: 'xxxxx.myshopify.com',
storefrontAccessToken: 'xxxxx'
});
index.html
<script src="javascript/shopify.js"></script>

If you want to use npm modules via the syntax, like import sth from "something" for browsers, you'd need to set up a module bundler and ES6 compiler, such as Webpack and Babel. You'd need to google them and find tutorials for setting up them accordingly.
An easy way to use the SDK seems to be using the CDN, since it's already been built for browsers to understand. Something like:
index.html
<script src="http://sdks.shopifycdn.com/js-buy-sdk/v1/latest/index.umd.min.js"></script>
<script src="javascript/shopify.js"></script>
shopify.js
const client = ShopifyBuy.buildClient({
domain: 'your-shop-name.myshopify.com',
storefrontAccessToken: 'your-storefront-access-token'
});
console.log(client);

JavaScript Modules can only be run in module-mode scripts. Change your HTML to the following:
<script type="module" src="javascript/shopify.js"></script>

Load transpiled TS2 with HTML <script> tag?

I'm really new to Typescript2. I'm loving it and have written a module that I can easily import and use in other Typescript2 projects. But I also want my library to be able to be used as a standalone by simply using an HTML tag. When I do that, though, the browser complains "exports is undefined."
I'm guessing I have to write some sort of javascript that imports my module and instantiates it, and then have my browser load that wrapper script. Am I on the right track? How do I create a typescript that transpiles into something that I can just load natively in the browser with a script tag that just loads and instantiates?

You are on the right track. What you need is a module loader. For the browser, requirejs is mentioned in the typescript documentation, although there are several options (requirejs, browserify, webpack, rollup).
I use requirejs with typescript, so I have experience doing the following steps:
For requirejs, you could do the following to get started.
Ensure that you are compiling to modules in the AMD format when running the typescript compiler command (tsc) by using the typescript configuration file or command-line compiler option arguments
// tsconfig.json
{
"compilerOptions": {
"module": "amd"
}
}
Get requirejs
One source is http://requirejs.org/docs/download.html
Note the name of the .js file that is output by the typescript compiler
For example "my-script.js"
Add a script tag to the page
For example <script data-main="scripts/my-script" src="require.js"></script>
There is a simple "getting started" page for requirejs http://requirejs.org/docs/start.html
As a bonus, to export multiple modules to a single file, you can use the --outFile compiler option for typescript.

Debugging in Safari's Web Inspector, when using a module loader like SystemJS

I'm creating an Ionic app using es6 modules, TypeScript and SystemJS as a module loader. This is my setup:
tsconfig.json:
{
"compilerOptions": {
...
"target": "es5",
"module": "system",
...
}
}
index.html:
<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('js/app.js')</script>
example script (TypeScript):
import {IConfig} from "./app-config";
export class ConfigLoader {
...
}
Everything runs great in Chrome. However, when debugging using Safari's Web Inspector, I cannot place any breakpoints in the scripts because Web Inspector only shows scripts that are loaded directly from the HTML (through script tags), and not scripts loaded by XHR (in my case, by SystemJS). This means I cannot debug my own scripts, which is of course unacceptable.
I tried to work around this by using SystemJS like before, but also placing the script tags in the html, like so:
<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="js/app-config.js"></script>
... other app scripts
<script>System.import('js/app.js')</script>
However, this doesn't work, as SystemJS does not seem happy about this:
Invalid System.register call. Anonymous System.register calls can only
be made by modules loaded by SystemJS.import and not via script tags.
How do I use SystemJS and at the same time have the ability to debug in Safari? I'm looking for a solution a little more sophisticated than 'put a debugger statement in each script'...

Well, maybe you can use some IDE like WebStorm with a strong Debugger for Web and Node.
Examples:
You can see more about WebStorm debugger here.
Some alternatives for WebStorm:
Atom (Free)
Intellij IDEA (community: Free)
Visual Studio Code (Free)
...
P.S: I develop Ionic and React apps with WebStorm :D

Have you looked into using a remote debugger, such as https://github.com/google/ios-webkit-debug-proxy.
Also there is ghostlab, here is a nice article on getting started https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/