jd Posts - Answer Overflow

•Created by jd on 9/20/2024 in #❓・help

Fix for <stdin>:34:12: ERROR: Expected identifier but found ":"

Nuxt doesn't even start, any ideas?

ERROR  Cannot start nuxt:  Transform failed with 1 error:
<stdin>:34:12: ERROR: Expected identifier but found ":"

  <stdin>:34:12: ERROR: Expected identifier but found ":"
  at failureErrorWithLog (node_modules\nuxt\node_modules\esbuild\lib\main.js:1472:15)
  at node_modules\nuxt\node_modules\esbuild\lib\main.js:755:50
  at responseCallbacks.<computed> (node_modules\nuxt\node_modules\esbuild\lib\main.js:622:9)
  at handleIncomingPacket (node_modules\nuxt\node_modules\esbuild\lib\main.js:677:12)
  at Socket.readFromStdout (node_modules\nuxt\node_modules\esbuild\lib\main.js:600:7)
  at Socket.emit (node:events:519:28)
  at addChunk (node:internal/streams/readable:559:12)
  at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
  at Readable.push (node:internal/streams/readable:390:5)
  at Pipe.onStreamRead (node:internal/stream_base_commons:191:23)

ERROR  Cannot start nuxt:  Transform failed with 1 error:
<stdin>:34:12: ERROR: Expected identifier but found ":"

  <stdin>:34:12: ERROR: Expected identifier but found ":"
  at failureErrorWithLog (node_modules\nuxt\node_modules\esbuild\lib\main.js:1472:15)
  at node_modules\nuxt\node_modules\esbuild\lib\main.js:755:50
  at responseCallbacks.<computed> (node_modules\nuxt\node_modules\esbuild\lib\main.js:622:9)
  at handleIncomingPacket (node_modules\nuxt\node_modules\esbuild\lib\main.js:677:12)
  at Socket.readFromStdout (node_modules\nuxt\node_modules\esbuild\lib\main.js:600:7)
  at Socket.emit (node:events:519:28)
  at addChunk (node:internal/streams/readable:559:12)
  at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
  at Readable.push (node:internal/streams/readable:390:5)
  at Pipe.onStreamRead (node:internal/stream_base_commons:191:23)

3 replies

NNuxt

•Created by jd on 9/6/2024 in #❓・help

Custom, external, $fetch fetches the external API instead of the nuxt server, BUT only in production

I'm using the same setup locally and in production: * caddy, running on the host, not in a docker container * docker container for nuxt * docker container for the api (FastAPI) It works locally, but doesn't work on the VPS. Here's some of the setup: Caddyfile

{
        debug
        email [email protected]
}

app.example.com {
        reverse_proxy localhost:3000
}

{
        debug
        email [email protected]
}

app.example.com {
        reverse_proxy localhost:3000
}

docker-compose.yaml

name: example
networks:
  example:
    name: example
    driver: bridge
services:
  nuxt:
    container_name: nuxt
    ports: 
      - "3000:3000"
    build:
      dockerfile: Dockerfile.prod
      context: ../nuxt
    image: example/nuxt
    env_file:
      - ../nuxt/.env
    depends_on:
      - api
    networks:
      - example
    environment:
      - NUXT_PUBLIC_API_BASE_URL=http://api:8001/api
  api:
    container_name: api
    build:
      context: ../fastapi
    image: example/api
    networks:
      - example
    ports: 
    - "8001:8001"

name: example
networks:
  example:
    name: example
    driver: bridge
services:
  nuxt:
    container_name: nuxt
    ports: 
      - "3000:3000"
    build:
      dockerfile: Dockerfile.prod
      context: ../nuxt
    image: example/nuxt
    env_file:
      - ../nuxt/.env
    depends_on:
      - api
    networks:
      - example
    environment:
      - NUXT_PUBLIC_API_BASE_URL=http://api:8001/api
  api:
    container_name: api
    build:
      context: ../fastapi
    image: example/api
    networks:
      - example
    ports: 
    - "8001:8001"

