[🐞] Error: Missing Qwik City Env Data

[Nefcanto]

Which component is affected?

Qwik Runtime

Describe the bug

I'm trying to load settings and configuration dynamically. I want to not use .env and .env.production file to prevent settings being injected and hardcoded into the build output.

I have tried to use fs to read settings. It works in the development environment. But when I go to the production, I get this error:

Error: Missing Qwik City Env Data
    at AsyncFunction.Aa (file:///Temp/server/q-DNo4f3Gn.js:15:11868)
    at AsyncFunction.dc (file:///Temp/server/q-DNo4f3Gn.js:10:5874)
    at AsyncFunction.V (file:///Temp/server/q-DNo4f3Gn.js:10:5808)
    at file:///Temp/server/q-DNo4f3Gn.js:15:2935
    at q (file:///Temp/server/q-DNo4f3Gn.js:7:1510)
    at file:///Temp/server/q-DNo4f3Gn.js:15:2804
    at file:///Temp/server/q-DNo4f3Gn.js:8:4693
    at Qt (file:///Temp/server/q-DNo4f3Gn.js:7:1430)
    at Et (file:///Temp/server/q-DNo4f3Gn.js:8:4686)
    at wi (file:///Temp/server/q-DNo4f3Gn.js:8:9122)

Node.js v20.11.0

Reproduction

https://github.com/Nefcanto/QwikMissingQwikCityEnvData

Steps to reproduce

1. git clone http://github.com/Nefcanto/QwikMissingQwikCityEnvData
2. cd QwikMissingQwikCityEnvData
3. npm install --legacy-peer-deps
4. npm run dev
5. You should be able to see the site in the browser if you navigate to https://localhost:5173
6. Now let's build the site
7. npm run build
8. node server/entry.express.js
9. Now you should see this error:

Error: Missing Qwik City Env Data
    at AsyncFunction.Aa (file:///Temp/server/q-DNo4f3Gn.js:15:11868)
    at AsyncFunction.dc (file:///Temp/server/q-DNo4f3Gn.js:10:5874)
    at AsyncFunction.V (file:///Temp/server/q-DNo4f3Gn.js:10:5808)
    at file:///Temp/server/q-DNo4f3Gn.js:15:2935
    at q (file:///Temp/server/q-DNo4f3Gn.js:7:1510)
    at file:///Temp/server/q-DNo4f3Gn.js:15:2804
    at file:///Temp/server/q-DNo4f3Gn.js:8:4693
    at Qt (file:///Temp/server/q-DNo4f3Gn.js:7:1430)
    at Et (file:///Temp/server/q-DNo4f3Gn.js:8:4686)
    at wi (file:///Temp/server/q-DNo4f3Gn.js:8:9122)

Node.js v20.11.0

System Info

System:
    OS: Linux 6.5 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
    Memory: 9.17 GB / 15.35 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
  npmPackages:
    @builder.io/partytown: ^0.9.2 => 0.9.2 
    @builder.io/qwik: ^1.4.5 => 1.4.5 
    @builder.io/qwik-auth: ^0.1.3 => 0.1.3 
    @builder.io/qwik-city: ^1.4.5 => 1.4.5 
    undici: ^6.6.2 => 6.7.0 
    vite: ^5.1.4 => 5.1.4

Additional Information

We have three different modes for Qwik: dev, preview, and build.
Based on our experience, these differ from each other.
Please make them work as much the same as possible. If something works using npm run dev it should work for npm run build.

[wmertens]

This sounds like some sort of import order issue maybe? Not sure how your additions cause this to break.

It's probably happening here, which uses useQwikCityEnv, which uses useServerData, which is injected into the render function by qwik-city here which generates it from the incoming requests here.

[Nefcanto]

@wmertens, because we want to have dynamic settings, one thing we tried was to return a function that returns the render function in entry.ssr.tsx. In other words, converting this:

export default function (opts: RenderToStreamOptions) {
    return renderToStream(<Root />, {
        manifest,
        ...opts,
        // Use container attributes to set attributes on the html tag.
        containerAttributes: {
            lang: opts.serverData?.locale || "en",
            ...opts.containerAttributes,
        },
    });
}

to this:

export default function (props) {
    function render(opts: RenderToStreamOptions) {
        return renderToStream(<Root {...props} />, {
            manifest,
            ...opts,
            containerAttributes: {
                lang: opts.serverData?.locale || "en",
                ...opts.containerAttributes,
            },
        });
    }
    return render(props)
}

And changing this line in entry.express.ts, from this:

const { router, notFound } = createQwikCity({ render, qwikCityPlan, manifest });

to this:

const props = {} // reading settings dynamically in express layer, rather than Qwik layer when the app wants to start
const render = renderer(props)
const { router, notFound } = createQwikCity({ render, qwikCityPlan, manifest });

And that caused this error. But that's a totally valid JavaScript code. What could be wrong here?

[wmertens]

Seems ok, you'll have to step through it to figure it the problem.

[Nefcanto]

@wmertens, I have done it a couple of times. But I can't find out the problem. That's why I have submitted an issue. The error is very vague.

[wmertens]

Myeah, better to do the dynamic environment like I explained in the other issue.

[GrandSchtroumpf]

This happens to me when opening the console in the devtools of Firefox with this additional warning in the console:

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://356a5cca-d12d-4591-83bc-b31caa7d6363/inject.js
Source Map URL: inject.js.map

[Dindaleon]

This is happening to me with a fresh install when I add <QwikPartytown forward={['dataLayer.push', 'fbq']} /> to the root.tsx

export default component$(() => {
  /**
   * The root of a QwikCity site always start with the <QwikCityProvider> component,
   * immediately followed by the document's <head> and <body>.
   *
   * Don't remove the `<head>` and `<body>` elements.
   */

  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <link rel="manifest" href="/manifest.json" />
        <QwikPartytown forward={['dataLayer.push', 'fbq']} /> <---- If I remove this line, the error goes away
        <RouterHead />
        
      </head>
      <body lang="en">
        <RouterOutlet />
        <ServiceWorkerRegister />
      </body>
    </QwikCityProvider>
  );
});

[RaeesBhatti]

I ran into this when using QwikPartytown integration as well. Here's a reproduction: https://stackblitz.com/edit/qwik-starter-7l7lf7?file=src%2Froot.tsx

The above link only runs into an error when you click the reload icon. You'll be able to see the error in terminal.

[ahme-dev]

I faced the same issue, but it was only due to the hostname/domain (localhost) having data of previous app stored in it. It solved itself when I cleared cookies and site data

[ogdakke]

I faced the same issue, but it was only due to the hostname/domain (localhost) having data of previous app stored in it. It solved itself when I cleared cookies and site data

This fixed the issue for me aswell. Thanks

[PatrickJS]

closing this for #6237

[JerryWu1234]

I ran into this when using QwikPartytown integration as well. Here's a reproduction: https://stackblitz.com/edit/qwik-starter-7l7lf7?file=src%2Froot.tsx

The above link only runs into an error when you click the reload icon. You'll be able to see the error in terminal.

this link is right. no error in this link