Nuxt•8mo ago

useElementSize is not defined, when deploy on kubernetes

Hello 👋 I try to deploy a nuxt ui pro template to a kubernetes cluster. Everything fine, the app is successfully deployed + alive. But when i create a simple port-forward on it and I load the app i got useElementSize is not defined. But unfortunately, when I run the same image locally i don't get the error. Have you ever heard of this issue ? My dockerfile :

# use node 16 alpine image as build image
FROM node:20-alpine as builder

# create work directory in app folder
WORKDIR /app

# install required packages for node image
RUN apk --no-cache add openssh g++ make python3 git

# install pnpm
RUN npm install -g pnpm

# copy over package.json files
COPY package.json /app/
COPY pnpm-lock.yaml /app/

# set the build-time argument
ARG NUXT_UI_PRO_LICENSE

# set the environment variable
ENV NUXT_UI_PRO_LICENSE=$NUXT_UI_PRO_LICENSE

# install all dependencies
RUN pnpm install

# copy over all files to the work directory
ADD . /app

# build the project
RUN pnpm run build

# start final image
FROM node:20-alpine

WORKDIR /app

# copy over build files from builder step
COPY --from=builder /app/.output  /app/.output
COPY --from=builder /app/.nuxt  /app/.nuxt

# expose the host and port 3000 to the server
ENV HOST 0.0.0.0
EXPOSE 3000

# run the build project with node
ENTRYPOINT ["node", ".output/server/index.mjs"]

# use node 16 alpine image as build image
FROM node:20-alpine as builder

# create work directory in app folder
WORKDIR /app

# install required packages for node image
RUN apk --no-cache add openssh g++ make python3 git

# install pnpm
RUN npm install -g pnpm

# copy over package.json files
COPY package.json /app/
COPY pnpm-lock.yaml /app/

# set the build-time argument
ARG NUXT_UI_PRO_LICENSE

# set the environment variable
ENV NUXT_UI_PRO_LICENSE=$NUXT_UI_PRO_LICENSE

# install all dependencies
RUN pnpm install

# copy over all files to the work directory
ADD . /app

# build the project
RUN pnpm run build

# start final image
FROM node:20-alpine

WORKDIR /app

# copy over build files from builder step
COPY --from=builder /app/.output  /app/.output
COPY --from=builder /app/.nuxt  /app/.nuxt

# expose the host and port 3000 to the server
ENV HOST 0.0.0.0
EXPOSE 3000

# run the build project with node
ENTRYPOINT ["node", ".output/server/index.mjs"]

My deployment file (k8s) :

apiVersion: apps/v1
kind: Deployment
metadata:
  name: prophunter-frontend-deployment
  labels:
    app: prophunter-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: prophunter-frontend
  template:
    metadata:
      labels:
        app: prophunter-frontend
    spec:
      containers:
      - name: prophunter-frontend
        image: prophunter-frontend:latest
        ports:
        - containerPort: 3000

apiVersion: apps/v1
kind: Deployment
metadata:
  name: prophunter-frontend-deployment
  labels:
    app: prophunter-frontend
spec:
  replicas: 1
  selector:
    matchLabels:
      app: prophunter-frontend
  template:
    metadata:
      labels:
        app: prophunter-frontend
    spec:
      containers:
      - name: prophunter-frontend
        image: prophunter-frontend:latest
        ports:
        - containerPort: 3000

My service file :

apiVersion: v1
kind: Service
metadata:
  name: prophunter-frontend-service
spec:
  selector:
    app: prophunter-frontend
  ports:
    - name: http
      port: 3000
      targetPort: 3000
  type: LoadBalancer

apiVersion: v1
kind: Service
metadata:
  name: prophunter-frontend-service
spec:
  selector:
    app: prophunter-frontend
  ports:
    - name: http
      port: 3000
      targetPort: 3000
  type: LoadBalancer

Thanks for your help 🙏
If you need any further information, please do not hesitate to ask me 🙂

25 Replies

Elkios - MathysOP•8mo ago

🤔 probably, i will try to fix with your suggestion. But really strange i only got this issue when deploy on kubernetes and not when in run the image locally It doesn't change anything unfortunately :/ By deactivating SSR, I no longer have the problem, however I am always interested if you have other ideas / explanations to solve this issue

Muhammad Mahmoud•8mo ago

I have the same problem with useElementSize and also useWindowSize. Local build works just fine but gives the same error when built in a container

Elkios - MathysOP•8mo ago

Yes definitely

Clem•8mo ago

It come from this template on NUXT UI PRO : https://github.com/nuxt-ui-pro/dashboard And this line : https://github.com/nuxt-ui-pro/dashboard/blob/4c749ad9c6a3bf7f62063752d08c6a55de00dbdc/pages/index.vue#L52 ( i work with @Elkios - Mathys ) Yes it's the code Yep When i'm doing this, the error do not persist, but new error appear Yep ahah The new error is...... Cannot read properties of null (reading 'isCE') 🥲 Okok thanks, i'll try to use ClientOnly of transpose a library and back to you Thanks-you

