maplibre / maplibre-gl-directions

A plugin to show routing directions on a MapLibre GL JS map
https://maplibre.org/maplibre-gl-directions/
MIT License
76 stars 16 forks source link

missing import in svelte prod #240

Open joleeee opened 2 months ago

joleeee commented 2 months ago

I can navigate to the page which uses this library, but if i do a refresh or type the url directly, then i get an internal server error and this is spat out:

Error: Cannot find package '/app/node_modules/@maplibre/maplibre-gl-directions/index.js' imported from /app/build/server/chunks/_page.svelte-8wkpeQkC.js
    at legacyMainResolve (node:internal/modules/esm/resolve:215:26)
    at packageResolve (node:internal/modules/esm/resolve:841:14)
    at moduleResolve (node:internal/modules/esm/resolve:927:18)
    at defaultResolve (node:internal/modules/esm/resolve:1169:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:540:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:509:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:239:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:96:40)
    at link (node:internal/modules/esm/module_job:95:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Working workaround (breaks typing!):

diff --git a/src/lib/components/map/router.ts b/src/lib/components/map/router.ts
index abdd497..1b69f8a 100644
--- a/src/lib/components/map/router.ts
+++ b/src/lib/components/map/router.ts
@@ -4,9 +4,9 @@ import type {
     Feature,
     LineString,
     Point
-} from '@maplibre/maplibre-gl-directions';
-import MapLibreGlDirections from '@maplibre/maplibre-gl-directions';
-import { MapLibreGlDirectionsWaypointEvent } from '@maplibre/maplibre-gl-directions';
+} from '../../../../node_modules/@maplibre/maplibre-gl-directions/dist/maplibre-gl-directions.js';
+import MapLibreGlDirections from '../../../../node_modules/@maplibre/maplibre-gl-directions/dist/maplibre-gl-directions.js';
+import { MapLibreGlDirectionsWaypointEvent } from '../../../../node_modules/@maplibre/maplibr
e-gl-directions/dist/maplibre-gl-directions.js';
 import { writable, type Writable } from 'svelte/store';

 export default class RouterMapLibreGlDirections extends MapLibreGlDirections {

Perhaps everything needed is an export part in the package.json? I am unable to test this because if I use a local version of the library, then I don't get the error.

This seems very relevant: https://github.com/katspaugh/wavesurfer.js/discussions/3066#discussioncomment-6719001 and https://github.com/katspaugh/wavesurfer.js/commit/2313458570066b003f4c12611448cdf6d43c2da1

Note that this bug does not occur when using npm run dev or preview for me.

smellyshovel commented 2 months ago

I've seen something similar during dev runs, which is contrary to your case:

Note that this bug does not occur when using npm run dev or preview for me.

Never payed much attention to it, as usually a simple server restart helped.

Or did I understand your issue wrong? Is there a real runtime error or something?

joleeee commented 2 months ago

Sorry for the late reply. Yes, it is a real runtime error. Worked fine in dev locally but i guess for prod it strips everything unnecessary and this thing is wrongly removed. I only managed to reproduce it using this dockerfile which i use in prod (npm run preview works fine).

FROM node:20 AS builder
WORKDIR /app
COPY package*.json .
RUN npm ci
COPY . .

ARG PGHOST PGPORT PGDATABASE PGUSER PGPASSWORD
RUN PGHOST=$PGHOST PGPORT=$PGPORT PGDATABASE=$PGDATABASE PGUSER=$PGUSER PGPASSWORD=$PGPASSWORD \
    npx pgtyped -c pgtyped.json

RUN NODE_OPTIONS="--max-old-space-size=2048" npm run build
RUN npm prune --production

FROM node:20
WORKDIR /app
COPY --from=builder /app/build build/
COPY --from=builder /app/node_modules node_modules/
COPY package.json .
EXPOSE 3000
ENV NODE_ENV=production
CMD [ "node", "build" ]
smellyshovel commented 2 months ago

Not sure what to do here. I don't even think I fully understand the issue. Any help would be appreciated and PRs welcome.

joleeee commented 3 weeks ago

In simple terms, when i build for prod using the Dockerfile above, I get a dependency error at runtime. It can be bypassed by doing from ../../../../node_modules/@maplibre/maplibre-gl-directions/dist/maplibre-gl-directions.js instead of from '@maplibre/maplibre-gl-directions'

smellyshovel commented 3 weeks ago

@joleeee sounds like a builder's issue. Or a Docker one. This definitely doesn't happen in simpler cases. If you were able to reproduce it somewhere where I'd have an access, I could take a look at it. But I'm not sure if there's something like repl/stackblitz/you-name-it available which supports Docker. Otherwise, in Vite-based projects without Docker, I can't confirm that something like this happens.