Cannot read property 'quasar' of undefined

[stefaanMLB]

Describe the bug
Not sure this is a but or rather some problem with my setup.
During the building of a docker image from my projet I get a Cannot read property 'quasar' of undefined error which I don't get while compiling the same problem on my dev PC. I've tried many things but can't figure out why there is different behavior during docker build. The package-lock.json files are identical.

Full error message

> vue-cli-service build

 ERROR  TypeError: Cannot read property 'quasar' of undefined
TypeError: Cannot read property 'quasar' of undefined
    at module.exports (/tmp/build/apps/frontend/node_modules/vue-cli-plugin-quasar/index.js:13:29)
    at /tmp/build/apps/frontend/node_modules/@vue/cli-service/lib/Service.js:78:7
    at Array.forEach (<anonymous>)
    at Service.init (/tmp/build/apps/frontend/node_modules/@vue/cli-service/lib/Service.js:76:18)
    at Service.run (/tmp/build/apps/frontend/node_modules/@vue/cli-service/lib/Service.js:215:10)
    at Object.<anonymous> (/tmp/build/apps/frontend/node_modules/@vue/cli-service/bin/vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-01-07T13_20_17_622Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 1

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Dockerfile

click to view file

ARG BUILD_DIR="/tmp/build"
ARG AP="/usr/bruyland"

#FROM node:16.13.1-alpine as base
FROM node:14 as base
FROM base AS builder

ARG BUILD_DIR 
WORKDIR ${BUILD_DIR}

COPY ./apps/backend/*.json ./apps/backend/
COPY ./apps/backend/src/ ./apps/backend/src/
COPY ./apps/frontend/*.json ./apps/frontend/
COPY ./apps/frontend/src/ ./apps/frontend/src/
COPY ./apps/frontend/src/models/ ./apps/backend/src/models/

WORKDIR ${BUILD_DIR}/apps/backend
RUN npm set progress=false
RUN npm install
RUN npm run build

WORKDIR ${BUILD_DIR}/apps/frontend
RUN npm install
RUN npm run build

FROM base as release
RUN ln -sf /usr/share/zoneinfo/Europe/Brussels /etc/localtime

ARG BUILD_DIR
ARG COMMIT
ARG TAG
ARG AP

RUN echo COMMIT=$COMMIT
RUN echo TAG=$TAG
RUN echo AP=$AP
RUN echo BUILD_DIR=$BUILD_DIR/apps/backend

WORKDIR ${AP}

RUN echo COPYING BUILT APP FROM BUILDER CONTAINER
COPY --from=builder ${BUILD_DIR}/package.json ${AP}
COPY --from=builder ${BUILD_DIR}/package-lock.json ${AP}
COPY --from=builder ${BUILD_DIR}/dist/ ${AP}
RUN npm install --only=production --no-optional

ENV PORT=3000
ENV NODE_ENV=production
ENV COMMIT=$COMMIT
ENV TAG=$TAG

EXPOSE ${PORT}

RUN mkdir -p logs && chown 1000 logs && chgrp 1000 logs && chmod -R o+w logs
VOLUME ["${AP}/logs", "${AP}/config"]

USER node

CMD [ "node", "dist/main" ]

Additional context
package.json file

click to view file

{
  "name": "uitpak2-frontend",
  "version": "0.1.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.24.0",
    "axios-date-reviver": "^1.0.0-beta.2",
    "class-transformer": "^0.4.0",
    "core-js": "^3.6.5",
    "date-fns": "^2.25.0",
    "json-loader": "^0.5.7",
    "jsprintmanager": "^4.0.3",
    "lodash": "^4.17.21",
    "marked": "^4.0.3",
    "quasar": "^1.16.0",
    "reflect-metadata": "^0.1.13",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-cli-plugin-quasar": "^3.0.2",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@types/jsprintmanager": "^2.0.0",
    "@types/lodash": "^4.14.177",
    "@types/marked": "^4.0.0",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.13.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.0",
    "typescript": "~4.1.5",
    "vue-template-compiler": "^2.6.11",
    "vuex-class": "^0.3.2",
    "vuex-module-decorators": "^1.0.1"
  }
}

vue.config.js

click to view file

module.exports = {
  transpileDependencies: ['vuex-module-decorators', 'quasar'],

  devServer: {
    proxy: 'http://localhost:3000',
  },

  pluginOptions: {
    quasar: {
      importStrategy: 'kebab',
      rtlSupport: false,
    },
  },
  configureWebpack: {
    devtool: 'source-map',
  },
  outputDir: '../backend/static/',
}

File that causes the error in the container

click to view file

const fs = require('fs')
const path = require('path')

function getCssPreprocessor (api) {
  return ['sass', 'scss', 'styl'].find(ext => {
    return fs.existsSync(
      api.resolve('src/styles/quasar.variables.' + ext)
    )
  })
}

module.exports = (api, options) => {
  if (options.pluginOptions.quasar.rtlSupport) {
    process.env.QUASAR_RTL = true
  }

  const cssPreprocessor = getCssPreprocessor(api)
  const srcCssExt = cssPreprocessor === 'scss' ? 'sass' : cssPreprocessor

  api.chainWebpack(chain => {
    cssPreprocessor && chain.resolve.alias
      .set(
        'quasar-variables',
        api.resolve(`src/styles/quasar.variables.${cssPreprocessor}`)
      )
      .set(
        'quasar-variables-styl',
        `quasar/src/css/variables.${srcCssExt}`
      )
      .set(
        'quasar-styl',
        `quasar/dist/quasar.${srcCssExt}`
      )
      .set(
        'quasar-addon-styl',
        `quasar/src/css/flex-addon.${srcCssExt}`
      )

    chain.performance.maxEntrypointSize(512000)

    const strategy = options.pluginOptions.quasar.importStrategy || 'kebab'

    if (['kebab', 'pascal', 'combined'].includes(strategy)) {
      chain.module.rule('vue')
        .use('quasar-auto-import')
        .loader(path.join(__dirname, 'lib/loader.auto-import.js'))
        .options(strategy)
        .before('cache-loader')
    }
    else {
      console.error(`Incorrect setting for quasar > importStrategy (${strategy})`)
      console.error(`Use one of: 'kebab', 'pascal', 'combined'.`)
      console.log()
      process.exit(1)
    }

    chain.module.rule('transform-quasar-imports')
      .test(/\.(t|j)sx?$/)
      .use('transform-quasar-imports')
        .loader(path.join(__dirname, 'lib/loader.transform-quasar-imports.js'))
  })
}

[thzero]

The vue-cli loadFileConfig isn't picking up the file, or at least the loadmodule is mishandling it.

the vue.config.js looks like this.
`const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: [
'quasar'
],

pluginOptions: {
quasar: {
importStrategy: 'kebab',
rtlSupport: true
}
}
})
`

but after loadFileCOnfig, it only loads this

{ transpileDependencies: true }

this is on node version 16.3.0. The loadFileConfig calls loadModule which calls createRequire which is this

const createRequire = Module.createRequire || Module.createRequireFromPath || function (filename) {

and at least on node 16 it seems to be using the built in createRequire. However the file name that is passed in is the package.json file.
So basically it never actually tries to load the vue.config.js file.

From debug statements put in loadFileConfig and loadModule...
vue:loadFileConfig-fileConfig D:\programming\test\test4\vue.config.js +0ms vue:loadFileConfig-fileConfig D:\programming\test\test4\vue.config.js +0ms vue:loadFileConfig-esm false +0ms vue:loadModule-request1 D:\programming\test\test4\vue.config.js +0ms vue:loadModule-fileName D:\programming\test\test4\package.json +0ms vue:loadModule-createRequire [Function: createRequire] +0ms vue:loadModule-createRequire.results { transpileDependencies: true } +0ms
The request value has the correct file name, but its never actually loaded as all it tries to load is the package.json!

try { return createRequire(path.resolve(context, 'package.json'))(request) } catch (e) { const resolvedPath = exports.resolveModule(request, context) if (resolvedPath) { if (force) { clearRequireCache(resolvedPath) } return require(resolvedPath) } }

Also this

if (options.pluginOptions.quasar.rtlSupport) {

is just poor; there is no defensive programming in that statement.