Error during SSG

Question

Error during SSG

swwind opened this issue a year ago · comments

I get the following error while compiling my website to SSG.

Cannot resolve symbol IoAlarm_component_EpS7H4rcUkE in {
  '02wMImzEAbk': [ 's_02wMImzEAbk', 'q-75a4e60b.js' ],
  '3sccYCDd1Z0': [ 's_3sccYCDd1Z0', 'q-aa1f739e.js' ],
  '8gdLBszqbaM': [ 's_8gdLBszqbaM', 'q-d6418d64.js' ],
  AKetNByE5TM: [ 's_AKetNByE5TM', 'q-16ed91ee.js' ],
  TxCFOy819ag: [ 's_TxCFOy819ag', 'q-75a4e60b.js' ],
  VkLNXphUh5s: [ 's_VkLNXphUh5s', 'q-b1e8c4af.js' ],
  zrbrqoaqXSY: [ 's_zrbrqoaqXSY', 'q-b668ba7f.js' ],
  EpaZ5qQ4Lg4: [ 's_EpaZ5qQ4Lg4', 'q-d6418d64.js' ],
  PrXIxv2vNXY: [ 's_PrXIxv2vNXY', 'q-d6418d64.js' ],
  fX0bDjeJa0E: [ 's_fX0bDjeJa0E', 'q-75a4e60b.js' ],
  kzjavhDI3L0: [ 's_kzjavhDI3L0', 'q-d6418d64.js' ],
  sKCu0TvdkZI: [ 's_sKCu0TvdkZI', 'q-16ed91ee.js' ],
  yiXwCC0m3jY: [ 's_yiXwCC0m3jY', 'q-d6418d64.js' ]
}
QWIK ERROR Error: Code(31)
    at createError (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:70:17)
    at logError (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:64:54)
    at logErrorAndStop (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:74:17)
    at qError (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:137:12)
    at serializeQRL (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:515:15)
    at Object.serialize (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:6116:16)
    at serializeValue (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:6376:28)
    at file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:4242:23
    at Array.map (<anonymous>)
    at _pauseFromContexts (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:4225:32) IoAlarm_component_EpS7H4rcUkE

