klappt unter MacOS, aber nicht Linux

[ThetaGamma]

Servus @effem

ich hab den tunecard creator local auf meinem Mac mit npm run dev zum Laufen bekommen und bekomme auch die PDFs. --> Top Job! Allerdings läuft der code nicht auf Linux. Ich hab es vollständig lokal unter Linux (ebenfalls mit npm run dev) versucht, als auch in einem container.

FYI: Dockerfile des containers

FROM node:22-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# ENV VITE_SPOTIFY_REDIRECT_URI=$

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM nginx AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

COPY --from=builder /app/dist /usr/share/nginx/html

Als Browser habe ich Chrome, Safari und Firefox getestet. Die App steigt bei dem "require crypto" aus (vgl code unter dist/assets/*.js nach dem build), sobald die app sich bei Spotify authentifizieren will

# snip
static tryLoadNodeWebCrypto() {
      try {
        const { webcrypto: e } = require("crypto");
        return e;
      } catch (e) {
        throw e;
      }
    }
# snap

Die Lib kommt über die Spotify SDK in den Code. Verschiedene Quellen empfehlen wahlweise crypto durch crypto-js oder crypto-browserify in der vite.config.tszu ersetzen. z.B. so

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "crypto": "crypto-js"
    }
  }
})

Tja, aber leider auch erfolglos...

(BTW:

• in beiden Readme's sollte erwähnt werden, dass man bei developer.spotify.com eine App erzeugen muss, um an die client-id bzw client-secret zu kommen - ich kann einen PR dazu liefern mit ein paar Tweaks für die docker/docker compose files

[ThetaGamma]

Vergessen: in tunequest funktioniert die authentifizierung mit client-id und client-secret und ich habe alle validen callback urls im Spotify Developer Dashboard hinzugefügt (e.g. localhost:3000, localhost:5173, usw)

[effem]

Hi, ich hab gerade mal unter linux (ubuntu 22.04.1) mit node 20.9 und npm 10.1 getestet und hat ohne probleme geklappt. Hast du vielleicht noch ein paar mehr infos über dein OS + Node / NPM Version.

Funktioniert das bei dir im docker container nicht oder lässt du das lokal direkt bei dir unter linux laufen?

Viele Grüße

[ThetaGamma]

Hi das ist sehr strange... ich habe es sowohl direkt unter linux versucht (Ubuntu 22.04.4, node v22.6.0, npm 10.8.2) als auch im Container. Beim Builder hab ich einmal node 20 und dann node-22 alpine getestet, der runner nginx basiert auf debian. Mein Mac hat übrigens auch node v22.6.0, npm 10.8.2.

Ich ziehe mal eine ganz jungfräuliche VM mit deinen Versionen hoch und teste dort... Viele Grüße Torsten

[ThetaGamma]

OK, getestet: gleiches Ergebnis: Module "crypto" has been externalized for browser compatibility. Cannot access "crypto.webcrypto" in client code. See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

[effem]

Kommt diese meldung in der Node/Vite console oder in der Browser Console? Wenn du dir den code aber mal anguckst, bei mir passiert da bis auf nen paar loops und nen bisschen parsen nicht wirklich viel, das scheint ein problem zwischen vite und @spotify/web-api-ts-sdk zu sein, da kann ich nicht wirklich viel dran machen zumal ich es ja leider bei mir nicht mal reproduzieren kann...

[ThetaGamma]

In der Browser Console. Dann lassen wir's darauf beruhen 😊