nuxt/Dockerfile.prod

FROM node:latest AS build
COPY . /app
WORKDIR /app
RUN npm install
RUN npm run build

FROM build AS base
WORKDIR /app
COPY --from=build /app/.output /app
EXPOSE 3000
CMD ["node", "./server/index.mjs"]

FROM node:latest AS build
COPY . /app
WORKDIR /app
RUN npm install
RUN npm run build

FROM build AS base
WORKDIR /app
COPY --from=build /app/.output /app
EXPOSE 3000
CMD ["node", "./server/index.mjs"]

api.Dockerfile

FROM python:3.10

WORKDIR /app

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY . /app

EXPOSE 8001

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8001"]

FROM python:3.10

WORKDIR /app

COPY requirements.txt .

RUN pip install -r requirements.txt

COPY . /app

EXPOSE 8001

CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8001"]

nuxt/.env

APP_NAME=""
NITRO_PORT="3000"
SUPABASE_CONFIG="mock"
NUXT_PUBLIC_API_BASE_URL="http://api:8001/api"
COMPATIBILITY_DATE=2024-08-16

APP_NAME=""
NITRO_PORT="3000"
SUPABASE_CONFIG="mock"
NUXT_PUBLIC_API_BASE_URL="http://api:8001/api"
COMPATIBILITY_DATE=2024-08-16

api/.env

SUPABASE_CONFIG=mock

SUPABASE_CONFIG=mock

1 replies

NNuxt

•Created by jd on 8/22/2024 in #❓・help

Best way to save user context to avoid needing to fetch at every page?

What's the best, but mostly simple, way to save user context to avoid needing to fetch at every page? The user context comes back from an API that I call server-side. Server Middleware helps me with the user context on the server-side, but I can't figure out how to replicate the same behavior for the pages/ directory

3 replies

NNuxt

•Created by jd on 8/20/2024 in #❓・help

Docker and Nuxt in production

I can't find the way to ask me question concisely But I need help deploying my nuxt app in production I'm currently running into the issue that my nuxt app (built with generate, ie SSG), and I can't find a way to make it use the right api base url to perform the requests through to the other docker container where the api is exposed through the docker network (but I don't want to expose the api to the public). Anyone with experience with that that can help me out?

7 replies

NNuxt

•Created by jd on 7/11/2024 in #❓・help

Best practices for state/composable to depend on fetched data?

I have a useUser composable that fetches API data to build the user: userInfo and companyInfo. I get the error that a composable is used outside the Nuxt instance. I want to know the best practices for implementing something like this, if anyone knows enough to help Here's the code for the user composable and the user plugin. composables/useUser.js

export const useUser = async () => {
    async function refresh() {
        const authUser = useSupabaseUser()

        const { data: userInfo, error: userError } = await useFetch(
            `/user/${authUser.value.id}`,
        )

        const { data: company, error: companyError } = await useFetch(
            `/company/${userInfo.value.company_id}`,
        )

        return { ...userInfo.value, company: company.value }
    }

    const fetchedUser = await refresh()
    const user = useState('user', () => fetchedUser)

    return { user, refresh }
}

export const useUser = async () => {
    async function refresh() {
        const authUser = useSupabaseUser()

        const { data: userInfo, error: userError } = await useFetch(
            `/user/${authUser.value.id}`,
        )

        const { data: company, error: companyError } = await useFetch(
            `/company/${userInfo.value.company_id}`,
        )

        return { ...userInfo.value, company: company.value }
    }

    const fetchedUser = await refresh()
    const user = useState('user', () => fetchedUser)

    return { user, refresh }
}

plugins/user-plugin.js

export default defineNuxtPlugin((nuxtApp) => {
    const { user, refresh } = useUser()
    console.log('user-plugin', user)
})

export default defineNuxtPlugin((nuxtApp) => {
    const { user, refresh } = useUser()
    console.log('user-plugin', user)
})

6 replies

Gaming

Programming