JavaScript import works with Node but fails as HTML script

Question

I'm running Ubuntu 20.04 under WSL in Windows 11.

Here is my JavaScript file main.mjs:

console.log("In main.mjs");
import { TransferTransaction } from 
  './node_modules/@hashgraph/sdk/src/index.js';
console.log("Imported hashgraph");

When I run it using node, it gives the expected result:

> node main.mjs  
  <pause for a couple of seconds>
  In main.mjs
  Imported hashgraph

Here is my HTML code page.html:

  <!DOCTYPE html>
  <html>
        <head>
          <meta charset="UTF-8">
        </head>   
        <body>
          <script  src='./main.mjs' type="module">
          </script>
          <p> question </p>
        </body>
  </html>

When I invoke it:

<In same directory as page.html and main.mjs:>
> python3 -m http.server

<In locator bar:>
 localhost:8000/page.html

It gives the error when viewed in the console (F12):

Uncaught TypeError: failed to resolve module specifier "js-logger". Relative reference must start with either "/", "./", or "../".

There is a js-logger directory in directory node_modules. Here is a listing of the node_modules directory:

@ethersproject
@grpc
@hashgraph
@protobufjs
@types
ansi-regex
ansi-styles
asynckit
axios
base64-js
bignumber.js
bn.js
brorand
buffer
cliui
color-convert
color-name
combined-stream
crypto-es
crypto-js
delayed-stream
elliptic
emoji-regex
escalade
follow-redirects
form-data
get-caller-file
hash.js
hashconnect
hmac-drbg
i
ieee754
inherits
is-fullwidth-code-point
isomorphic-ws
js-base64
js-logger
lodash.camelcase
long
mime-db
mime-types
minimalistic-assert
minimalistic-crypto-utils
multiformats
protobufjs
protocol-buffers-schema
protons
require-directory
signed-varint
simple-crypto-js
string-width
strip-ansi
ts-typed-events
tweetnacl
uint8arrays
utf8
uuid
varint
wrap-ansi
ws
 y18n
yargs
yargs-parser

Module resolution (among other things) is different in Node.js vs the browser. You can't just pick up a Node.js module and use it in a browser. See, for example, [Relative references must start with either "/", "./", or "../"](https://stackoverflow.com/q/56507441/215552) — Heretic Monkey, Oct 07 '22 at 18:36
you might have used common js in your js logger file to export your file but in js file you have used es6 module to import . check that out first — Rahul Mohanty, Oct 07 '22 at 18:38

JavaScript import works with Node but fails as HTML script

0 Answers0