qwik: [🐞] Cannot access `$routeLoader$` const before initialization in `npm run preview`

Which component is affected?

Qwik Runtime

Describe the bug

I am doing…

npm run preview

What I expect is

Preview of production server to run successfully to conduct E2E testing with playwright test.

What’s actually happening

Unable to load any route because of the following error:

Error is happening because in entry.preview.mjs, usage of routeLoader$ happened before its declaration as a const. See screenshots of prettified build file below:

Usage happened at line 3865:

But routeLoader$ happened at line 3607.

Reproduction

https://github.com/limjiechao/qwik-error-reproduction

Steps to reproduce

~~I’m having difficulty reproducing it. But the repo link given is a minimal reproduction of my code.~~

~~Run npm run preview and the error described would have occurred in src/routes/layout.tsx.~~

~~Please do have a look. I’d be happy to assist further to correctly reproduce the problem for triaging if anyone has any idea what else could lead to it. Thank you!~~

Check out the repository above. Do a npm i && npm run preview.

System Info

System:
    OS: macOS 13.0
    CPU: (8) arm64 Apple M1
    Memory: 72.53 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.7.0 - ~/.nvm/versions/node/v19.7.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v19.7.0/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.1
  npmPackages:
    @builder.io/qwik: 0.100.0 => 0.100.0 
    @builder.io/qwik-city: 0.100.0 => 0.100.0 
    undici: 5.21.0 => 5.21.0 
    vite: 4.2.1 => 4.2.1

Additional Information

This error doesn’t occur when I’m not on the RC:

If I downgrade to the following, everything works fine.

        "@builder.io/qwik": "0.24.0",
        "@builder.io/qwik-city": "0.7.1",
        "eslint-plugin-qwik": "^0.24.0",

About this issue

Original URL
State: open
Created a year ago
Reactions: 1
Comments: 19 (5 by maintainers)

Most upvoted comments

@PacoDu I followed @thekip’s suggestion.

It seems like the order of imports is causing the problem in entry.preview.tsx:

Problem is resolved by putting import render from './entry.ssr'; after import qwikCityPlan from '@qwik-city-plan';

~~I don’t really understand why the order matters but it did.~~

See https://github.com/BuilderIO/qwik/blob/7eebd491ff85812e54a899b43fccb07ee6bc31da/packages/docs/src/entry.preview.tsx

limjiechao on Apr 7, 2023

I was able to fix it by re-adding integration with express using qwik add. I examined files added/changed by CLI and there are slight changes in the configurtion.

So if you are like me updating Qwik from one of the older versions, try to generate a fresh project with latest cli and compare with what you have.

thekip on Apr 4, 2023

Thanks @NiklasPor for the update. Can we add a caveat on the official documentation for that? Would you like to create a PR?

Best thing would be to add a comment in the generated file. Also I created the Qwik app with qwik-nx and it was out of the box in the wrong order.

NiklasPor on Oct 3, 2023

The same with build for express

"build.server": "vite build --ssr src/entry.express.ts",

thekip on Apr 4, 2023