Muhammad Mahmoud•8mo ago

@L422Y I didn't have vueuse/core installed and when I installed it the error disappeared. But why does this work on a local build and not in docker?

Elkios - MathysOP•8mo ago

Works for us too, thanks 🙏

Muhammad Mahmoud•8mo ago

For anyone who stumbles on this. I'm using pnpm and the problem was that I wasn't copying .npmrc in my Dockerfile along with package.json & pnpm-lock.yaml. The .npmrc includes shamefully-hoist=true which when was missing caused the problem. Copying .npmrc and deleting vueuse/core (only have vueuse/nuxt now) works correctly This is my dockerfile now

# ----- Base Setup -----
# Install Node
FROM node:20.12.1-alpine3.18 as base

# Exposing port 3000 from the container (We still need to bind our local port to this port when running the container)
EXPOSE 3000

# Setup Corepack to enable PNPM
RUN corepack enable

# Set working directory
RUN mkdir -p /src
WORKDIR /src

# Install dependencies
COPY package.json pnpm-lock.yaml .npmrc ./
RUN pnpm i --frozen-lockfile

# Copy the application code 
COPY . .


# ----- Development -----
FROM base as dev
CMD ["pnpm", "run", "dev"]


# ----- Build -----
FROM base as build
RUN pnpm run build


# ----- Production -----
FROM base as prod

# Copying only the '.output' folder from the 'build' stage to minmize the image size
COPY --from=build /src/.output /src/.output

# Run the server
CMD ["node", ".output/server/index.mjs"]

# ----- Base Setup -----
# Install Node
FROM node:20.12.1-alpine3.18 as base

# Exposing port 3000 from the container (We still need to bind our local port to this port when running the container)
EXPOSE 3000

# Setup Corepack to enable PNPM
RUN corepack enable

# Set working directory
RUN mkdir -p /src
WORKDIR /src

# Install dependencies
COPY package.json pnpm-lock.yaml .npmrc ./
RUN pnpm i --frozen-lockfile

# Copy the application code 
COPY . .


# ----- Development -----
FROM base as dev
CMD ["pnpm", "run", "dev"]


# ----- Build -----
FROM base as build
RUN pnpm run build


# ----- Production -----
FROM base as prod

# Copying only the '.output' folder from the 'build' stage to minmize the image size
COPY --from=build /src/.output /src/.output

# Run the server
CMD ["node", ".output/server/index.mjs"]

Flo•8mo ago

Note: You can remove the docker stages dev and build and run both of them in base. Makes no difference, just causes less confusion. The prod stage... don't build it on base. Use a clean node image. (You don't need pnpm or the node_modules there)

# syntax = docker/dockerfile:1.7-labs

FROM oven/bun:1.1.0-debian as builder

WORKDIR /app
COPY --parents package.json bun.lockb */package.json /app/

RUN --mount=type=cache,target=/root/.bun/install/cache \
    bun install --frozen-lockfile 

COPY . /app/

# because we have a layer called app. Skip that if you don't have that.
WORKDIR /app/app

RUN bun run build

FROM node:21.7.2-bookworm-slim as runner

WORKDIR /app
COPY --from=builder /app/app/.output /app

CMD ["node", "/app/server/index.mjs"]

# syntax = docker/dockerfile:1.7-labs

FROM oven/bun:1.1.0-debian as builder

WORKDIR /app
COPY --parents package.json bun.lockb */package.json /app/

RUN --mount=type=cache,target=/root/.bun/install/cache \
    bun install --frozen-lockfile 

COPY . /app/

# because we have a layer called app. Skip that if you don't have that.
WORKDIR /app/app

RUN bun run build

FROM node:21.7.2-bookworm-slim as runner

WORKDIR /app
COPY --from=builder /app/app/.output /app

CMD ["node", "/app/server/index.mjs"]

Muhammad Mahmoud•8mo ago

Thanks a lot, I'm starting to learn about Docker and I have a few questions if you don't mind 1. I use the same Dockerfile for both local dev and prod build by attaching --target=dev or --target prod to the docker run command, How would I do that if I don't have multistages? Also I don't see a dev command in your file 2. Should I use --mount=type=cache ? I don't know if its Docker-specific or bun's. I'll google it but appreciate any hints 3. You're absolutely right about using node as image for build that's dumb of me 😅 Thanks! I'll do that

Flo•8mo ago

Oh, sure! I use that specific dockerfile for prod builds only. For my dev env I utilize vscodes devcontainers, and I love them! You can use this dockerfile for both scenarios though, by using --target builder and running it with bash on the command line - I just wouldn't recommend that since you'd usually mount your code into the container instead of copying it. The cache is a docker-feature and does speed up package installations especially if you run them more often, like in ci pipelines. And bun... I started this project 3 months ago and decided to give bun a shot since it claimed to be faster than the others. And so far, I'm very happy with that.

Muhammad Mahmoud•8mo ago

