Failed to resolve module specifier

Question

I`m only starting my JS journey and I will be really grateful if you help me to receive data using the JS. I found that info on the alcor exchange site that is the exchange site for wax (gaming crypto currency).

What is on site:

// Code not tested yet, and provided for explanation reason

import fetch from 'node-fetch'
import { Api, JsonRpc, RpcError } from 'eosjs'

const rpc = new JsonRpc('https://wax.greymass.com', { fetch })

// Get buy orderbook from table

const { rows } = await rpc.get_table_rows({
  code: 'alcordexmain',
  table: 'buyorder',
  limit: 1000,
  scope: 29, // Market id from /api/markets
  key_type: 'i128', // we are using it for getting order sorted by price.
  index_position: 2
})

I faced with some trouble because of JSHint version and updated it to 9. But still "await" is red and JSHint is asking for semicolon after it - which causes huge amount of new errors. However the project is opening in the browser with no info of course. But in the console I see an error.

index.html:1 Uncaught TypeError: Failed to resolve module specifier "node-fetch". Relative references must start with either "/", "./", or "../".

P.S. I checked the posts with such error but actually didn't understand what should I do because all of them are proposing some changes for JSON file and I only have index.html and that js. file.

Answer 1

There is a difference between JavaScript in your browser and JavaScript on a server.

JavaScript in a browser is the code that can be injected into HTML (inlined or linked), which is evaluated by the browser.

JavaScript on a server is not related to JavaScript in a browser. The language is the same, but the environment is not. It's like “draw in Paint” and “draw on a real life canvas”. Colors are the same, but everything else is not.

So, what you are trying to do here is to run server-side JavaScript in a browser. That's the real reason you're getting this error.

There are two ways to fix this error.

Probably the one you should go

You should install Node.js, read about npm, init your npm project, put everything into .js file and eval using Node.

In a nutshell, let's say you've already installed Node.js and node -v outputs something in your terminal. Then everything you need to do is:

$ cd path/to/the/directory/you/like
$ npm init -f
$ npm install --save node-fetch eosjs
$ touch index.js

Then edit index.js using your favorite editor, adding there the code you're trying to run.

You may encounter error due to using await on a “top-level”. In this case, put it into an async function:

import fetch from 'node-fetch'
import { Api, JsonRpc, RpcError } from 'eosjs'

const rpc = new JsonRpc('https://wax.greymass.com', { fetch })

(async () => {
  const { rows } = await rpc.get_table_rows({
    code: 'alcordexmain',
    table: 'buyorder',
    limit: 1000,
    scope: 29, // Market id from /api/markets
    key_type: 'i128', // we are using it for getting order sorted by price.
    index_position: 2
  });
})();

Aaaand, that's it. You do not need to run browser here at all.

Probably the one you should not go, but can

If you need to run your JavaScript in a browser, then you need to either bundle all the deps using a tool like webpack (which still requires you to use Node.js & npm), or you may replace the deps you're trying to use with client-side alternatives.

E.g. instead of requiring node-fetch you may use Fetch API.

What to use instead of eosjs I do not know, but if you decide to use this dependency in a browser, you will at least need to use import maps to tell the browser how to resolve such dependencies. Because, well, the error you've got tells you exactly this: your browser does not know what you're trying to import. Browsers use URLs as import paths, not ids (or “bare names”).