Error during SSG
Code(31)
  Pathname: /
  Plugin: qwik-ssg
      at createError (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:70:17)
      at logError (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:64:54)
      at logErrorAndStop (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:74:17)
      at qError (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:137:12)
      at serializeQRL (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:515:15)
      at Object.serialize (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:6116:16)
      at serializeValue (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:6376:28)
      at file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:4242:23
      at Array.map (<anonymous>)
      at _pauseFromContexts (file:///home/swwind/Repositories/qwik-app/node_modules/@builder.io/qwik/core.mjs:4225:32)
error during build:
undefined

Steps to reproduce

yarn create qwik
yarn add @qwikest/icons
yarn qwik add static
Modify following files

// routes/layout.tsx
import { component$, Slot } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";

export default component$(() => {
  return (
    <>
      <Link href="/" />
      <Slot />
    </>
  );
});

// routes/index.mdx
import { IoAlarm } from "@qwikest/icons/ionicons";

<IoAlarm class="w-4" />

Then run yarn build and get errors above.

Possible solutions

Remove class prop in <IoAlarm class="w-4" /> fixes the problem.
Move code from index.mdx to index.tsx also fixes the problem.
Remove <Link href="/" /> from layout.tsx also fixes the problem.

However, when the three things came together, qwik SSG panicked.

Niklas · Answer 1 · Fri Mar 17 2023 15:23:45 GMT+0800 (China Standard Time)

Hey, thanks for reporting. I'll try to reproduce the error. Which qwik version are you running?

swwind · Answer 2 · Fri Mar 17 2023 15:54:01 GMT+0800 (China Standard Time)

Hey, thanks for reporting. I'll try to reproduce the error. Which qwik version are you running?

I tried the latest qwik@0.22.0 + qwik-city@0.6.2 and the problem still persists.

zhuhaow · Answer 3 · Sat Apr 22 2023 16:33:22 GMT+0800 (China Standard Time)

On

  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 100.42 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.asdf/installs/nodejs/lts/bin/node
    npm: 9.5.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 112.0.5615.137
    Safari: 16.3
  npmPackages:
    @builder.io/partytown: ^0.8.0 => 0.8.0
    @builder.io/qwik: 0.103.0 => 0.103.0
    @builder.io/qwik-city: 0.103.0 => 0.103.0
    undici: ^5.21.2 => 5.21.2
    vite: 4.3.1 => 4.3.1

The icon won't be generated on SSG, we will just get an empty element.

<!--qv q:key=wQnO:W4_9-->
<!--/qv-->

But it works fine on client side rendering.

The problem can be reproduced on 0.0.5, 0.0.4, 0.0.3, that's all versions I have tested.

Niklas · Answer 4 · Mon Apr 24 2023 03:29:31 GMT+0800 (China Standard Time)

I'll bump versions, reproduce and try to fix this. Sorry for the long delay, I'm currently moving into a new flat and working on a business idea – so not much time left 😁

Niklas · Answer 5 · Mon Apr 24 2023 03:48:58 GMT+0800 (China Standard Time)

Probably connected to: QwikDev/qwik#3471

zhuhaow · Answer 6 · Mon Apr 24 2023 10:15:25 GMT+0800 (China Standard Time)

QwikDev/qwik#3471 (comment)

I think it may be ok to have only one entry point given rollup would do tree shaking, and everyone using qwik will be using vite.

Niklas · Answer 7 · Mon Apr 24 2023 15:05:54 GMT+0800 (China Standard Time)

Tree-shaking will work fine, but the TypeScript autocomplete performance will suffer.

Anyway, probably a good idea for the time until multiple entry points are possible.

zhuhaow · Answer 8 · Mon Apr 24 2023 18:27:52 GMT+0800 (China Standard Time)

Could be a problem with too many candidates for autocompletion.

One possible solution could be (if qwik won't support multi entrypoints) to divide different icon sets into different packages.

Niklas · Answer 9 · Wed Apr 26 2023 15:00:19 GMT+0800 (China Standard Time)

Seems that suffixing the bundle files like *.qwik.mjs is enough :)
I'll release a working fix today, where the package works both on client side updates and on server side:

Screen.Recording.2023-04-26.at.08.58.28.mov

Niklas · Answer 10 · Wed Apr 26 2023 15:19:33 GMT+0800 (China Standard Time)

Hey @zhuhaow & @swwind I just released version 0.0.6 with a fix for this. I'd really appreciate if you could give me a short feedback if all issues are resolved 👍

Hope you have a nice day!

zhuhaow · Answer 11 · Wed Apr 26 2023 18:09:44 GMT+0800 (China Standard Time)

Hi @NiklasPor, 0.0.6 is still not working for me with vite --mode ssr

zhuhaow · Answer 12 · Wed Apr 26 2023 18:24:26 GMT+0800 (China Standard Time)

Let me know if you need a reproducible demo

Niklas · Answer 13 · Wed Apr 26 2023 19:27:52 GMT+0800 (China Standard Time)

@zhuhaow repro demo or repo would be great, --mode ssr now works for me on 0.0.6 with Qwik & Qwik-City version 0.103.0.

zhuhaow · Answer 14 · Wed Apr 26 2023 21:05:59 GMT+0800 (China Standard Time)

https://github.com/zhuhaow/qwikest-icons-ssr-bug

I only adad @qwikest/icons and it won't work, it generates just a empty element.

I'm guessing you used useVisibleTask$() somewhere so the element got rendered on the client side?

Niklas · Answer 15 · Wed Apr 26 2023 23:33:24 GMT+0800 (China Standard Time)

No there's actually no server or client specific code in the library. I'll investigate your demo, thanks

Niklas · Answer 16 · Sat May 13 2023 14:09:06 GMT+0800 (China Standard Time)

Hey all, after a lot of adjustments, api changes and testing I've released @qwikest/icons@0.0.8 – I'd be happy if someone gives it a shot.

Some icon names now might be different, the variants have been suffixed (because props are no longer an option with lite components, as they'd always be included inside the bundle).

Hope you all have a great weekend 👋

Niklas · Answer 17 · Sat May 13 2023 15:05:56 GMT+0800 (China Standard Time)

Working example now available in a code sandbox: https://codesandbox.io/p/sandbox/keen-knuth-pni4bo?file=%2Fsrc%2Froutes%2Findex.tsx%3A7%2C11

zhuhaow · Answer 18 · Sat May 13 2023 17:20:33 GMT+0800 (China Standard Time)

The problem is solved in the latest version!

Thanks! 🎉 🎉

Colum Ferry · Answer 19 · Sun Jul 16 2023 19:58:29 GMT+0800 (China Standard Time)

This still occurs with the express adapter.

Some seem to load fine, others are just comments

Quentin 'kay' S. · Answer 20 · Fri Jul 21 2023 16:49:22 GMT+0800 (China Standard Time)

I use the Fastify adapter and get the same problem, in dev mode it work fine but after building and running Fastify the icons appear only after an interaction like change a Signal value or a Link action.

Hugo Pineda · Answer 21 · Thu Aug 10 2023 00:36:44 GMT+0800 (China Standard Time)

This is still happening on "@builder.io/qwik": "^1.2.6" and "@qwikest/icons": "^0.0.8"

Hugo Alliaume · Answer 22 · Sun Aug 27 2023 01:40:19 GMT+0800 (China Standard Time)

This is also still happening on "@builder.io/qwik": "^1.2.9" and "@qwikest/icons": "^0.0.8" :/

Omar Diab · Answer 23 · Wed Jun 12 2024 05:30:38 GMT+0800 (China Standard Time)

Also I am seeing this on the latest version with the Cloudflare adapter, dev is fine, on build, nothing.