I've tried dev containers but didn't work out so I went with multistage, will try it out again. I'm using bun for a side project and also loving it but for this project I have to use node for now as this is a team decision, maybe I'll convince them one day 😁

Flo•8mo ago

Devcontainers are awesome, using them since they appeared first, almost 4 years ago

Muhammad Mahmoud•8mo ago

I'm looking at this to see what was I doing wrong https://www.youtube.com/watch?v=b1RavPr_878

Visual Studio Code

YouTube

Get Started with Dev Containers in VS Code

Learn how Dev Containers can boost your coding productivity and save you time configuring your development environment. Follow along with the demo to discover how to set up and use Dev Containers in Visual Studio Code effortlessly. ⚡️💻 Dev Containers Extension: https://aka.ms/DevContainersExtension Dev Containers Open Specification: https://con...

Flo•8mo ago

If you have questions, shoot. I'd be happy to help you out.

Muhammad Mahmoud•8mo ago

Actually I'm stuck with a problem now and posted about it but got no answer so far. I'd appreciate if you can take a look https://discord.com/channels/473401852243869706/1227323622897614858

Flo•8mo ago

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
    "name": "Dev",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
    "features": {
        "ghcr.io/devcontainers/features/docker-in-docker:2": {},
        "ghcr.io/devcontainers/features/kubectl-helm-minikube:1": {},
        "ghcr.io/prulloac/devcontainer-features/bun:1": {
            "version": "1.1.0"
        },
        "ghcr.io/rio/features/k9s": {}
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "cpreston321.nuxt-vscode",
                "Vue.volar",
                "redhat.vscode-yaml",
                "GitLab.gitlab-workflow",
                "vitest.explorer",
                "humao.rest-client",
                "dbaeumer.vscode-eslint",
                "esbenp.prettier-vscode",
                "sibiraj-s.vscode-scss-formatter",
                "syler.sass-indented",
                "formulahendry.auto-rename-tag",
                "formulahendry.auto-close-tag",
                "christian-kohler.path-intellisense"
            ]
        }
    }
    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},
    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],
    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "yarn install",
    // Configure tool-specific properties.
    // "customizations": {},
    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
{
    "name": "Dev",
    // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
    "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm",
    "features": {
        "ghcr.io/devcontainers/features/docker-in-docker:2": {},
        "ghcr.io/devcontainers/features/kubectl-helm-minikube:1": {},
        "ghcr.io/prulloac/devcontainer-features/bun:1": {
            "version": "1.1.0"
        },
        "ghcr.io/rio/features/k9s": {}
    },
    "customizations": {
        "vscode": {
            "extensions": [
                "cpreston321.nuxt-vscode",
                "Vue.volar",
                "redhat.vscode-yaml",
                "GitLab.gitlab-workflow",
                "vitest.explorer",
                "humao.rest-client",
                "dbaeumer.vscode-eslint",
                "esbenp.prettier-vscode",
                "sibiraj-s.vscode-scss-formatter",
                "syler.sass-indented",
                "formulahendry.auto-rename-tag",
                "formulahendry.auto-close-tag",
                "christian-kohler.path-intellisense"
            ]
        }
    }
    // Features to add to the dev container. More info: https://containers.dev/features.
    // "features": {},
    // Use 'forwardPorts' to make a list of ports inside the container available locally.
    // "forwardPorts": [],
    // Use 'postCreateCommand' to run commands after the container is created.
    // "postCreateCommand": "yarn install",
    // Configure tool-specific properties.
    // "customizations": {},
    // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
    // "remoteUser": "root"
}

for a quick start I think I've seen your issue. Easy solution: Docker host networking

Muhammad Mahmoud•8mo ago

Thank so much for the great help 🙏 I'll search for host networking and follow up on that thread

Flo•8mo ago

start the container with --net host

Muhammad Mahmoud•8mo ago

I tried that but no luck

Flo•8mo ago

and change the host you're contacting to 127.0.0.1 🙂

Muhammad Mahmoud•8mo ago

I'll try that and get back to you

Flo•8mo ago

(--net host actually removes the network encapsulation from the docker container, it's like the stuff running inside and the services on the outside are on the same system) (But please don't do that in a production system)

Muhammad Mahmoud•8mo ago

I've read about it and tried but it didn't work, I'll try it again @Flo I've tried --net host and it didn't work again. It turns out it doesn't work on Windows. The docker.internal.host works on first request but not on subsequent requests from the browser as it doesn't resolve it correctly. I've tried to add 127.0.0.1 docker.internal.host to my local machine etc/hosts file to workaround that but gave issues. I ended up using Dockerfile for production and writing perquisites for local development

Flo•8mo ago

Ouh, Windows... 😮 I'm afraid I can't help much with that... I'd switch to a docker compose file in your case, running the laravel server in another container.

Muhammad Mahmoud•8mo ago

I've found out that I'll need to do that eventually anyways yeah

Gaming

Programming

useElementSize is not defined, when deploy on kubernetes