CODEWITHSUNDEEP
node.jsdockervue.jsnpmquasar-framework
A. Yamamoto
A. Yamamoto

Reputation: 21

Error while building vue/quasar app on Docker

Docker error on npm run build ( vue-cli-service build )

I'm working on containerizing an app for use it on a cloud service with kubernetes. But in the build stage of my Dockerfile I'm getting an error wuth the vue-cli-plugin-quasar.

Maybe it's something with the quasar package and the access of external packages in the docker building process, but I'm a noob on docker.

I tried to use RUN npm i -g @vue/cli before the manage of the packages(npm i, audit etc). And found nothing while searching about this problem.

Tried with multi-stage Dockerfile

FROM node:12 as dev-stage

WORKDIR /my-app

COPY package*.json ./

COPY server/ ./server
COPY src/ ./src

RUN npm install -g @vue/cli

RUN npm i

RUN npm audit fix

RUN cd server && npm i

RUN cd server && npm audit fix

FROM dev-stage as build-stage
RUN npm run build

I have more stages after this, but the error occurs in the build

And without it

FROM node:12 as dev-stage

WORKDIR /my-app

COPY package*.json ./

COPY server/ ./server
COPY src/ ./src

RUN npm install -g @vue/cli

RUN npm i

RUN npm audit fix

RUN cd server && npm i

RUN cd server && npm audit fix

RUN npm run build

Error output

ERROR  TypeError: Cannot read property 'quasar' of undefined
TypeError: Cannot read property 'quasar' of undefined
    at module.exports (/my-app/node_modules/vue-cli-plugin-quasar/index.js:2:29)
    at /my-app/node_modules/@vue/cli-service/lib/Service.js:83:7
    at Array.forEach (<anonymous>)
    at Service.init (/my-app/node_modules/@vue/cli-service/lib/Service.js:81:18)
    at Service.run (/my-app/node_modules/@vue/cli-service/lib/Service.js:221:10)
    at Object.<anonymous> (/my-app/node_modules/@vue/cli-service/bin/vue-cli-service.js:37:9)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)

Obs: I listed my node_modules folder after the npm i and the quasar package is there

Upvotes: 2

Views: 1756

Answers (1)

StefanB
StefanB

Reputation: 58

I could overcome this issue with a multistage build as follows:

FROM node:12.14.1-alpine3.11  as get-sources

RUN apk add --no-cache bash && \
    apk update && \
    apk upgrade && \
    apk add git && \
    apk add openssh-client

.....

RUN git clone ssh://[email protected]/user/Project.git

FROM node:12.14.1-alpine3.11 as build-stage

RUN apk update && apk add python make g++ && \
    npm config --global set python2 /usr/bin/python

WORKDIR /app

# copy the repository form the previous stage
COPY --from=get-sources  /Project/src ./

# get dependencies
RUN yarn install --production

COPY ./ .

RUN yarn build

......

# copy dist to final production stage

Basically instead of copying only the package.json and and install/build the app based only on that i copied the whole source of the app , and build the app in that context. Then in the next stage you copy only the /dist content in the final location.

Upvotes: 2

Related Questions