I am unable to load h3-JS in my quasar project

[vishnu947]

I am able to install h3-js by using npm and then after i am not able to run any one of the following h3-js core functions:

// Convert a lat/lng point to a hexagon index at resolution 7
const h3Index = h3.latLngToCell(37.3615593, -122.0553238, 7);
// -> '87283472bffffff'

// Get the center of the hexagon
const hexCenterCoordinates = h3.cellToLatLng(h3Index);
// -> [37.35171820183272, -122.05032565263946]

// Get the vertices of the hexagon
const hexBoundary = h3.cellToBoundary(h3Index);
// -> [ [37.341099093235684, -122.04156135164334 ], ...]

I am getting the following error while i tried any of the above core functions:

[dfellis]

Your description doesn't match your screenshot. Installing h3-js using npm and then running those functions works just fine:

Your screenshot shows stack traces from the output of Vue's runtime core, not h3-js. You likely aren't require()ing or importing the h3-js module in the way Vue wants you to, but I am not familiar with Vue so I can't help you further on that without seeing the actual code you're trying to run, at least.

[vishnu947]

This is my package.json File which had h3-js installed:
"scripts": {
"lint": "eslint --ext .js,.vue ./",
"format": "prettier --write "**/*.{js,vue,scss,html,md,json}" --ignore-path .gitignore",
"test": "echo "No test specified" && exit 0",
"dev": "quasar dev",
"build": "quasar build"
},
"dependencies": {
"@quasar/extras": "^1.16.4",
"geojson2h3": "^1.2.0",
"h3-js": "^3.6.1",
"quasar": "^2.6.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0"
},
"devDependencies": {
"@quasar/app-vite": "^1.3.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"postcss": "^8.4.14",
"prettier": "^2.5.1"
},
"engines": {
"node": "^18 || ^16 || ^14.19",
"npm": ">= 6.13.4",
"yarn": ">= 1.21.1"
}

In my Vue File these are my imports I am able to see all console logs for geojson2h3 but for h3-js i am getting the attached console errors :

//geojson2h3
import geojson2h3 from "geojson2h3";

const polygon = {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-122.47485823276713, 37.85878356045377],
[-122.47504834087829, 37.86196795698972],
[-122.47845104316997, 37.86010614563313],
[-122.47485823276713, 37.85878356045377],
],
],
},
};

const hexagons = geojson2h3.featureToH3Set(polygon, 10);
// -> ['8a2830855047fff', '8a2830855077fff', '8a283085505ffff', '8a283085506ffff']
console.log("hexagons", hexagons);

const feature = geojson2h3.h3SetToFeature(hexagons);
console.log("hexafeaturegons", feature);

//h3-js
//First way i tried
const h3 = require("h3-js");
console.log("h3 latLngToCell", h3);

const h3Index = h3.latLngToCell(37.3615593, -122.0553238, 7);
console.log("h3Index", h3Index);

//h3-js
//Second way
import { latLngToCell } from "h3-js";
console.log("h3 latLngToCell", latLngToCell);

//h3-js
//Third way
import latLngToCell from "h3-js";
console.log("h3 latLngToCell", latLngToCell);

I tried all the above three ways to import h3 in my vue file but getting the following errors as attached

[dfellis]

Oh, looking at that package.json it becomes clear:

"h3-js": "^3.6.1",

That's v3.x for H3. Between v3 and v4 there was a major cleanup of function naming for better consistency (and error handling and other things we wanted to clean up). You're using the v4 naming eg latLngToCell but the v3 version of h3-js follows the v3 naming eg geoToH3.

My checks above assumed you were using the most recently-released version of h3-js.

So you can replace latLngToCell with geoToH3 or you can upgrade h3-js to the latest version (which will also get you new features, like vertex mode, and some minor perf bumps in most cases).