Newbie lost at JS Client side import

Local Setup
1

I am learning that I am not aware of a lot of prerequisites before taking on this venture. However I hope that if I cannot get a direct answer perhaps someone may know where I should begin before this line…

https://heroiclabs.com/docs/nakama/client-libraries/javascript-client-guide/#install-and-setup

To me the statement “import it into your project to use it” doesn’t mean anything, as I am not sure what the definition of ‘project’ is.

So I’ve attempted to troubleshoot what I’m missing on my own and attempted the following.

I began by using http-server (http-server - npm) and having everything I want in the index.html
importing it as source in the html does not work, as the browser doesn’t know how to interpret the @ symbol.

So I found an article about setting up a web server with node and express on the mozilla site. so I went back to writing the same way as in the guide with import from and when I run it with

node main.js
It says that ‘import’ cannot be used outside a module. Some help sites said to add in “type”: “module”, to the package.json but this hasn’t helped for me. So, similar to how they load Express I attempted to do the following syntax

const {Client} = require ("@heroiclabs/nakama-js");

There’s not initialization errors for this first line, however when adding anything beyond the first line of the guide there are errors reported during initialisation.
with just

var client = new nakamajs.Client("defaultkey", "127.0.0.1", "7350");

It says : “ReferenceError: nakamajs is not defined”

So I realize that I am missing quite a few basics that were meant to be understood beforehand, however I am not sure where to even begin to understand how to structure a ‘project’ as it is expected in here. If there are some prerequisites that I could be guided towards I would appreciate it.

2

This is to do with your JS build system. How are you downloading the NakamaJS dependency and how are you bundling up your JS application?

3

I agree, this documentation is completely opaque to me.
With hours of research I found one way that works: installing @heroiclabs/nakama-js with npm in the folder of my index.html, then using

const nakamajs = require(“@heroiclabs/nakama-js”);

in main.js, then browserifying main.js to bundle.js and src-ing this in index.html instead of main.js.

I was supposing it’s what’s implied by the “The client is available on NPM. After installing the client import it into your project.” part.
But now it seems I was wrong because I tried to do the same with the deviceInfo part, and browserify won’t work on require(‘react-native-device-info’).
Says:

Error: Parsing file /path/to/html/node_modules/react-native/index.js: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ (14:0)

So now I’m completely in the dark again…

It’s a shame because installing the nakama server, locally, then in a droplet, adding a leaderboard, then using it in a unity client, all that went flawlessly. But simply using the JS client, about 8 hours in, I still have no idea.

4

I haven’t had much time to work on this more.

It is as was suggested and the ‘build’ of my system is where my knowledge is lacking.

I like jquentin installed via npm

Last I was working on this, I finally got an understanding that we are likely meant to setup a webserver to be able to include the const {Client} = require ("@heroiclabs/nakama-js"); in the pages served.

I’ve tried using Express’ application generator (found here : Express application generator )

then modify the app.js to include the client server reference by following their third party middleware inclusion. (here: Using Express middleware )

I finally got it to accept the syntaxes inclusion, but then there were additional errors. Not sure if I’m on the right path here.

5

Hi, I am having the same problem as you. Did you get the solution?

6

I quit out of frustration, but I think I found out how to load this properly now.

I got setup using Nodejs for my server, so if you’re doing something else you’ll need to do something different.

When you first setup a nodejs main directory you’ll have a single folder called node_modules as well as package.json and package-lock.json

This doesn’t give you anything to run, so you’ll need to make a main javascript file that launches the server. I called it app.js
with the following.

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;


const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Using the command below will launch the server

node app.js

You should be able to access a webpage that says Hello World from the location below
http://127.0.0.1:3000/

Now, we have a basic thing, but we need to get our Nakama client-side module included on the server.

You can add in the below,

import {Client} from "@heroiclabs/nakama-js"

Now you’ll get an error saying that you can’t do that right now. So we need to tell our nodejs settings to expect there to be modules included using the ES6 format

import {thing} from "place"

To do that you’ll need to modify the package.json file.
If you did the

npm init

Command, you’ll have a lot more details in the package.js file. add the line

  "type": "module",

Mine looks like the below

{
  "dependencies": {
    "@heroiclabs/nakama-js": "^2.4.1",
    "node": "^18.10.0"
  },
  "name": "game_pls",
  "version": "1.0.0",
  "description": "fuck",
  "main": "app.js",
  "type": "module",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Now if you run the server again… A new error. Because we declared we’re using modules, and we didn’t change the file type, it’s complaining about the require method. Easy enough, we just make that an import instead.

//replace
const http = require('http');
//with
import * as http from 'http';

Which give use below.

import * as http from 'http';

const hostname = '127.0.0.1';
const port = 3000;
import {Client} from "@heroiclabs/nakama-js"

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Now if you run the server, it should load everything without giving any errors. I haven’t gotten further than this, but it’s further than I was last time… I need to get the Nakama server running again and see if I can get the client to connect now that the module is loading without errors.

Sources :

7

Initial Nodejs setup: Setting up a Node development environment - Learn web development | MDN
How to set type of nodejs to module : How to use ES6 import in Node

8

alright, I give up.

Every step forward is met with another compatibility issue.

I’m gonna find something that actually has more details about what frameworks it’s compatible with, because I’m tired of trying to figure this out and getting nowhere.