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" --globalNow, run the index.js with node:
# node index.jsHere 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.2I 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 previewHere 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.jserror 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!