Quasar and Laravel 8 project - quasar build errors



  • I am trying to use a Quasar-Laravel integration package (this one : ) and ended up in a mess of dependencies. I am new to laravel, quasar, npm and yarn, so I’ve probably made things worse when trying to install the dependencies missing. At this point, “yarn” works ok but then when I do “quasar build -m pwa” I get this:

    $ quasar build -m pwa
    
     Build mode........ pwa
     Pkg quasar........ v1.11.3
     Pkg @quasar/app... v2.1.11
     Debugging......... no
     Publishing........ no
    
     Configured browser support (at least 58.69% of global marketshare):
     · Chrome for Android >= 87
     · Firefox for Android >= 83
     · QQ for Android >= 10.4
     · UC for Android >= 12.12
     · Android >= 81
     · Baidu >= 7.12
     · Chrome >= 87
     · Edge >= 87
     · Firefox >= 84
     · IE >= 11
     · iOS >= 14.0-14.2
     · Kaios >= 2.5
     · Opera Mini >= all
     · Opera Mobile >= 59
     · Opera >= 72
     · Safari >= 14
     · Samsung >= 13.0
    
     App · Reading quasar.conf.js
     App · Transpiling JS (Babel active) - includes IE11 support
     App · [GenerateSW] Will generate a service-worker file. Ignoring your custom written one.
     App · Extending PWA Webpack config
    (node:344388) UnhandledPromiseRejectionWarning:   ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
       - options[0] misses the property 'patterns'. Should be:
         [non-empty string | object { from, to?, context?, globOptions?, filter?, toType?, force?, info?, transform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
      
      - validate.js:104 validate
        [quasar]/[copy-webpack-plugin]/[schema-utils]/dist/validate.js:104:11
      
      - index.js:40 new CopyPlugin
        [quasar]/[copy-webpack-plugin]/dist/index.js:40:31
      
      - quasar.conf.js:100 Object.extendWebpack
        /home/hel/code/quasar/quasar.conf.js:100:13
      
      - index.js:31 getWebpackConfig
        [quasar]/[@quasar]/app/lib/webpack/index.js:31:25
      
      - next_tick.js:68 process._tickCallback
        internal/process/next_tick.js:68:7
      
      - loader.js:834 Function.Module.runMain
        internal/modules/cjs/loader.js:834:11
      
      - node.js:283 startup
        internal/bootstrap/node.js:283:19
      
      - node.js:623 bootstrapNodeJSCore
        internal/bootstrap/node.js:623:3
      
    
    (node:344388) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
    (node:344388) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    
    
     
    When I run "npm dev -m pwa" I get:
    
    
    
    $ quasar dev -m pwa
    
     Dev mode.......... pwa
     Pkg quasar........ v1.11.3
     Pkg @quasar/app... v2.1.11
     Debugging......... enabled
    
     Configured browser support (at least 58.69% of global marketshare):
     · Chrome for Android >= 87
     · Firefox for Android >= 83
     · QQ for Android >= 10.4
     · UC for Android >= 12.12
     · Android >= 81
     · Baidu >= 7.12
     · Chrome >= 87
     · Edge >= 87
     · Firefox >= 84
     · IE >= 11
     · iOS >= 14.0-14.2
     · Kaios >= 2.5
     · Opera Mini >= all
     · Opera Mobile >= 59
     · Opera >= 72
     · Safari >= 14
     · Samsung >= 13.0
    
     App · Reading quasar.conf.js
     App · Checking listening address availability (0.0.0.0:8080)...
     App · Transpiling JS (Babel active) - includes IE11 support
     App · [GenerateSW] Will generate a service-worker file. Ignoring your custom written one.
     App · Extending PWA Webpack config
     App · Generating Webpack entry point
     App · Booting up...
    
    
     • Compiling:
     └── PWA ████████████████████ 100% done in 19109 ms
    
    
    
     ERROR  Failed to compile with 5 errors                                                                                                                                                                  7:50:02 PM
    
     error  in ./src/assets/utils/app-utils.js
    
    Module build failed (from ./node_modules/eslint-loader/index.js):
      TypeError: Cannot read property 'range' of null
      Occurred while linting /home/hel/code/quasar/src/assets/utils/app-utils.js:28
      
      - index.js:303 SourceCode.getTokenBefore
        [quasar]/[eslint]/lib/token-store/index.js:303:18
      
      - template-curly-spacing.js:60 checkSpacingBefore
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:60:42
      
      - template-curly-spacing.js:119 TemplateElement
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:119:17
      
      - safe-emitter.js:45 listeners.(anonymous function).forEach.listener
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:58
      
      - Array.forEach
      
      - safe-emitter.js:45 Object.emit
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:38
      
      - node-event-generator.js:251 NodeEventGenerator.applySelector
        [quasar]/[eslint]/lib/util/node-event-generator.js:251:26
      
      - node-event-generator.js:280 NodeEventGenerator.applySelectors
        [quasar]/[eslint]/lib/util/node-event-generator.js:280:22
      
      - node-event-generator.js:294 NodeEventGenerator.enterNode
        [quasar]/[eslint]/lib/util/node-event-generator.js:294:14
      
      - code-path-analyzer.js:632 CodePathAnalyzer.enterNode
        [quasar]/[eslint]/lib/code-path-analysis/code-path-analyzer.js:632:23
      
      - linter.js:752 nodeQueue.forEach.traversalInfo
        [quasar]/[eslint]/lib/linter.js:752:32
      
      - Array.forEach
      
      - linter.js:747 runRules
        [quasar]/[eslint]/lib/linter.js:747:15
      
      - linter.js:899 Linter._verifyWithoutProcessors
        [quasar]/[eslint]/lib/linter.js:899:31
      
      - linter.js:955 preprocess.map.textBlock
        [quasar]/[eslint]/lib/linter.js:955:35
      
      - Array.map
      
    
    
     @ ./node_modules/@quasar/app/lib/webpack/loader.transform-quasar-imports.js!./node_modules/babel-loader/lib??ref--2-0!./node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/FormSamples/VeeValidateSample.vue?vue&type=script&lang=js& 160:0-51 229:6-15
     @ ./src/pages/FormSamples/VeeValidateSample.vue?vue&type=script&lang=js&
     @ ./src/pages/FormSamples/VeeValidateSample.vue
     @ ./src/router/routes.js
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/features/ApiCommunication/routes/index.js
    
    Module build failed (from ./node_modules/eslint-loader/index.js):
      TypeError: Cannot read property 'range' of null
      Occurred while linting /home/hel/code/quasar/src/features/ApiCommunication/routes/index.js:1
      
      - index.js:303 SourceCode.getTokenBefore
        [quasar]/[eslint]/lib/token-store/index.js:303:18
      
      - template-curly-spacing.js:60 checkSpacingBefore
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:60:42
      
      - template-curly-spacing.js:119 TemplateElement
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:119:17
      
      - safe-emitter.js:45 listeners.(anonymous function).forEach.listener
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:58
      
      - Array.forEach
      
      - safe-emitter.js:45 Object.emit
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:38
      
      - node-event-generator.js:251 NodeEventGenerator.applySelector
        [quasar]/[eslint]/lib/util/node-event-generator.js:251:26
      
      - node-event-generator.js:280 NodeEventGenerator.applySelectors
        [quasar]/[eslint]/lib/util/node-event-generator.js:280:22
      
      - node-event-generator.js:294 NodeEventGenerator.enterNode
        [quasar]/[eslint]/lib/util/node-event-generator.js:294:14
      
      - code-path-analyzer.js:632 CodePathAnalyzer.enterNode
        [quasar]/[eslint]/lib/code-path-analysis/code-path-analyzer.js:632:23
      
      - linter.js:752 nodeQueue.forEach.traversalInfo
        [quasar]/[eslint]/lib/linter.js:752:32
      
      - Array.forEach
      
      - linter.js:747 runRules
        [quasar]/[eslint]/lib/linter.js:747:15
      
      - linter.js:899 Linter._verifyWithoutProcessors
        [quasar]/[eslint]/lib/linter.js:899:31
      
      - linter.js:955 preprocess.map.textBlock
        [quasar]/[eslint]/lib/linter.js:955:35
      
      - Array.map
      
    
    
     @ ./src/features/routes-index.js 1:0-47 6:10-16
     @ ./src/router/routes.js
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/features/Auth/routes/index.js
    
    Module build failed (from ./node_modules/eslint-loader/index.js):
      TypeError: Cannot read property 'range' of null
      Occurred while linting /home/hel/code/quasar/src/features/Auth/routes/index.js:1
      
      - index.js:303 SourceCode.getTokenBefore
        [quasar]/[eslint]/lib/token-store/index.js:303:18
      
      - template-curly-spacing.js:60 checkSpacingBefore
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:60:42
      
      - template-curly-spacing.js:119 TemplateElement
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:119:17
      
      - safe-emitter.js:45 listeners.(anonymous function).forEach.listener
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:58
      
      - Array.forEach
      
      - safe-emitter.js:45 Object.emit
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:38
      
      - node-event-generator.js:251 NodeEventGenerator.applySelector
        [quasar]/[eslint]/lib/util/node-event-generator.js:251:26
      
      - node-event-generator.js:280 NodeEventGenerator.applySelectors
        [quasar]/[eslint]/lib/util/node-event-generator.js:280:22
      
      - node-event-generator.js:294 NodeEventGenerator.enterNode
        [quasar]/[eslint]/lib/util/node-event-generator.js:294:14
      
      - code-path-analyzer.js:632 CodePathAnalyzer.enterNode
        [quasar]/[eslint]/lib/code-path-analysis/code-path-analyzer.js:632:23
      
      - linter.js:752 nodeQueue.forEach.traversalInfo
        [quasar]/[eslint]/lib/linter.js:752:32
      
      - Array.forEach
      
      - linter.js:747 runRules
        [quasar]/[eslint]/lib/linter.js:747:15
      
      - linter.js:899 Linter._verifyWithoutProcessors
        [quasar]/[eslint]/lib/linter.js:899:31
      
      - linter.js:955 preprocess.map.textBlock
        [quasar]/[eslint]/lib/linter.js:955:35
      
      - Array.map
      
    
    
     @ ./src/features/routes-index.js 4:0-33 9:8-12
     @ ./src/router/routes.js
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/features/QuasarThirdParty/routes/index.js
    
    Module build failed (from ./node_modules/eslint-loader/index.js):
      TypeError: Cannot read property 'range' of null
      Occurred while linting /home/hel/code/quasar/src/features/QuasarThirdParty/routes/index.js:1
      
      - index.js:303 SourceCode.getTokenBefore
        [quasar]/[eslint]/lib/token-store/index.js:303:18
      
      - template-curly-spacing.js:60 checkSpacingBefore
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:60:42
      
      - template-curly-spacing.js:119 TemplateElement
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:119:17
      
      - safe-emitter.js:45 listeners.(anonymous function).forEach.listener
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:58
      
      - Array.forEach
      
      - safe-emitter.js:45 Object.emit
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:38
      
      - node-event-generator.js:251 NodeEventGenerator.applySelector
        [quasar]/[eslint]/lib/util/node-event-generator.js:251:26
      
      - node-event-generator.js:280 NodeEventGenerator.applySelectors
        [quasar]/[eslint]/lib/util/node-event-generator.js:280:22
      
      - node-event-generator.js:294 NodeEventGenerator.enterNode
        [quasar]/[eslint]/lib/util/node-event-generator.js:294:14
      
      - code-path-analyzer.js:632 CodePathAnalyzer.enterNode
        [quasar]/[eslint]/lib/code-path-analysis/code-path-analyzer.js:632:23
      
      - linter.js:752 nodeQueue.forEach.traversalInfo
        [quasar]/[eslint]/lib/linter.js:752:32
      
      - Array.forEach
      
      - linter.js:747 runRules
        [quasar]/[eslint]/lib/linter.js:747:15
      
      - linter.js:899 Linter._verifyWithoutProcessors
        [quasar]/[eslint]/lib/linter.js:899:31
      
      - linter.js:955 preprocess.map.textBlock
        [quasar]/[eslint]/lib/linter.js:955:35
      
      - Array.map
      
    
    
     @ ./src/features/routes-index.js 3:0-51 8:14-24
     @ ./src/router/routes.js
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    
     error  in ./src/features/TableExtension/routes/index.js
    
    Module build failed (from ./node_modules/eslint-loader/index.js):
      TypeError: Cannot read property 'range' of null
      Occurred while linting /home/hel/code/quasar/src/features/TableExtension/routes/index.js:1
      
      - index.js:303 SourceCode.getTokenBefore
        [quasar]/[eslint]/lib/token-store/index.js:303:18
      
      - template-curly-spacing.js:60 checkSpacingBefore
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:60:42
      
      - template-curly-spacing.js:119 TemplateElement
        [quasar]/[eslint]/lib/rules/template-curly-spacing.js:119:17
      
      - safe-emitter.js:45 listeners.(anonymous function).forEach.listener
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:58
      
      - Array.forEach
      
      - safe-emitter.js:45 Object.emit
        [quasar]/[eslint]/lib/util/safe-emitter.js:45:38
      
      - node-event-generator.js:251 NodeEventGenerator.applySelector
        [quasar]/[eslint]/lib/util/node-event-generator.js:251:26
      
      - node-event-generator.js:280 NodeEventGenerator.applySelectors
        [quasar]/[eslint]/lib/util/node-event-generator.js:280:22
      
      - node-event-generator.js:294 NodeEventGenerator.enterNode
        [quasar]/[eslint]/lib/util/node-event-generator.js:294:14
      
      - code-path-analyzer.js:632 CodePathAnalyzer.enterNode
        [quasar]/[eslint]/lib/code-path-analysis/code-path-analyzer.js:632:23
      
      - linter.js:752 nodeQueue.forEach.traversalInfo
        [quasar]/[eslint]/lib/linter.js:752:32
      
      - Array.forEach
      
      - linter.js:747 runRules
        [quasar]/[eslint]/lib/linter.js:747:15
      
      - linter.js:899 Linter._verifyWithoutProcessors
        [quasar]/[eslint]/lib/linter.js:899:31
      
      - linter.js:955 preprocess.map.textBlock
        [quasar]/[eslint]/lib/linter.js:955:35
      
      - Array.map
      
    
    
     @ ./src/features/routes-index.js 2:0-45 7:10-16
     @ ./src/router/routes.js
     @ ./src/router/index.js
     @ ./.quasar/app.js
     @ ./.quasar/client-entry.js
     @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 (webpack)/hot/dev-server.js ./.quasar/client-entry.js
    

    This is my package.json :

    {
      "name": "test-q",
      "version": "0.0.3",
      "description": "A Quasar Framework app",
      "productName": "Quasar App",
      "cordovaId": "org.cordova.quasar.app",
      "capacitorId": "",
      "author": "renren1 <renren@ixbase.net>",
      "private": true,
      "scripts": {
        "lint": "eslint --ext .js,.vue src",
        "test": "echo \"No test specified\" && exit 0"
      },
      "dependencies": {
        "@quasar/extras": "^1.8.1",
        "axios": "0.19.0",
        "quasar": "^1.11.3",
        "vee-validate": "2.2.13",
        "vue-content-loader": "0.2.2",
        "vue-i18n": "^8.0.0",
        "vue-signature-pad": "1.1.14",
        "vuelidate": "0.7.4",
        "vuex-persistedstate": "2.5.4"
      },
      "devDependencies": {
        "@quasar/app": "^1.8.10",
        "@vue/eslint-config-standard": "^4.0.0",
        "babel-eslint": "^10.0.1",
        "copy-webpack-plugin": "^5.0.5",
        "devtron": "^1.4.0",
        "electron": "^7.0.0",
        "electron-debug": "^3.0.0",
        "electron-devtools-installer": "^2.2.4",
        "eslint": "^5.10.0",
        "eslint-loader": "^2.1.1",
        "eslint-plugin-vue": "^5.0.0",
        "symlink-webpack-plugin": "^0.2.0"
      },
      "engines": {
        "node": ">= 8.9.0",
        "npm": ">= 5.6.0",
        "yarn": ">= 1.6.0"
      },
      "browserslist": [
        "last 1 version, not dead, ie >= 11"
      ]
    }
    

    …thanks in advance for any tips to get out of this mess 🙂



  • original laravel 7 + quasar project that I am trying to upgrade to laravel 8 https://github.com/metalsadman/quasar-laravel



  • @nifunifa go to quasar.conf.js and update the copywebpack plugin code to suit the new syntax (refer to that plugin’s docs), or downgrade the plugin’s version in your package.json, version 4 iirc.



  • Thank you @metalsadman 🙂 I ended up starting from scratch with a fresh laravel 8 installation, integrating Quasar by following these instructions: https://readybytes.in/blog/how-to-serve-quasar-app-from-laravel which basically are keeping the quasar directory inside laravel’s root directory, do “quasar build -m pwa” and create a link in laravel’s /public directory to point to quasar’s /dist/pwa
    which works, but routing is a bit messy now 😕 if I load the pwa app, its route.js then handles any calls to vue pages, like for instance, “/news” but if I go to that url directly in the browser then laravel routing takes over and throws a 404 error - so uhm, I’m trying to figure out that now 🙂
    What do you think of this way of integrating quasar and laravel?


Log in to reply