vue-loader & css-loader throwing errors

[Yentis]

When running quasar ssg dev I'm getting this error:

node_modules\@freddy38510\vue-loader\dist\pluginWebpack5.js:116
            throw new Error(`[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
                  ^

[  Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
  Make sure the rule matching .vue files include vue-loader in its use.

  - pluginWebpack5.js:116 VueLoaderPlugin.apply
    [ssg]/[@freddy38510]/vue-loader/dist/pluginWebpack5.js:116:19

  - webpack.js:76 createCompiler
    [ssg]/[webpack]/lib/webpack.js:76:12

  - webpack.js:143 create
    [ssg]/[webpack]/lib/webpack.js:143:16

  - webpack.js:167 webpack
    [ssg]/[webpack]/lib/webpack.js:167:32

  - index.js:72 f
    [ssg]/[webpack]/lib/index.js:72:16

  - dev-server-ssg.js:56 DevServer.listen
    [ssg]/[quasar-app-extension-ssg]/src/webpack/dev-server-ssg.js:56:28

  - dev.js:198 runMain
    [ssg]/[quasar-app-extension-ssg]/src/webpack/cmd/dev.js:198:24

  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5

And when running quasar ssg generate I'm getting many errors that look like this:

 App •  ERROR  •  Client-side  in ./node_modules/quasar/dist/quasar.sass

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
   - options.url should be one of these:
     boolean | function
     -> Enables/Disables 'url'/'image-set' functions handling (https://github.com/webpack-contrib/css-loader#url).
     Details:
      * options.url should be a boolean.
      * options.url should be an instance of function.

  - validate.js:191 validate
    [ssg]/[css-loader]/[schema-utils]/dist/validate.js:191:11

Project: https://github.com/Yentis/yentis.github.io/tree/master/ssg

[freddy38510]

Hi there, Sorry for the wait, I've been very busy lately.

You need to remove the @quasar/app dependency. I'm guessing it's from an incomplete migration to the new @quasar/app-webpack dependency.

Run the yarn remove @quasar/app command, and that should solve the problems associated with using an old version of css-loader.

[Yentis]

Hey, thanks for the response I made your requested change and fixed some other issues from that which fixed the css-loader error.

However, the vue-loader issue persists and I'm now getting a different error with quasar ssg generate:

 Build succeeded

 Build mode................ ssg
 Pkg ssg................... v5.0.0
 Pkg quasar................ v2.12.5
 Pkg @quasar/app-webpack... v3.9.6
 Pkg webpack............... v5.88.2
 Debugging................. no
 Transpiled JS............. yes (Babel)
 ==========================
 Output folder............. D:\Repositories\yentis.github.io\ssg\node_modules\.cache\quasar-app-extension-ssg
node:internal/errors:478
    ErrorCaptureStackTrace(err);
    ^

TypeError: The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received 'D:Repositoriesyentis.github.iossg\node_modules.cachequasar-app-extension-ssg'
    at new NodeError (node:internal/errors:387:5)
    at Function.createRequire (node:internal/modules/cjs/loader:1270:13)
    at createRequire (D:\Repositories\yentis.github.io\ssg\node_modules\@quasar\ssr-helpers\lib\create-bundle.js:35:20)
    at createBundle (D:\Repositories\yentis.github.io\ssg\node_modules\@quasar\ssr-helpers\lib\create-bundle.js:184:26)
    at createRenderer (D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\create-renderer.js:279:48)
    at D:\Repositories\yentis.github.io\ssg\node_modules\.cache\quasar-app-extension-ssg\render-to-string.js:1:856
    at Object.<anonymous> (D:\Repositories\yentis.github.io\ssg\node_modules\.cache\quasar-app-extension-ssg\render-to-string.js:1:906)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\cmd\generate.js:89:26 {
  code: 'ERR_INVALID_ARG_VALUE'
}

Note that a regular quasar dev still works

[freddy38510]

I didn't get the vue-loader error after cloning the repository. So I suggest deleting the yarn.lock file and the node_modules folder, then running the yarn command.

As for the last error, this may be due to the fact that the extension is mixing posix path with windows path. I will try to fix that by using the platform-specific path segment separator.

In the meantime, you can use the ssg.buildDir option and provide it with an absolute path to the folder of your choice. (The build dir is different from the dist dir, it's a folder where compiled files are cached, as well as the files needed to generate static pages.)

I also found other issues related to ssg in your repo. If you need to, I can create a PR.

[Yentis]

I also found other issues related to ssg in your repo. If you need to, I can create a PR.

Sure, that would be great 👍 For the vue-loader issue, it's happening for me from a clean clone after running yarn and quasar ssg dev.

[freddy38510]

After some testing, once again, this is related to poor support for windows path separator. I will fix the @freddy38510/vue-loader package and the extension regarding these issues.

Edit: What seems strange to me is that unless you have enabled the ssg.inlineCssFromSFC option, the @freddy38510/vue-loader dependency should not be used.

Edit2: My bad, the option is always enabled in dev.

[freddy38510]

Regarding the vue-loader issue, this PR contains the @freddy38510/vue-loader package updated with this commit.

Could you test the latest published version, and let me know if you have any issues ?

[Yentis]

With 5.0.1 I'm still having the same vue-loader error when running quasar ssg dev. I'm also getting a different error with quasar ssg generate but I'm not sure if that's something on your end:

App •  ERROR  • Could not pre-render page for route /

ReferenceError: TransformStream is not defined
    at Object.<anonymous> (D:\Repositories\yentis.github.io\ssg\node_modules\@zip.js\zip.js\index.cjs:6215:27)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at _require (D:\Repositories\yentis.github.io\ssg\node_modules\@quasar\ssr-helpers\lib\create-bundle.js:56:9)
    at Object.8206 (webpack://yentis.github.io/external commonjs "assert":1:17)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Object.4617 (webpack://yentis.github.io/src/services/rentryService.ts:22:18)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Object.6103 (webpack://yentis.github.io/src/composables/useSharing.ts:6:0)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Object.3356 (webpack://yentis.github.io/src/components/SettingsDialog.vue?88d7:15:15)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Module.9926 (render-app.js:1:419939)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Module.5629 (render-app.js:1:2756)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Object.851 (webpack://yentis.github.io/src/composables/useSettings.ts:13:19)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Object.6266 (webpack://yentis.github.io/src/composables/useUrlNavigation.ts:15:2)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at Object.827 (webpack://yentis.github.io/src/App.vue?f93b:10:0)
    at n (webpack://yentis.github.io/webpack/runtime/compat get default export:3:24)
    at render-app.js:1:426399
    at render-app.js:1:428438
    at Object.<anonymous> (render-app.js:1:428459)
    at evaluateModule (D:\Repositories\yentis.github.io\ssg\node_modules\@quasar\ssr-helpers\lib\create-bundle.js:96:21)
    at evaluateEntry (D:\Repositories\yentis.github.io\ssg\node_modules\@quasar\ssr-helpers\lib\create-bundle.js:187:31)
    at runApp (D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\create-renderer.js:283:35)
    at renderToString (D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\create-renderer.js:325:25)
    at PagesGenerator.v [as renderToString] (D:\Repositories\yentis.github.io\ssg\node_modules\.cache\quasar-app-extension-ssg\render-to-string.js:1:882)
    at PagesGenerator.renderPage (D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\PagesGenerator.js:234:25)
    at PagesGenerator.generatePage (D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\PagesGenerator.js:178:23)
    at PagesGenerator.<anonymous> (D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\PagesGenerator.js:120:22)
    at PagesGenerator.asyncWrapper (D:\Repositories\yentis.github.io\ssg\node_modules\fastq\queue.js:213:12)
    at push (D:\Repositories\yentis.github.io\ssg\node_modules\fastq\queue.js:110:14)
    at D:\Repositories\yentis.github.io\ssg\node_modules\fastq\queue.js:232:7
    at new Promise (<anonymous>)
    at Object.push (D:\Repositories\yentis.github.io\ssg\node_modules\fastq\queue.js:231:13)
    at D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\PagesGenerator.js:162:18
    at Array.forEach (<anonymous>)
    at PagesGenerator.generate (D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\PagesGenerator.js:157:12)
    at D:\Repositories\yentis.github.io\ssg\node_modules\quasar-app-extension-ssg\src\webpack\cmd\generate.js:131:45 {
  hint: 'Could not pre-render page for route \x1B[1m/\x1B[22m'
}

It shows this error for all routes.

[freddy38510]

It seems that the @freddy38510/vue-loader package was not updated in this commit.

Which command did you run ?

[Yentis]

quasar ext add ssg and (y) when requested to reinstall

[Yentis]

After removing yarn.lock & running yarn, quasar ssg dev now starts but gets the same error as quasar ssg generate

[freddy38510]

My bad about the @freddy38510/vue-loader package which was not correctly updated by the renovate bot. It will be fixed in the next release.

About your last error, it throws when rendering at server side because the TransformStream interface of the Streams API is not supported below Node.js v18.

It seems to be used by the @zip.js/zip.js package when you import its modules here.

You can upgrade to node v18, or conditionnaly import the modules only at client side.

if (process.env.CLIENT) {
  const { Data64URIWriter, TextReader, ZipWriter } = await import('@zip.js/zip.js');
}

[Yentis]

Thanks for the help, everything seems to be working fine now using Node.js v18 👍