QwikDev
[🐞] Error: `Code(10): QRL is not a function` in v1.2.6 with a `--mode` build argument
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.
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.
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.
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",
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
@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.
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? 😄
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
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)
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
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
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
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
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
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 (
{/* /} <CategoryFilter /> {/ */});});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: @.***>
@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.
we can say in the docs components should be separated one per file until we figure out the fix.
@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.
@fprl well only split if you run into the problem. @wmertens do we still have this issue in v2?
@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.
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.
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.
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:
@nolanholden you can install the continuous releases with these packages https://github.com/QwikDev/qwik/runs/26508673662
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: @.***>
@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 )
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
Hmm it will have to wait until tomorrow. I ran into another edge case, but I have an idea.