sunny-green

Error on Docker build

Hey, I am getting this error:

ERROR  Could not load /opt/app/routes/globals.css?url (imported by routes/__root.tsx): ENOENT: no such file or directory, open '/opt/app/routes/globals.css?url'

This is my Dockerfile:

FROM node:20.8.0-alpine AS base
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
COPY . /opt
WORKDIR /opt

# Installing production dependencies
FROM base AS prod-deps
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile

# Building the app
FROM base AS build
WORKDIR /opt/
COPY package.json pnpm-lock.yaml ./
RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
ENV PATH=/opt/node_modules/.bin:$PATH
WORKDIR /opt/app
COPY . .
RUN pnpm run build


# Running the app
FROM base
RUN apk add --no-cache vips-dev
RUN apk --no-cache add curl
ARG NODE_ENV=production
ENV NODE_ENV=${NODE_ENV}
WORKDIR /opt/
COPY --from=prod-deps /opt/node_modules ./node_modules
WORKDIR /opt/app
COPY --from=build /opt/app ./
ENV PATH=/opt/node_modules/.bin:$PATH

RUN chown -R node:node /opt/app
USER node
CMD ["pnpm", "start"]

I do traditional import of the css file (which imports tailwind etc.) as following: import globalCss from "./globals.css?url"; and then I append it in links as { rel: "stylesheet", href: globalCss } It's the same as in this example. Anyone has idea what went wrong? Thanks!

React TanStack Router Start Basic). Example | TanStack Router Docs

An example showing how to implement Start Basic). in React using TanStack Router.

2 Replies

magic-amber•8mo ago

that's my docker file:

FROM node:22-alpine

WORKDIR /app

COPY package.json pnpm-lock.yaml* ./

RUN npm install -g corepack@latest
RUN corepack enable pnpm && corepack prepare pnpm@latest --activate && pnpm i --frozen-lockfile

COPY . .

RUN pnpm run build

ENV NODE_ENV=production

EXPOSE 3000

ENV PORT=3000

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

FROM node:22-alpine

WORKDIR /app

COPY package.json pnpm-lock.yaml* ./

RUN npm install -g corepack@latest
RUN corepack enable pnpm && corepack prepare pnpm@latest --activate && pnpm i --frozen-lockfile

COPY . .

RUN pnpm run build

ENV NODE_ENV=production

EXPOSE 3000

ENV PORT=3000

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

and the app.config.ts:

import { defineConfig } from "@tanstack/start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
  },
  server: {
    preset: "node-server",
  },
});

import { defineConfig } from "@tanstack/start/config";
import tsConfigPaths from "vite-tsconfig-paths";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ["./tsconfig.json"],
      }),
      tailwindcss(),
    ],
  },
  server: {
    preset: "node-server",
  },
});

sunny-greenOP•7mo ago

Thank you! Got it working. It was enough to take your Dockerfile.

Gaming

Programming

Error on Docker build

Did you find this page helpful?