[🐞] Error: `Code(10): QRL is not a function` in v1.2.6 with a `--mode` build argument

DustinJSilk commented 1 year ago

Which component is affected?

Qwik Runtime

Describe the bug

After upgrading from 1.2.4 to 1.2.6, I can no longer run my app in preview or production with a custom --mode argument to change the env file used.

The error happens as soon as an interaction happens on the frontend, like a onScroll$ or Link is clicked. This is the full error (probably not be too helpful):

Error: Code(10): QRL is not a function
    at Rs (http://localhost:4173/build/root2.js:1:1468)
    at _e (http://localhost:4173/build/root2.js:1:1381)
    at te (http://localhost:4173/build/root2.js:1:1503)
    at C (http://localhost:4173/build/root2.js:1:2152)
    at http://localhost:4173/build/root2.js:21:3057
    at async br (http://localhost:4173/build/root2.js:14:12852)

_e          @   root2.js:1
te          @   root2.js:1
C           @   root2.js:1
(anonymous)     @   root2.js:21
Promise.then (async)        
N           @   root2.js:2
(anonymous)     @   root2.js:21
(anonymous)     @   root2.js:3
Mt          @   root2.js:2
ht          @   root2.js:3
zn          @   root2.js:3
br          @   root2.js:14
await in br (async)     
(anonymous)     @   root2.js:14
(anonymous)     @   root2.js:2
setTimeout (async)      
(anonymous)     @   root2.js:2
nextTick        @   root2.js:2
Bn          @   root2.js:14
Zi          @   root2.js:14
Yi          @   root2.js:14
$notifySubs$        @   root2.js:21
set value       @   root2.js:3
l           @   layout_component__fr…ll_iywsqa0m0vw.js:1
ee          @   root2.js:3
(anonymous)     @   root2.js:21
Promise.then (async)        
N           @   root2.js:2
(anonymous)     @   root2.js:21
f           @   (index):7358
p           @   (index):7360

I havent been able to recreate it. I'm more than willing to jump on a call to debug it, or help in any other way!

Thanks!!

Reproduction

I've tried all day, and I cant get it reproducing in a blank repository.

Steps to reproduce

No response

System Info

N/A

Additional Information

I cant reproduce it at all.

tuurbo commented 1 year ago

I'm having the exact same problem. Did you find a solution?

mhevery commented 1 year ago

I'm really sorry, but I need a repro... If you can't reproduce it, how can I?

What is root2.js: That is not a standard Qwik bundle artifact.

The error means that the lazy loaded chunk is not a function and you are trying to invoke it as a function.

Sorry until I have a repro I am going to close this.

DustinJSilk commented 1 year ago

Thanks @mhevery, I know its not easy without a repro.. If i manage to recreate it I'll reopen the issue.

@tuurbo i havent fixed it yet since I cant find exactly whats causing it after a few hours of trying. I'm stuck using Qwik v1.2.4 unfortunately.

I suspect it started with this PR https://github.com/BuilderIO/qwik/pull/4719/ but I cant be 100% sure. In a few weeks when I have capacity again, I'll have another crack at recreating it.

mhevery commented 1 year ago

So if you see a version that works and a version that does not, can you try to bisect it?

Every change has a build here: https://github.com/BuilderIO/qwik-build/ and https://github.com/BuilderIO/qwik-city-build

You can install any one of them in you package.json like so

    "@builder.io/qwik": "github:BuilderIo/qwik-build#SHA",
    "@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#SHA",

So if you think it started with #4719 then this should fail:

    "@builder.io/qwik": "github:BuilderIo/qwik-build#97d8f9345daa09e0fb178870494ac4657591279b",
    "@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#6df2b45ffe54b0cb8557aa1d54b1d1fa5aafddd6",

But this should work

    "@builder.io/qwik": "github:BuilderIo/qwik-build#eeb419ec1479799783059b84a33d372050bdfa71",
    "@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#968c68ee5dd430eceb8e47b873e4ac99d818c34a",

DustinJSilk commented 1 year ago

Unfortunately Qwik had some erroneous code merged in when this issue was created, so its not possible to run Qwik and find the exact moment this issue was introduced. However, here are the commits when this issue didn't exist before, and after the other error was fixed the issue began. So somewhere in here lies the problem.

I'll keep digging.

https://github.com/BuilderIO/qwik/compare/8bdcb24...3e7e5e5

The root2.js file seems to be the root.tsx file being compiled weirdly

wmertens commented 1 year ago

@DustinJSilk instead of in a blank repo, can you start from your repo and remove everything that doesn't trigger the issue?

Meaning, if you remove it, the issue still happens.

DustinJSilk commented 1 year ago

I've managed to create a tiny repo that gives an almost identical error. I'm certain this is it: https://github.com/DustinJSilk/qwik-issue-code-10

The issue exists when building for preview or production when using a --mode argument to select which .env file to use with vite.

You can run pnpm preview to see it working, and pnpm preview-mode to see it broken and not working after clicking on screen.

I've tested it with versions 1.2.4, 1.2.6, 1.2.13, and 1.2.15 and the issue exists in all except for 1.2.4: https://github.com/BuilderIO/qwik/compare/8bdcb24...3e7e5e5.

Could we reopen this issue please? 😄

mhevery commented 1 year ago

I've tested it with versions 1.2.4, 1.2.6, 1.2.13, and 1.2.15 and the issue exists in all except for 1.2.4: 8bdcb24...3e7e5e5.

Can you bisect the exact change that is causing this? See instructions here: https://github.com/BuilderIO/qwik/blob/main/CONTINUOUS_BUILD.md

DustinJSilk commented 1 year ago

Thanks @mhevery !

The issues starts from commit https://github.com/BuilderIO/qwik/commit/60b37a90340e0d3f9f0f392c30c90fdf325f04e6

(FYI - to run that commit youd need to cherry pick/build/link Qwik with https://github.com/BuilderIO/qwik/commit/3e7e5e5a8da40399f977b46e9259b4f7c77de69e)

DustinJSilk commented 1 year ago

I almost managed to find a workaround. It would be great if the Qwik CLI had an option to load a specific env file without disrupting the build modes since this only half works and is still a blocker

I'm trying to manually load and define the env file in vite.config.ts.

So you would build/preview with a command such as:

VITE_MODE=staging qwik build preview && VITE_MODE=staging vite preview --open

vite.config.ts:

export default defineConfig(({ mode }) => {
  const env = loadEnv(process.env.VITE_MODE || mode, process.cwd(), 'PUBLIC')

  const define: Record<string, string> = {}
  for (const e of Object.entries(env)) {
    define[`import.meta.env.${e[0]}`] = JSON.stringify(e[1])
  }

  return {
    define: define,
    plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
    preview: {
      headers: {
        "Cache-Control": "public, max-age=600",
      },
    },
  };
});

EDIT

Weirdly, the preview command requires --mode ssr for qwik to run correctly with Playwright. However, it doesnt work when running in a Github action, all tests throw a ERR_CONNECTION_REFUSED after this error:

[WebServer] Missing client manifest, loading symbols in the client might 404. Please ensure the client build has run and generated the manifest for the server build.
[WebServer] TypeError: getPlatform is not iterable (cannot read property Symbol(Symbol.iterator))

I think its time to give up. i'll write a compile time script to change env files for each environment or something

PatrickJS commented 6 months ago

node 20 has a way to specify env file

gparlakov commented 6 months ago

Hey - it seems I'm late to this party ...

Still - I've spent the last few days chasing this bug and preparing a minimal repro so here it is https://github.com/gparlakov/qwik-ssg-bug-repro

Steps in readme.md

DustinJSilk commented 6 months ago

Nice! But I don’t think this will get fixed unfortunately.

I got build time env variables for each environment to work with a bash script to rename each env file before building in each environment.

I haven’t tried the node 20 API yet

PatrickJS commented 6 months ago

well it works if you make sure you don't define components in the same file.


import { CategoryFilter } from "./cat-filter";

export const MovementFilter = component$(() => {
  return (
    <div>
      {/*  */}
      <CategoryFilter />
      {/*  */}
    </div>
  );
});

if this component is in the same file then it breaks for some reason. likely optimizer error

output with the component in the same file

import { C as CategoryFilter } from "./movements_component_miz9gevnkx4.js";
import { e as _jsxQ, d as _jsxC } from "./root2.js";
import "./routes_component_kl40wl4em6q.js";
const MovementFilter_component_CzU2XoJ6dLc = () => {
  return /* @__PURE__ */ _jsxQ("div", null, null, /* @__PURE__ */ _jsxC(CategoryFilter, null, 3, "8q_1"), 1, "8q_2");
};
export {
  MovementFilter_component_CzU2XoJ6dLc
};

output that works and separate files

import { c as componentQrl, q as qrlDEV, _ as __vitePreload, e as _jsxQ, d as _jsxC } from "./root2.js";
const CategoryFilter = /* @__PURE__ */ componentQrl(/* @__PURE__ */ qrlDEV(() => __vitePreload(() => import("./categoryfilter_component_fjbqv4ofblg.js"), true ? [] : void 0), "CategoryFilter_component_FJBqv4ofBLg", {
  file: "/Users/patrickjs/code/gparlakov/qwik-ssg-bug-repro/src/components/movement-filter/cat-filter.tsx",
  lo: 92,
  hi: 127,
  displayName: "CategoryFilter_component"
}));
const MovementFilter_component_CzU2XoJ6dLc = () => {
  return /* @__PURE__ */ _jsxQ("div", null, null, /* @__PURE__ */ _jsxC(CategoryFilter, null, 3, "8q_0"), 1, "8q_1");
};
export {
  MovementFilter_component_CzU2XoJ6dLc
};

@wmertens this one is a pretty bad optimizer bug

PatrickJS commented 6 months ago

actually this is likely related to the preload vite bug that qwik-ui ran into

the import

import "./routes_component_kl40wl4em6q.js";

shouldn't be a thing in qwik outputs since this is vite hoisting

gparlakov commented 6 months ago

Oh I'm surprised that this got so much traction.

@PatricJS thanks for looking into it. And yes I'm aware that a separate file component does work.

To be honest I was not going to comment were it not for a few days of debugging I did before that. You know since the issue was closed.

On Sun, May 12, 2024, 11:33 AM PatrickJS @.***> wrote:

well it works if you make sure you don't define components in the same file.

import { CategoryFilter } from "./cat-filter"; export const MovementFilter = component$(() => { return (

{/* */} {/* */}

);});

if this component is in the same file then it breaks for some reason. likely optimizer error

— Reply to this email directly, view it on GitHub https://github.com/QwikDev/qwik/issues/4779#issuecomment-2106166785, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2SEV7CGC4V3KQ3FWYIJTDZB4SL3AVCNFSM6AAAAAA2GHYXW6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBWGE3DMNZYGU . You are receiving this because you commented.Message ID: @.***>

PatrickJS commented 6 months ago

@gparlakov don't hold back 👍 the repro you did was really helpful

yeah this is vite hoisting files and qwik conflicting. both are doing the same thing and when vite is turned on the qwik gets all messed up. I think vite might of had a regression or their api changed.

PatrickJS commented 6 months ago

we can say in the docs components should be separated one per file until we figure out the fix.

fprl commented 5 months ago

@PatrickJS Damn, do we have a turn around to this? My whole project has multiple components in the same file and it will be a mess to split things up.

Edit: my error was the same but probably different. I was importing Link from qwik-city in some places and also Link from my ui package in my monorepo so it seems there was a name collision.

PatrickJS commented 5 months ago

@fprl well only split if you run into the problem. @wmertens do we still have this issue in v2?

fprl commented 5 months ago

@fprl well only split if you run into the problem. @wmertens do we still have this issue in v2?

I ran into the same error in production build: Error: Code(10) and it was not clear where the issue was coming until I comment out a lot of components and realised that I was importing Link from qwik-city in some places and also Link from my ui package in my monorepo so it was related to a naming collision.

nolanholden commented 4 months ago

What a tricky bug.

I nailed it down to my use of quik-ui Modal. Removing that component avoided the issue for me.

Particularly was occurring after a Form action (from globalAction$) completed. It appears, thank to Dustin's repro, that this has to do with SessionContext which I believe the modal uses under the hood. Strangely, I was able to avoid the issue iff I didn't reference action.value, which of course was not a practical stop gap.

Hope this helps.

nolanholden commented 4 months ago

To nobody's discredit, I was just trialing qwik, and ran into this bug pretty quickly. This worried me about stability (particularly because this issue started ~1yr ago), so I begrudgingly may just go back to solidstart or next.

I wonder if this is a reflection of the utter difficulty of writing compilers (optimizers, etc) for vite and in javascript land in general. I looked at the code and it's pretty tough stuff. Maybe there are too many abstractions at hand and we need to do something more fundamental. I have to say I found for instance solidstart's stack-on-stack-on-stack business (vite,vinxi, blah blah) a bit of a head scratcher.

I'd be open to investing a lot of time in this if anyone has ideas.

wmertens commented 4 months ago

So in the current qwik@dev version, naming collisions in qrl segments are fixed.

@nolanholden could you try if that fixes your issue?

I agree that the optimization is very complex, I'm trying to simplify it as much as possible :sweat_smile:

gioboa commented 4 months ago

@nolanholden you can install the continuous releases with these packages https://github.com/QwikDev/qwik/runs/26508673662

wmertens commented 4 months ago

@gparlakov I can confirm that your repro is fixed with qwik@dev

gparlakov commented 4 months ago

Awesome, thanks for the update!

On Fri, Jun 21, 2024, 3:21 PM Wout Mertens @.***> wrote:

@gparlakov https://github.com/gparlakov I can confirm that your repro is fixed with @.***

— Reply to this email directly, view it on GitHub https://github.com/QwikDev/qwik/issues/4779#issuecomment-2182647972, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA2SEV67ETITY3BZAXT53XDZIQLEXAVCNFSM6AAAAAA2GHYXW6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBSGY2DOOJXGI . You are receiving this because you were mentioned.Message ID: @.***>

nolanholden commented 4 months ago

@wmertens / @gioboa Fixed the issue in preview/prod mode! Thanks! with

// ...
"devDependencies": {
  "@builder.io/qwik": "1.5.7-dev20240621090019",
  "@builder.io/qwik-city": "1.5.7-dev20240621090019",
  "@qwik-ui/headless": "^0.4.4",
  // ...

but now dev mode server fails on a seemingly different yet related bundler pathing issue (error message below)

index.tsx:153 

       GET http://localhost:5173/<REDACTED>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240621090019_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js net::ERR_ABORTED 404 (Not Found)
importSymbol @ core.mjs?v=98cf664a:340
resolve @ core.mjs?v=98cf664a:8678
resolveLazy @ core.mjs?v=98cf664a:8685
(anonymous) @ core.mjs?v=98cf664a:3621
executeTasksBefore @ core.mjs?v=98cf664a:3619
renderMarked @ core.mjs?v=98cf664a:3519
(anonymous) @ core.mjs?v=98cf664a:3497
(anonymous) @ core.mjs?v=98cf664a:354
setTimeout (async)
(anonymous) @ core.mjs?v=98cf664a:353
nextTick @ core.mjs?v=98cf664a:352
scheduleFrame @ core.mjs?v=98cf664a:3497
notifySignalOperation @ core.mjs?v=98cf664a:3478
notifyChange @ core.mjs?v=98cf664a:3434
$notifySubs$ @ core.mjs?v=98cf664a:8579
set value @ core.mjs?v=98cf664a:4714
AccountDropdown_component_div_div_button_onClick_GpyD79CN0mQ @ index.tsx:153
(anonymous) @ core.mjs?v=98cf664a:8642
invokeApply @ core.mjs?v=98cf664a:4547
invoke @ core.mjs?v=98cf664a:4539
(anonymous) @ core.mjs?v=98cf664a:8697
Promise.then (async)
maybeThen @ core.mjs?v=98cf664a:460
(anonymous) @ core.mjs?v=98cf664a:8689
dispatch @ (index):477
processDocumentEvent @ (index):567
Show 21 more frames
Show less
index.tsx:153 QWIK ERROR Failed to fetch dynamically imported module: http://localhost:5173/<REDACTED>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240621090019_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js TypeError: Failed to fetch dynamically imported module: http://localhost:5173/<REDACTED>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240621090019_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js
createAndLogError @ core.mjs?v=98cf664a:163
logError @ core.mjs?v=98cf664a:99
renderMarked @ core.mjs?v=98cf664a:3572
await in renderMarked (async)
(anonymous) @ core.mjs?v=98cf664a:3497
(anonymous) @ core.mjs?v=98cf664a:354
setTimeout (async)
(anonymous) @ core.mjs?v=98cf664a:353
nextTick @ core.mjs?v=98cf664a:352
scheduleFrame @ core.mjs?v=98cf664a:3497
notifySignalOperation @ core.mjs?v=98cf664a:3478
notifyChange @ core.mjs?v=98cf664a:3434
$notifySubs$ @ core.mjs?v=98cf664a:8579
set value @ core.mjs?v=98cf664a:4714
AccountDropdown_component_div_div_button_onClick_GpyD79CN0mQ @ index.tsx:153
(anonymous) @ core.mjs?v=98cf664a:8642
invokeApply @ core.mjs?v=98cf664a:4547
invoke @ core.mjs?v=98cf664a:4539
(anonymous) @ core.mjs?v=98cf664a:8697
Promise.then (async)
maybeThen @ core.mjs?v=98cf664a:460
(anonymous) @ core.mjs?v=98cf664a:8689
dispatch @ (index):477
processDocumentEvent @ (index):567
Show 18 more frames
Show less
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:5173/<REDACTED>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240621090019_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js
client:556 [vite] server connection lost. Polling for restart...

A couple things to note:

culprit is inside qwik-ui (@qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js)
I am using a pnpm monorepo — you can see <REDACTED> is my fully qualified macos /Users/.../repo path, to the pnpm workspace (a parent of the qwik package dir), not the path to the qwik project.

I made sure to clear caches & clean (git clean -ffxd) the whole monorepo & reinstall, so I suspect it's a real issue.

I also see that qwik-ui is correctly using qwik as a peer dependency, so shouldn't be issues there either?

Any ideas? (@wmertens )

wmertens commented 4 months ago

Ok I see. I added URI encoding in dev mode because paths included + and those turn into spaces otherwise. Looks like I have to decode then on the plugin side. Will push fix soon

wmertens commented 4 months ago

Hmm it will have to wait until tomorrow. I ran into another edge case, but I have an idea.

wmertens commented 4 months ago

ok should be fixed in #6590

PatrickJS commented 4 months ago

@wmertens can we finally close this issue 🙌

wmertens commented 4 months ago

I don't know :) I need confirmation from @gparlakov and @nolanholden that the current qwik@dev version works...

nolanholden commented 4 months ago

where can I find the new build package? I looked for a while but couldn't figure it out. Looked like ci skipped building the merge commit

wmertens commented 4 months ago

@nolanholden you just use dev as the version in the package.JSON file for both qwik and qwik-city

nolanholden commented 4 months ago

I see. Just tried with

    "@builder.io/qwik": "1.5.7-dev20240622232308",
    "@builder.io/qwik-city": "1.5.7-dev20240622232308",

Still seeing errors under pnpm run dev (console logs below, server logs are clean), with routeActions and other qrls failing "dynamically" fetch.

And these paths below (un-urlencoded) do not exist.

works fine with pnpm run preview.

index.tsx:693 

       GET http://localhost:5173/<repo-dir-redacted>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240622232308_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js net::ERR_ABORTED 404 (Not Found)
importSymbol @ core.mjs?v=01067d91:339
resolve @ core.mjs?v=01067d91:8677
resolveLazy @ core.mjs?v=01067d91:8684
(anonymous) @ core.mjs?v=01067d91:3620
executeTasksBefore @ core.mjs?v=01067d91:3618
renderMarked @ core.mjs?v=01067d91:3518
(anonymous) @ core.mjs?v=01067d91:3496
(anonymous) @ core.mjs?v=01067d91:353
setTimeout (async)
(anonymous) @ core.mjs?v=01067d91:352
nextTick @ core.mjs?v=01067d91:351
scheduleFrame @ core.mjs?v=01067d91:3496
notifySignalOperation @ core.mjs?v=01067d91:3477
notifyChange @ core.mjs?v=01067d91:3433
$notifySubs$ @ core.mjs?v=01067d91:8578
set value @ core.mjs?v=01067d91:4713
AccountDropdown_component_div_div_button_onClick_RNDg0a0F9mg @ index.tsx:693
(anonymous) @ core.mjs?v=01067d91:8641
invokeApply @ core.mjs?v=01067d91:4546
invoke @ core.mjs?v=01067d91:4538
(anonymous) @ core.mjs?v=01067d91:8696
Promise.then (async)
maybeThen @ core.mjs?v=01067d91:459
(anonymous) @ core.mjs?v=01067d91:8688
dispatch @ (index):73
processDocumentEvent @ (index):163
Show 21 more frames
Show less
index.tsx:693 QWIK ERROR Failed to fetch dynamically imported module: http://localhost:5173/<repo-dir-redacted>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240622232308_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js TypeError: Failed to fetch dynamically imported module: http://localhost:5173/<repo-dir-redacted>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240622232308_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js
createAndLogError @ core.mjs?v=01067d91:163
logError @ core.mjs?v=01067d91:99
renderMarked @ core.mjs?v=01067d91:3571
await in renderMarked (async)
(anonymous) @ core.mjs?v=01067d91:3496
(anonymous) @ core.mjs?v=01067d91:353
setTimeout (async)
(anonymous) @ core.mjs?v=01067d91:352
nextTick @ core.mjs?v=01067d91:351
scheduleFrame @ core.mjs?v=01067d91:3496
notifySignalOperation @ core.mjs?v=01067d91:3477
notifyChange @ core.mjs?v=01067d91:3433
$notifySubs$ @ core.mjs?v=01067d91:8578
set value @ core.mjs?v=01067d91:4713
AccountDropdown_component_div_div_button_onClick_RNDg0a0F9mg @ index.tsx:693
(anonymous) @ core.mjs?v=01067d91:8641
invokeApply @ core.mjs?v=01067d91:4546
invoke @ core.mjs?v=01067d91:4538
(anonymous) @ core.mjs?v=01067d91:8696
Promise.then (async)
maybeThen @ core.mjs?v=01067d91:459
(anonymous) @ core.mjs?v=01067d91:8688
dispatch @ (index):73
processDocumentEvent @ (index):163
Show 18 more frames
Show less
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:5173/<repo-dir-redacted>/node_modules/.pnpm/%40qwik-ui%2Bheadless%400.4.4_%40builder.io%2Bqwik%401.5.7-dev20240622232308_%40types%2Bnode%4020.12.7_terser%405.30.4_undici%405.28.4_/node_modules/%40qwik-ui/headless/components/modal/hmodalpanel_component_usetask_lr6cnk1egkg.js

wmertens commented 4 months ago

@nolanholden hmm annoying, not sure how it asked for that without the ?_qrl_parent parameter.

I suppose you can't share a repro?

Do you see any error messages in the logs, mentioning the word 'parent'?

nolanholden commented 4 months ago

I'm so swamped, it may be a while til I can.

I removed a LOT to get it to work — but it was too big of a haystack for now.

A couple possible culprits:

I'm breaking lots of conventions by colocating many components and route handlers in a single route file.
I'm using turborepo with a pnpm workspace, so dependencies are in a non-usual relative path
I'm indeed using pnpm workspace dependencies from the filesystem (non-npm)
I'm not certain where some of my dependencies should go; there are a few in "dependencies" which may not be server-only? I still don't quite get the right thing to do here.

I did it some points see "parent" in error messages, but not largely. Largely it was 'failed to dynamically import' ..._blah_blah_blah_usevisibletask or ..._routeaction etc. Sometimes just commenting out the code, e.g. commenting away the useVisibleTask would 'fix' the issue (or push the problem elsewhere). I did find i was not re-exporting a globalAction, but after fixing this i still saw the issue.

Sorry, I wish I could spend more time on it now.

In general, I'm leaning heavily toward rolling my own little framework, because, although the granular/default code splitting is quite powerful, I just want resumability/no-hydration! So in my particular case the auto-splitting unfortunately amounts to a lot of extra engineering under the hood which is problem surfacearea for us, at least while our app is so small.

I like that there are options in the ssr config to prefetch everything aggressively (there must be 7–8 options, which I currently have all enabled, shown below), but still that doesn't prevent these service worker(?) fetching issues, which makes sense.

src/entry.ssr.tsx

export default function (opts: RenderToStreamOptions) {
  return renderToStream(<Root />, {

    qwikLoader: {
      include: 'always',
      position: 'top',
    },

    prefetchStrategy: {
      implementation: {
        // Expectation: this takes place sooner than 'js-append', but
without downsides otherwise.
        linkInsert: 'html-append',

        // Expectation: more expensive up-front (more blocking HTTP bytes),
but more responsive later, than both 'prefetch' and 'preload'
        //
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/modulepreload
        linkRel: 'modulepreload',

        workerFetchInsert: 'always',

        prefetchEvent: 'always',
      },

      // From docs:
      // > Auto: Prefetch all possible QRLs used by the document. Default.
      symbolsToPrefetch: 'auto',
    },

    // ...
  });
}

On Mon, Jun 24, 2024 at 5:26 PM Wout Mertens @.***> wrote:

@nolanholden https://github.com/nolanholden hmm annoying, not sure how it asked for that without the ?_qrl_parent parameter.

I suppose you can't share a repro?

Do you see any error messages in the logs, mentioning the word 'parent'?

— Reply to this email directly, view it on GitHub https://github.com/QwikDev/qwik/issues/4779#issuecomment-2186843294, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGDQAECFUAJYNZZ52GUWALDZJA3DLAVCNFSM6AAAAAA2GHYXW6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBWHA2DGMRZGQ . You are receiving this because you were mentioned.Message ID: @.***>

wmertens commented 4 months ago

@nolanholden appreciate any time you can spend to help find the issue.

Note that these particular errors are only present during dev mode. The puzzling one for me is the URI-encoded request that should come with a _qrl_parent search parameter but doesn't. Ideally I'd like to know the initiator of that request.

As for your own framework: you can't get useful resuming without code splitting, and code splitting is useless unless there's no parent child coupling.

As for the bundling, you should configure vite so that everything is bundled, both on server and client (obviously). The only exceptions are binary dependencies. That means that your dependencies should only include exactly those packages that are needed on the server in production.

I'd be happy to jump on a short call with you to debug the issue and discuss.

wmertens commented 4 months ago

@nolanholden I think 1.7.1 fixes all the issues (but not on Windows quite yet)

QwikDev / qwik