javascript node.js ubuntu npm maplibre-gl

How to import module from index.js

I created an example node.js project:

  "name": "example",
  "version": "1.0.0",
  "type": "module",

Here is the index.js (two rows only):

"use strict";
import MapLibreGlDirections, { LoadingIndicatorControl } from "@maplibre/maplibre-gl-directions";

Install the "@maplibre/maplibre-gl-directions" in global:

# npm install "@maplibre/maplibre-gl-directions" --global

Now, run the index.js with node:

# node index.js

Here is the error:

node:internal/errors:496
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@maplibre/maplibre-gl-directions' imported from /root/Documents/test/index.js
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:890:9)
    at moduleResolve (node:internal/modules/esm/resolve:939:20)
    at defaultResolve (node:internal/modules/esm/resolve:1132:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v18.18.2

I copied the "import" from here: https://github.com/maplibre/maplibre-gl-directions

The package "@maplibre/maplibre-gl-directions" has already been installed in global, but index.js still can't find the module (ERR_MODULE_NOT_FOUND).

What's wrong in the index.js? How to import that module?

Update:

After installing vite in global with npm, try to build with the following files and contents but it's not working.

package.json:

{
  "name": "example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "author": "",
  "license": "ISC"
}

index.js:

"use strict";
import MapLibreGlDirections, { LoadingIndicatorControl } from "@maplibre/maplibre-gl-directions";

console.log("hello world in console");

function hello() {
  document.write("hello world in document")
}

module.exports = hello;

index.html:

<html>
<head>
  <script src="index.js"></script>
</head>
<body>
  hello world in body!
  <script type="javascript">
    new hello()
  </script>
</body>
</html>

After running:

# npm run build
# npm run preview

Here is the output in Firefox:

hello world in body!

Here is the expected output in Firefox:

hello world in body! 
hello world in document!

The vite is not building the "index.js" in the project. How to make this example project work with vite build?

Update 2:

After adding in script:

<script type="module" src="index.js"></script>

Then rebuild with: npm run build

error during build:
Error: [vite]: Rollup failed to resolve import "@maplibre/maplibre-gl-directions" from "/root/Documents/test/index.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

It's still can't find the module with vite, it's the same as node. What's the problem for importing that module from index.js?

Update 3:

vite.config.js: (one row only)

import { defineConfig } from 'vite'

Then rebuild:

failed to load config from /root/Documents/test/vite.config.js
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from /root/Documents/test/vite.config.js.timestamp-1710392651394-3723eb717de11.mjs
    at new NodeError (node:internal/errors:405:5)
    at packageResolve (node:internal/modules/esm/resolve:916:9)
    at moduleResolve (node:internal/modules/esm/resolve:973:20)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:403:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:372:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:249:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

The same ERR_MODULE_NOT_FOUND!

Solution

You need to use this package in a browser environment rather than using Node to execute it.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@maplibre/maplibre-gl-directions": "^0.6.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@typescript-eslint/eslint-plugin": "^7.1.1",
    "@typescript-eslint/parser": "^7.1.1",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "typescript": "^5.2.2",
    "vite": "^5.1.6"
  }
}

// Import the plugin
import MapLibreGlDirections, { LoadingIndicatorControl } from "@maplibre/maplibre-gl-directions";

// Make sure to create a MapLibreGlDirections instance only after the map is loaded


function App() {
  console.log(MapLibreGlDirections);
  console.log(LoadingIndicatorControl);
  return (
    <>
    </>
  )
}

export default App

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

plese check dist folder