No clarity on how to create a client side component WITH a node_modules/.js file and use it in a page.

[AlphaJuliettOmega]

Description

There is no proper documentation on integrating a JS file (for example wordcloud) inside an SSR enabled project, inside a page or component.

Yes there's a QNoSsr component but this does not address the problem, ok so the Template doesn't load but how do you manage the Imports in the <script setup>?
Putting the import inside a component inside a QNoSSR still runs the import server-side, running the file, causing an error and the library is useless.

How do you dynamically import without creating an invalid template?

I'm using (!process.env.SERVER) as well around an attempt at a runtime client-side import but the import runs on the server anyway resulting in document undefined errors.
I expect such errors when it runs server side but what's the point of 'client side checks' if it just gets ignored and it all runs on the server...

The documentation needs a clear example of a small working integration of any third party .js file (preferably inside a TS context) so that it's not complete guesswork to implement.

If you can suggest any alternative for the meanwhile or a specific documentation link you think I may have missed, I'd appreciate it greatly.

https://quasar.dev/quasar-cli-webpack/developing-ssr/ssr-frequently-asked-questions

Documentation Section URL

https://quasar.dev/quasar-cli-webpack/developing-ssr

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar), TypeScript Support, SSR Mode, PWA Mode

[pdanpdan]

You have all the details related to quasar here: https://quasar.dev/quasar-cli-vite/boot-files#usage-of-boot-files

For the rest please check the Vue docs, or the docs of what you are using

[AlphaJuliettOmega]

@pdanpdan
Yes there is documentation that says how to create a boot file and how to add it in the Quasar build, but nothing about 'why' to contextualize why or how a 'boot file' would solve this problem.

I need the .js file to be loaded on the client side, but that file exports a function directly that I cannot access in the <script setup> to actually run the function inside the component that's already inside a QNoSsr tag (<q-no-ssr></q-no-ssr>)

There is technically documentation about SSR but it doesn't clarify what Boot files are for/can be used for

How are boot files related to the questions I asked above?

[pdanpdan]

The rest is not related to Quasar, but to how Vue/Vue SSR/that script/JS works.

[AlphaJuliettOmega]

The documentation doesn't describe SSR + how to do imports for the client + how the QNoSsr + how Boot files work well enough for me to agree with you on that answer

[AlphaJuliettOmega]

This was solved by simply putting the call to instantiate the wordcloud inside onMounted

It doesn't matter whether you put a component inside a QNoSsr component, it still renders server-side it seems.

Also have to not use Vite it seems as Vite + SSR isn't supported by Quasar yet, this is only mentioned on the NPMJS site as far as I can see:
https://www.npmjs.com/package/@quasar/vite-plugin
Maintainer Correction: Quasar CLI with Vite supports SSR, but Quasar Vite Plugin does not support it. It's mentioned in the documentation: https://quasar.dev/start/vite-plugin

Disappointed that you closed the discussion instead of discussing anything.
That doesn't resolve anything.

Documentation about onMounted and its behaviour in SSR mode should be the first thing mentioned in the SSR docs in big and bold.

What the QNoSsr component use-cases are would also be nice.
The one use-case I had for it, only caused nonsensical errors.

A catch inside Quasar for failed to call document.x could simply show an error that says 'put your code inside onMounted' would also have saved about a day per developer that ever tries to use SSR in the future.

[pdanpdan]

Quasar docs are not a replacement of Vue docs. If there is something specific to quasar we document it.

[AlphaJuliettOmega]

I got d3 working in Quasar SSR by doing this in Quasar config...

      transpileDependencies: [
        'd3',
        'd3-array',
        'internmap',
        'd3-axis',
        'd3-brush',
        'd3-dispatch',
        'd3-drag',
        'd3-selection',
        'd3-interpolate',
        'd3-color',
        'd3-transition',
        'd3-timer',
        'd3-ease',
        'd3-chord',
        'd3-path',
        'd3-contour',
        'd3-delaunay',
        'delaunator',
        'robust-predicates',
        'd3-dsv',
        'd3-fetch',
        'd3-force',
        'd3-quadtree',
        'd3-format',
        'd3-geo',
        'd3-hierarchy',
        'd3-polygon',
        'd3-random',
        'd3-scale',
        'd3-time',
        'd3-time-format',
        'd3-scale-chromatic',
        'd3-shape',
        'd3-zoom',

Something something webpack doesn't do the CommonJS/ESModules thing properly
Or a mix of module types causes the issue

[christian-beckmann]

Maybe this is the documentation you needed: https://stackoverflow.com/a/64702437/270935