Quasar: Reopening #5987 - quasar build -m pwa failing

[jeancaffou]

Reopening #5987

ERROR in chunk app [entry]
Cannot convert undefined or null to object

ERROR in chunk app [entry]
({
chunk: chunkData
}) => this.options.moduleFilename(chunkData)
Path variable [contenthash:8] not implemented in this context: css/[name].[contenthash:8].css

app:build [FAIL] Build failed with errors. Check log above. +1ms

Still happens with "@quasar/app" v1.5.0.

It must be something causing the bug in the code, because creating a new project from quasar scaffolding and copying package.json, package-lock.json and quasar.conf.js, then executing npm ci and quasar build -m pwa it builds normally on the new project, but not on the upgraded project with the rest of the code.

I can share the project for reproduction if I manage to isolate the piece of the code causing this, or sharing the whole repo privately with @rstoenescu

The issue does not happen if I downgrade @quasar/app to v1.3.2

[jeancaffou]

OK, now I am confident that the culprit is a different method of importing components in vue router.

OLD way which breaks build:

import MyPage from '../pages/Page'

const routes = [{
    component: MyPage,

NEW way in newer versions of Quasar

const routes = [{
    component: () => import('pages/Page.vue'),

Build now succeeds with warnings:

WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-2-2!./node_modules/@quasar/app/node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-2-3!./node_modules
/@quasar/app/lib/webpack/loader.quasar-scss-variables.js!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/gnirts-loader/lib/gnirts-loader.js!./src/layouts/Layout.vue?vue&type=s
tyle&index=0&id=e90bbc20&lang=scss&scoped=true&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib
??vue-loader-options!./node_modules/gnirts-loader/lib/gnirts-loader.js!./src/components/Info.vue?vue&type=style&index=0&id=446de752&scoped=true&lang=css&
   - couldn't fulfill desired order of chunk group(s)

WARNING in chunk chunk-common [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-2-2!./node_modules/@quasar/app/node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-2-3!./node_modules
/@quasar/app/lib/webpack/loader.quasar-scss-variables.js!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/gnirts-loader/lib/gnirts-loader.js!./src/components/Controls.vue?vue&type=st
yle&index=0&id=db39e70e&lang=scss&scoped=true&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-2-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-2-2!./node_modules/@quasar/app/lib/webpack/loader.auto-import.js?kebab!./node_modules/vue-loader/lib
??vue-loader-options!./node_modules/gnirts-loader/lib/gnirts-loader.js!./src/components/Info.vue?vue&type=style&index=0&id=446de752&scoped=true&lang=css&
   - couldn't fulfill desired order of chunk group(s)
   - while fulfilling desired order of chunk group(s) , ,

[jeancaffou]

@rstoenescu created demo project that reproduces this bug consistently

Please take a look at this project, specifically commit: https://github.com/jeancaffou/quasar-issue-6096/commit/456f4395223388e1c9b6fa8617be59fffc0f8f74

[rstoenescu]

Thanks for supplying a reproducible repo.
Will take a look at it near the end of this week.

[nothingismagick]

I noticed also since the update to @quasar/[email protected] my build mode of
quasar build -m ssr (with pwa set to true) does not show that the build mode is ssr + pwa:

[jeancaffou]

I have also solved the warning WARNING in chunk chunk-common [mini-css-extract-plugin] by removing the small piece of <style> block from Info.vue. I don't know why this caused the warning or how to reproduce it without sharing the whole repo.

[gorango]

+1 @nothingismagick

I am also noticing that enviornment variables set after the build (ssr+pwa) are not getting captured.

$ PORT=3333 node dist/ssr
> Server listening at port 3000

Release notes for @quasar/app#v1.5.0 make reference to commit bf7a7f1, which is now running server through webpack and seems to only capture env vars passed during build?

[th3l0g4n]

@gorango I opened an Issue https://github.com/quasarframework/quasar/issues/6188 to request the possiblity to opt out processing of the webserver.
It is causing all kinds of trouble for me.

[tjaoc]

I have the same problem :(

Loading env config...
Starting quasar server...

Running "env:dev" (env) task

Running "exec:startapp" (exec) task

 Build mode........ pwa
 Pkg quasar........ v1.8.5
 Pkg @quasar/app... v1.5.2
 Debugging......... no
 Publishing........ no

 app:extension Running "@quasar/qiconpicker" Quasar App Extension... +0ms
 app:quasar-conf Reading quasar.conf.js +13ms
{
  name: '******',
  description: '**********',
  hosturl: '********,
  cordovaId: ********
}
 app:quasar-conf Extension(@quasar/qiconpicker): Extending quasar.conf... +5ms
 app:workbox [InjectManifest] Using your custom service-worker written file +1s
 app:webpack Extending PWA Webpack config +24ms
 app:artifacts Cleaned build artifact: "/Users/*******/Develop/******/public/build/app" +3ms
 app:generator Generating Webpack entry point +0ms
 app:build Building... +3ms
 app:progress Compiling PWA... +297ms
 app:progress Compiled PWA in ~17s +17s


Version: webpack 4.41.5
Time: 16777ms
Built at: 2020-02-01 22:06:16
                                                  Asset      Size  Chunks               Chunk Names
            fonts/KFOkCnqEu92Fr1MmgVxIIzQ.5cb7edfc.woff  19.9 KiB
           fonts/KFOlCnqEu92Fr1MmEU9fBBc-.87284894.woff    20 KiB
           fonts/KFOlCnqEu92Fr1MmSU5fBBc-.b00849e0.woff  19.9 KiB
           fonts/KFOlCnqEu92Fr1MmWUlfBBc-.adcde98f.woff  19.9 KiB
           fonts/KFOlCnqEu92Fr1MmYUtfBBc-.bb1e4dc6.woff  19.9 KiB
               fonts/KFOmCnqEu92Fr1Mu4mxM.60fa3c06.woff  19.8 KiB
                     fonts/fa-brands-400.822d94f1.woff2  74.2 KiB
                      fonts/fa-brands-400.f4920c94.woff    87 KiB
                    fonts/fa-regular-400.9efb8697.woff2  13.3 KiB
                     fonts/fa-regular-400.a57bcf76.woff  16.4 KiB
                       fonts/fa-solid-900.93f28454.woff  96.7 KiB
                      fonts/fa-solid-900.f6121be5.woff2  74.3 KiB
       fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.29b882f0.woff  77.7 KiB
fonts/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.0509ab09.woff2  59.4 KiB
                                   img/404.0a38972b.png  20.9 KiB
                                  js/vendor.711fbb1a.js  2.88 MiB       0  [immutable]  vendor
Entrypoint app = js/vendor.711fbb1a.js

ERROR in chunk app [entry]
Cannot convert undefined or null to object

ERROR in chunk app [entry]
({
              chunk: chunkData
            }) => this.options.moduleFilename(chunkData)
Path variable [contenthash:8] not implemented in this context: css/[name].[contenthash:8].css


 app:build [FAIL] Build failed with errors. Check log above. +0ms

>> Exited with code: 1.
>> Error executing child process: Error: Process exited with code 1.
Warning: Task "exec:startapp" failed. Use --force to continue.

[jeancaffou]

@tjaoc I've already suggested a solution / workaround in my second post. Change your imports in vue router.

[tjaoc]

@jeancaffou i have the imports for your second post

import declaration from "./declaration";
import home from "./home";
import announcement from "./announcement";
import message from "./message";
import payroll from "./payroll";
import permission from "./permission";
import team from "./team";
import user from "./user";
// 404 Route
import error404 from "./404";

Vue.use(VueRouter);

const routes = [
  ...assist,
  ...auth,
  ...declaration,
  ...home,
  ...announcement,
  ...message,
  ...payroll
];

[tjaoc]

The max versions work for the compilation is:

 Pkg quasar........ v1.8.5
 Pkg @quasar/app... v1.3.3

[rstoenescu]

The issue with SSR build (process.env variables handled at build time instead of runtime) has been fixed in "@quasar/app" v.1.5.3.

[tjaoc]

@rstoenescu for me is in PWA build

[rstoenescu]

Will investigate that too. Just mentioned the SSR issue because some people above have used this ticket for it.

[tjaoc]

Will investigate that too. Just mentioned the SSR issue because some people above have used this ticket for it.

I'm sorry but the tittle for issue is "Reopening #5987 - quasar build -m pwa failing #6096"

[tjaoc]

@rstoenescu This problem not resolved?

[rstoenescu]

Finally had time to investigate this.
Fix will be available shortly in "@quasar/app" v1.5.8.