We Keep Coding

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)

I got error when link external library with javascript

I installed the color-convert library via npm but the browser shows me an error message
Uncaught ReferenceError: require is not defined home.js:134
at HTMLButtonElement.<anonymous> (home.js:134)
at HTMLButtonElement.dispatch (jquery-3.4.0.js:5233)
at HTMLButtonElement.elemData.handle (jquery-3.4.0.js:5040)
JS
var convert = require('color-convert'); // this is line 134
alert(convert.hex.lab('DEADBF'));
I think there is a problem with paths?

require() isn't a function provided by your browser, and is more of a sign that this source code is a common JS module.
In order to use a common JS module, you first need to run your source through a program that bundles the source, sorta replacing each require('other_module') with the source of the other module, producing a single Javascript source file which can included in your frontend HTML.
Two examples of bundlers are browserify and webpack.

protobuf.js Runtime Error $protobuf is not defined

I am using protobuf.js in an ionic2 project. I have a valid .proto file which I first convert to a static javascript file by:
pbjs -t static databaseapi.proto > databaseapi.js
Becasue ionic2 uses typescript, I add a d.ts file by doing:
pbts databaseapi.js > databaseapi.d.ts
my application transpiles and runs, but I end up with a runtime error:
Runtime Error $protobuf is not defined
I know it is because the compiled protocol buffer file references the variable $protobuf, but I don't quite know where this variable is defined. I also don't know how to include the missing file because it needs to be referenced by the js file rather than the ts file.

-t static just creates the raw code but doesn't wrap it as a module (and thus does not define the $protobuf dependency).
To also wrap it as a module, use -t static-module and pick your desired format through -w default|commonjs|amd|es6. default uses an universal wrapper that works with AMD, CommonJS and a global variable.
For all command line options, see: https://github.com/dcodeIO/protobuf.js#command-line

Thanks dcode, I ended up doing it a little differently. To others reading this, the solution is Ionic specific, please see the answer by dcode for a better generic solution.
What I ended up doing, was adding a reference to the compiled js file to Cordova's index.html as follows:
<script src="lib/protobuf.js"></script>
<script>$protobuf = protobuf;</script>
<script src="js/databaseapi.js"></script>
<script> $database = $root.com.database.api.v1; </script>
databaseapi.js is the name of the compiled protobuf file.

Loading Node.js Module using Browserify

I am using Browserify (http://browserify.org/) to load a module in JavaScript. I keep getting the following error:
I have no idea why this is happening. I have a "package.json" file in a directory called "wordnet-develop", which is located in the same location as the JavaScript file.
Originally I thought that there might be a path problem. However, I did the same exact thing but with a test.js file, and it worked. So, I think that there may be something wrong with using package.json.
The beginning of the package.json file:
The beginning of my JavaScript file:
The directory containing the javascript file:
The directory (seen above as "wordnet-develop")containing the package.json file:
UPDATE
I replaced var WordNet = require('./wordnet-develop/node-wordnet'); with var WordNet = require('./wordnet-develop/lib/wordnet'); as suggested by klugjo.
It may have worked, but now I am getting a new error message:
This happened again but with 'async' module missing. I checked lib/wordnet, and it included requirements for bluebird and async, so that's probably the error source.
However, I now have no idea what to do. I'm new to node.js and modules, so I'm unfamiliar with solutions. Am I supposed to parse all of the code and find all the required modules online? Shouldn't they have been included in the module? Is the problem that I'm trying to use a node.js module in vanilla JavaScript?

I don't think what you are trying to do is supported: you have to link directly to the entry javascript file of the node-wordnet library.
Replace
var WordNet = require('./wordnet-develop/node-wordnet');
With
var WordNet = require('./wordnet-develop/lib/wordnet');

how to convert\ load javascript file into a typescript file

I have a javascript file which I need to convert it into a typescript file (.d.ts). When I just rename the file as file.ts, I am getting error ("could not find xxxx") while opening it in visual studio. Are those errors in my code or should I add anything extra to the typescript file ? The file is somewhat complex. Need advice\ help.

If you want to convert a JavaScript file to TypeScript, you need to:
Add a new empty TypeScript file to your project
Copy the JavaScript into the TypeScript file
Help the compiler to understand the file by fixing any compilation errors (mostly this will involve adding type information that cannot be inferred)
If you want to use a JavaScript file without converting it, you need a type definition. There are detailed instructions on that if you follow the link.