#Error on Docker build

3 messages · Page 1 of 1 (latest)

orchid needle
#

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!

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

mossy zinc
#

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"]
#

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",
  },
});