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.jsThis 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?
