Quasar CLI with Vite Build Error in Docker

[jterblanche]

Attempting to dockerize app built with Quasar CLI with Vite, but the quasar build step fails.
Any pointers in the right direction appreciated.

The Dockerfile looks like this:

#
# Stage 1 - build from source.
#
FROM node:16-slim as build
WORKDIR /usr/src/app

COPY package*.json ./
COPY tsconfig*.json ./

RUN npm install -g @quasar/cli

RUN npm ci --ignore-scripts --no-audit --no-fund

COPY . .

RUN quasar build


#
# Stage 2 - create a production image.
#
FROM node:16-slim
WORKDIR /usr/src/app

COPY --from=build /usr/src/app/dist/spa .

# Expose port 8080
ENV PORT 8080
EXPOSE 8080

# Run node in production.
ENV NODE_ENV=production

# Run the web service on container startup.
CMD ["quasar serve"]

---

When attempting to build the docker image, I get the following error:

[vite:esbuild] parsing /usr/src/server/tsconfig.json failed: Error: ENOENT: no such file or directory, open '/usr/src/server/tsconfig.json'

---

Full Error Output:

> [build 8/8] RUN quasar build:                                                                                                                                                                                 
#12 0.455                                                                                                                                                                                                        
#12 0.455  .d88888b.                                                                                                                                                                                             
#12 0.455 d88P" "Y88b                                                                                                                                                                                            
#12 0.455 888     888                                                                                                                                                                                            
#12 0.455 888     888 888  888  8888b.  .d8888b   8888b.  888d888
#12 0.455 888     888 888  888     "88b 88K          "88b 888P"
#12 0.455 888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
#12 0.455 Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
#12 0.455  "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
#12 0.455        Y8b
#12 0.455 
#12 0.459 
#12 0.459  Build mode............. spa
#12 0.459  Pkg quasar............. v2.10.2
#12 0.459  Pkg @quasar/app-vite... v1.1.3
#12 0.459  Pkg vite............... v2.9.15
#12 0.459  Debugging.............. no
#12 0.459  Publishing............. no
#12 0.459 
#12 0.502  App • Running "@quasar/qcalendar" Quasar App Extension...
#12 0.732  App • Extension(@quasar/qcalendar): Extending quasar.config.js...
#12 0.787  App • Cleaned build artifact: "/usr/src/app/dist/spa"
#12 0.934  App •  WAIT  • Compiling of SPA UI with Vite in progress...
#12 2.435 [vite:esbuild] parsing /usr/src/server/tsconfig.json failed: Error: ENOENT: no such file or directory, open '/usr/src/server/tsconfig.json'
#12 2.435 file: /usr/src/app/src/boot/axios.ts
#12 2.441 /usr/src/app/node_modules/vite/dist/node/chunks/dep-689425f3.js:19565
#12 2.441     throw new TSConfckParseError(`parsing ${tsconfigFile} failed: ${e}`, "PARSE_FILE", tsconfigFile, e);
#12 2.441           ^
#12 2.441 
#12 2.441 TSConfckParseError: parsing /usr/src/server/tsconfig.json failed: Error: ENOENT: no such file or directory, open '/usr/src/server/tsconfig.json'
#12 2.441     at parseFile$1 (/usr/src/app/node_modules/vite/dist/node/chunks/dep-689425f3.js:19565:11)
#12 2.441     at async Promise.all (index 0)
#12 2.441     at async parseReferences (/usr/src/app/node_modules/vite/dist/node/chunks/dep-689425f3.js:19580:22)
#12 2.441     at async Promise.all (index 1)
#12 2.441     at async parse$f (/usr/src/app/node_modules/vite/dist/node/chunks/dep-689425f3.js:19544:5)
#12 2.441     at async loadTsconfigJsonForFile (/usr/src/app/node_modules/vite/dist/node/chunks/dep-689425f3.js:19933:24)
#12 2.441     at async transformWithEsbuild (/usr/src/app/node_modules/vite/dist/node/chunks/dep-689425f3.js:19736:36)
#12 2.441     at async Object.transform (/usr/src/app/node_modules/vite/dist/node/chunks/dep-689425f3.js:19821:32)
#12 2.441     at async transform (/usr/src/app/node_modules/rollup/dist/shared/rollup.js:22042:16)
#12 2.441     at async ModuleLoader.addModuleSource (/usr/src/app/node_modules/rollup/dist/shared/rollup.js:22267:30) {
#12 2.441   code: 'PLUGIN_ERROR',
#12 2.441   cause: [Error: ENOENT: no such file or directory, open '/usr/src/server/tsconfig.json'] {
#12 2.441     errno: -2,
#12 2.441     code: 'ENOENT',
#12 2.441     syscall: 'open',
#12 2.441     path: '/usr/src/server/tsconfig.json'
#12 2.441   },
#12 2.441   tsconfigFile: '/usr/src/server/tsconfig.json',
#12 2.441   pluginCode: 'PARSE_FILE',
#12 2.441   plugin: 'vite:esbuild',
#12 2.441   hook: 'transform',

...
------

[yusufkandemir]

First of all, don't use quasar serve for production, use a web server like NGINX instead. Also, COPY tsconfig*.json ./ is not required since it's not used for npm ci, it will be copied along with everything during COPY . . before building.

The error mentions /usr/src/server/tsconfig.json, but it shouldn't access a folder named server under normal circumstances. So, I guess you have a custom tsconfig.json configuration that references other ones. So, please share the following if you want further help:

1. Your project's directory structure
2. Your tsconfig.json file(s)
3. Your quasar.config.js file