Manage assets between dev & prod with vitejs

[max13fr]

Hello,

I'm using the new CLI with vitejs, it's really fast thanks for your hard work !

I just have an issue with assets when I'm trying to build my projet.
I tried a lot of solutions without any success unfortunatelly.

For context, I'm using last version of quasar 2.6.6 and @quasar/app-vite 1.0.0-beta.14.

First try : using root relative urls

According to the documentation (https://quasar.dev/quasar-cli-vite/handling-assets), "root-relative URLs (e.g. /logo.png – where ‘/’ is your publicPath) or logo.png are not processed at all".

So I tried this :

<img src="/v2/assets/iphone.png" />

With this following quasar.config.js (all /v2/* urls are forward to quasar, but we also accept root url without v2 with nginx specific rules) :

      publicPath: '/v2/',
      appBase: '/',                                                                                                     

It's working with quasar dev -m ssr but when I'm trying quasar build -m ssr, I got the following error :

[vite]: Rollup failed to resolve import "/v2/assets/iphone.png" from "src/pages/Index.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
/opt/quasar/node_modules/vite/dist/node/chunks/dep-611778e0.js:39103
            throw new Error(`[vite]: Rollup failed to resolve import "${id}" from "${importer}".\n` +
                  ^

Error: [vite]: Rollup failed to resolve import "/v2/assets/iphone.png" from "src/pages/Index.vue".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
    at onRollupWarning (/opt/quasar/node_modules/vite/dist/node/chunks/dep-611778e0.js:39103:19)
    at onwarn (/opt/quasar/node_modules/vite/dist/node/chunks/dep-611778e0.js:38919:13)
    at Object.onwarn (/opt/quasar/node_modules/rollup/dist/shared/rollup.js:23184:13)
    at ModuleLoader.handleResolveId (/opt/quasar/node_modules/rollup/dist/shared/rollup.js:22474:26)
    at /opt/quasar/node_modules/rollup/dist/shared/rollup.js:22435:26

Without the mode SSR (so in SPA mode) the build is working fine.

Second try : using root relative urls with rollupOptions.external

As the assets is still processed, I tried to manually override rollup options to avoid processing url starting by "/v2/assets/".

So I added the following to quasar.config.js :

      extendViteConf(viteConf) {
        viteConf.build.rollupOptions = {
          'external': function(id) {
            return id.startsWith('/v2/assets/');
          },
          'input': '/opt/quasar/.quasar/client-entry.js',
        };
      },

The input is required to I inspected quasar code and it's seems to use .quasar/client-entry.js as input.

Now the building seems to working fine but I got another error after (don't know why as the config seems to be the same used by default in quasar) :

 App •  DONE  • SSR Client compiled with success • 12569ms

node:fs:585
  handleErrorFromBinding(ctx);
  ^

Error: ENOENT: no such file or directory, open '/opt/quasar/dist/ssr/client/index.html'
    at Object.openSync (node:fs:585:3)
    at readFileSync (node:fs:453:35)
    at SsrBuilder.readFile (/opt/quasar/node_modules/@quasar/app-vite/lib/app-builder.js:26:12)
    at SsrBuilder.#writeRenderTemplate (/opt/quasar/node_modules/@quasar/app-vite/lib/modes/ssr/ssr-builder.js:124:23)
    at SsrBuilder.build (/opt/quasar/node_modules/@quasar/app-vite/lib/modes/ssr/ssr-builder.js:32:36) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/opt/quasar/dist/ssr/client/index.html'
}

Third try : using /src/assets/*

I tried to put all my assets in /src/assets/ then change my link to :

<img src="/src/assets/iphone.png" />

Now it's working when I'm building, but in dev mode the assets are not found as vitejs isn't rewriting the link as in the build : the browser is looking for https://mydomain.name/src/assets/iphone.png

How do you manage the compatibility between dev & build modes ?

Thanks in advance,
Max

[max13fr]

Hello,

I found a partial solution to the second try : the client need to use index.html instead of client-entry.js (but the SSR server need to use server-entry.js).

So I changed my quasar.conf.js to :

      extendViteConf(viteConf, { isClient }) {
        viteConf.build.rollupOptions = {
          'external': function(id) {
            return id.startsWith('/v2/assets/');
          },
          'input': isClient ? 'index.html' : '.quasar/server-entry.js',
        };
      },

Now the build is working 🥳 but I got an error when I'm trying to run the server 😞 :

(cd /opt/quasar/dist/ssr && npm run start)

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '../../../../../v2/assets/iphone.png'
Require stack:
- /opt/quasar/dist/ssr/server/server-entry.js
- /opt/quasar/dist/ssr/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Module.<anonymous> (/opt/quasar/dist/ssr/server/server-entry.js:1:874)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/opt/quasar/dist/ssr/server/server-entry.js',
    '/opt/quasar/dist/ssr/index.js'
  ]
}

I don't understand why the image is managed as module instead of just an external link :/

Max