Hi.

I am trying to use Astro with Qwik and deploy to GitLab Pages (static hosting). I have a simple index page with a basic Qwik counter component. Everything works as expected in development mode (npm run dev). However, when I build the site (npm run build) and either deploy it on GitLab Pages or preview it locally (npm run preview) it works initially, but fails after a page reload (CTRL-R) with the following error messages:

Failed to load ‘https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/build/q-N3Qf0_UH.js’. A ServiceWorker passed a promise to FetchEvent.respondWith() that rejected with ‘TypeError: null has no properties’.

Loading failed for the module with source “https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/build/q-N3Qf0_UH.js”.

Uncaught (in promise) TypeError: error loading dynamically imported module: https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/build/q-N3Qf0_UH.js
    d https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/:18
    AsyncFunctionThrow self-hosted:856
    (Async: async)
    w https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/:18
    v https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/:18
    push https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/:18
    <anonymous> https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/:57

The only way to make it work again is with a hard refresh (CTRL-SHIFT-R).
Tested in both Firefox and Edge.

Code available here (minimal): https://gitlab.com/alping-se/templates/astro-unocss-qwik-starter
Example website available here: https://astro-unocss-qwik-starter-alping-se-templates-959b4525659b9f868.gitlab.io/
(To see the errors reload the page at least once)

I am not sure if this is a bug or if I have maybe misunderstood how to generate static sites with Astro+Qwik.

- Peter

First thanks for working on this integration, it is super interesting to play with the integration of multi awesome concepts for making the web faster and better.
Please let me know if this is not related at all to this integration, throughout troubleshooting it seems to only affect astro template so far.

I am trying to setup Vitest with it to enable some unit testing.

I have attempted to setup Vitest with the following steps that are outlined in a blog here It however uses qwik city and vite instead.

1. Install vitest with npm i vitest --save-dev
2. Create a vitest.config.ts with the following

/// <reference types="vitest" />
import { getViteConfig } from 'astro/config';

export default getViteConfig({
	test: {
    exclude: ['~', 'node_modules', 'dist', 'public'],
	},
});

3. Add the Counter.tsx (small change to have count in a div and class count for test targeting) (from README.md example) and a Counter.test.tsx with the following content for basic test

import { createDOM } from '@builder.io/qwik/testing'; // import the createDOM method
import { describe, expect, it } from 'vitest';
import Counter from './Counter';

describe('Counter component', function () {
  it('should render', async () => {
    // create the component's DOM and get back the container and a render method
    const { screen, render } = await createDOM();

    // call the render method with the JSX node of our Counter component as a parameter
    await render(<Counter />);

    // get the div that displays the count from our container
    const countElement = screen.querySelector('.count');

    // assert the displayed count is "0" which is the default value
    expect(countElement?.textContent).toBe('0');
  });
});

Expected outcome: (from the qwik city example)

✓ src/components/starter/counter/counter.test.tsx (1)
   ✓ Counter component (1)
     ✓ should render

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  19:11:43
   Duration  617ms (transform 367ms, setup 0ms, collect 405ms, tests 27ms, environment 0ms, prepare 48ms)


  ❗️ Expect significant performance loss in development.
  ❗️ Disabling the browser's cache results in waterfall requests.

Also as a bonus does anyone know why it has these warnings for performance?

Actual Outcome:

 FAIL  src/components/Counter/Counter.test.tsx [ src/components/Counter/Counter.test.tsx ]
Error: Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.
 ❯ $ dist-dev/tsc-out/packages/qwik/src/core/qrl/qrl.public.js:83:15
 ❯ Module.component$ dist-dev/tsc-out/packages/qwik/src/core/component/component.public.js:140:25
 ❯ src/components/Counter/Counter.tsx:4:16
      2| import styles from './counter.module.css';
      3| 
      4| export default component$(() => {
       |                ^
      5|   const count = useSignal(70);
      6| 
 ❯ src/components/Counter/Counter.test.tsx:4:31

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  19:35:12
   Duration  239ms (transform 24ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 40ms)

Any information on this would be awesome, I struggled finding any information on this through some searches. 🙇

Extra
When trying to build it happens to do this as well

✓ built in 663ms
"fileURLToPath" is not exported by "__vite-browser-external", imported by "node_modules/@builder.io/qwik/testing/index.mjs".
file: /Users/me/projects/personal/site/node_modules/@builder.io/qwik/testing/index.mjs:22378:9
22376: // packages/qwik/src/testing/platform.ts
22377: import { existsSync } from "fs";
22378: import { fileURLToPath } from "url";

Astro's injectScript API will add the qwikLoader to every page.

While the qwikLoader is very small, we want to ensure the qwikLoader is added only when it is a page that uses Qwik.

Hi team. I'm using the following packages / versions

• "@builder.io/qwik": "^1.2.17",
• "@qwikdev/astro": "^0.1.16",

And all is well when running yarn dev, but when running yarn build and then yarn preview i see the following errror:

uncaught (in promise) TypeError: Failed to fetch dynamically imported module:

Reproduction repo on the feat/add-quik branch here: simple-sidebar-navigation-astro/tree/feat/add-quik

There should now be a click handler on the burger menu (resize your browser to a smaller screen size), which doesn't work in "prod". Also seeing a 404 for the favicon which might be releated.

I have two other branches in that repo that you can use for reference. One uses vanilla Js, the other uses React. All three branches have the same functionality, just implemented using different flavours of JavaScript.

• main
• feat/add-react

I tried to deploy my apps to Cloudflare, that's works when I'm testing using preview scripts (wrangler pages dev ./dist), but when I deployed that, I got an error:

I tried to compare both of them, but I don't see any difference
related to #17 (comment)

Issue

This is a follow up for the test issue here

Here is the reproduction. Running build or test (simplest way is useing this dropdown) will error in slightly different ways described above.

TEST
Error: Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.

Build

"fileURLToPath" is not exported by "__vite-browser-external", imported by "node_modules/@builder.io/qwik/testing/index.mjs".
file: /Users/me/projects/personal/site/node_modules/@builder.io/qwik/testing/index.mjs:22378:9
22376: // packages/qwik/src/testing/platform.ts
22377: import { existsSync } from "fs";
22378: import { fileURLToPath } from "url";

When I try to use context with similar code to Qwik City I get this error

QWIK ERROR Error: Code(13): Actual value for useContext() can not be found, make sure some ancestor component has set a value using useContextProvider()

If context does work, would it possible to add it to the demo code as an example?

When attempting to use the package, the server code fails with this error:

Failed to load url @qwikdev/astro/server (resolved id: @qwikdev/astro/server). Does the file exist?

When looking at the installed @qwikdev/astro directory, there is no server.ts file in the bundle.

https://gorgeous-sfogliatella-0a4f4d.netlify.app/

reproduction:

1. create a new astro app
2. add the netlify adapter
3. add @qwikdev/astro
4. add the repo to git and deploy to netlify

will see a crashed netlify function with the following error:

 Error - require() of ES Module /var/task/.netlify/functions-internal/entry.mjs not supported. Instead change the require of /var/task/.netlify/functions-internal/entry.mjs to a dynamic import() which is available in all CommonJS modules. 

We get an error from vite when trying to use the navigate function from "astro:transitions/client"

[vite]: Rollup failed to resolve import "astro:transitions/client" from "/home/jackshelton/dev/playground/qwik-astro-transitions/src/s_yca4lyuotcq.js".

This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

s_yca4lyuotcq.js is a symbol in Qwik. A lazy-loadable piece created whenever there is a $ sign used. It fails to resolve the import from vite.

Which my guess is because there is some piece of logic on the astro side that depends on a client directive being present. What would we do here for a framework that doesn't need hydration?

I guess we can check if it has a client directive and if it doesn't just pass it along?

Problem

The issue is actually very simple, I usually like to name my src dir source because I prefer it that way. Astro offers the possibility to change the source directory with its srcDir config property, and that's what i have:

export default defineConfig({

  integrations: [

    // ...
    qwikdev(),
    // ...
  ],

  srcDir: 'source',
  outDir: 'build',
})

But as soon as I try to start developing I face this error:

error   Qwik srcDir "/home/iivvaannxx/...myprojectroot.../src" not found.
Error: Qwik srcDir "/home/iivvaannxx/...myprojectroot.../src" not found.
    at Object.validateSource (file:///home/iivvaannxx/...myprojectroot.../node_modules/@builder.io/qwik/optimizer.mjs:1822:17)
    at async Context.buildStart (file:///home/iivvaannxx/...myprojectroot.../node_modules/@builder.io/qwik/optimizer.mjs:3377:7)
    at async Promise.all (index 3)
    at async hookParallel (file:///home/iivvaannxx/...myprojectroot.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:43927:9)
    at async Object.buildStart (file:///home/iivvaannxx/...myprojectroot.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44251:13)
    at async file:///home/iivvaannxx/...myprojectroot.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:65315:13
    at async httpServer.listen (file:///home/iivvaannxx/...myprojectroot.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:65332:17)
error: script "dev" exited with code 1 (SIGHUP)

Additional Information

I tried hooking a console.log to see if the foillowing code (from the integration) correctly resolves the path:

And it actually does it resolve correctly to source so I guess the error is somewhere else.

Reproduction

Minimal Repro: https://stackblitz.com/edit/github-ubg8bv

A couple of things I noticed while setting up the reproduction example, which may be worth to look at are that, from a brand new Astro empty template and following the docs installation I got a random error:

Failed to load url fs-extra (resolved id: fs-extra) in /home/projects/github-ubg8bv/node_modules/@qwikdev/astro/src/index.ts. Does the file exist?

Which I fixed by manually installing fs-extra (I actually didn't need to do this in my local project so I don't understand why it happened edit: It just happened too). And, after creating a simple Counter component (like in the docs) I received also this error:

Error when evaluating SSR module /home/projects/github-ubg8bv/source/pages/index.astro: failed to import "/source/components/counter.tsx"
|- Error: Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.
    at $ (/home/projects/github-ubg8bv/node_modules/@builder.io/qwik/core.mjs:8508:15)
    at Proxy.component$ (/home/projects/github-ubg8bv/node_modules/@builder.io/qwik/core.mjs:8650:25)
    at eval (/home/projects/github-ubg8bv/source/components/counter.tsx:7:39)
    at async instantiateModule (/home/projects/github-ubg8bv/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:56104:9)

 error   Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.

This fixed itself after reloading the dev server (I think). After those I finally received the error I mention in this issue about the srcDir.

When I have an outDir different than the default (dist) build fails with

...
dist/build/q-Buz2BylG.js                   0.06 kB │ gzip:   0.07 kB
dist/build/q-Laqs9abf.js                   0.10 kB │ gzip:   0.11 kB
dist/build/q-C-iu1w9O.js                  45.26 kB │ gzip:  18.38 kB
dist/build/q-CFzq9JpO.js                  63.51 kB │ gzip:  20.71 kB
✓ built in 759ms
ENOENT: no such file or directory, scandir '/home/user/projects/my-project/build/'
  Stack trace:

(Yes stack trace is empty!)

If I mkdir build and run build again, it works fine.
Also if I change back the outDir to dist it also works file even if dist is missing.

Side note:
Not sure if this is expected, when I build (after the mkdir build) I can still see a dist dir created, including qwik artifacts.
I suppose those are generated there before moved to the actual outDir?
If that's the case, might be a good idea to use the cacheDir (by default node_modules/.astro) so CI's can also cache this easier

Versions:

{
    "dependencies": {
        "@astrojs/check": "0.5.9",
        "@astrojs/sitemap": "3.1.1",
        "@astrojs/tailwind": "5.1.0",
        "@builder.io/qwik": "1.5.1",
        "@fontsource-variable/raleway": "5.0.18",
        "@qwikdev/astro": "0.5.10",
        "astro": "4.5.8",
        "tailwindcss": "3.4.1",
        "typescript": "5.4.3"
    },
    "devDependencies": {
        "@types/node": "20.11.30",
        "@typescript-eslint/parser": "7.3.1",
        "astro-devtool-breakpoints": "0.3.0",
        "astro-meta-tags": "0.2.2",
        "astro-page-insight": "0.5.0",
        "eslint": "8.57.0",
        "eslint-plugin-astro": "0.32.0",
        "prettier": "3.2.5",
        "prettier-plugin-astro": "0.13.0",
        "prettier-plugin-tailwindcss": "0.5.12",
        "wrangler": "3.36.0"
    }
}

Thanks for the integration!!

When using both the @qwikdev/astro integration and @astrojs/cloudflare, there appears to be an incompatibility issue somewhere that causes the following error with SSR:

✘ [ERROR] Uncaught (in promise) Error: NoMatchingRenderer: Unable to render `Counter`.

There is 1 renderer configured in your `astro.config.mjs` file, but it was not able to server-side render `Counter`.

reproduction:
https://github.com/vadym-oliinyk/astro-qwik-cloudflare

More context on the issue:
https://discord.com/channels/830184174198718474/1221919048191840428/1221919048191840428

Hey,
sorry for the classic "my app used to work and now has an error" but i'm suddenly getting this error on every page. it lists several times in the console, and after a few seconds astro shows the error page.

Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')

the error points to the following prefetch script :

 <script qwik-prefetch-bundle-graph>
      ((qc, q, b, h, u) => {
      q.push([
        "graph-url", 
        b || qc.getAttribute("q:base"),
        u || `q-bundle-graph-${h || qc.getAttribute("q:manifest-hash")}.json`
       ]);
    })(
     document.currentScript.closest('[q\\:container]'),
     window.qwikPrefetchSW||(window.qwikPrefetchSW=[]),
    )
</script>

this is cool though, i didnt know the qwik/Astro integration did prefetching.
is it possible these problems are only during dev mode? is it possible to turn off the prefetching?

I also only just noticed that the prefetcher is running in production and logging a bunch of stuff :
qwik-prefetch-service-worker.js:1 - Prefetch SW: mode: verbose
is it possible / necessary to change any of the qwikVite() setup?
i see there arent many options to pass in through qwikdev()
or should these defaults work?

I am not sure if this is actually needed for a not-so-big project like this one, but just throwing it as a proposal I would gladly take on. Does the project use any kind of formatting tool or linting? I feel we could use some consesus on the code style in case the project's code keeps growing, could be a good moment.

Personally, I am used to StandardJS, but I am open to other options. Prettier could be fine too, as it's very common.
@thejackshelton If you are okay with it I can work on it after some discussion, if needed.

Overview

With official MDX extensions in place, deploying Qwik components directly in .mdx causes a QWIK ERROR (see below for details) on the development server. Drawing and building itself is possible, but the development server log is filled with errors, which is inconvenient.

Minimum environment reproduced

https://stackblitz.com/edit/withastro-astro-wyclcm?file=src%2Fpages%2Findex.mdx

Run npm run dev.

Supplementation

• If you implement the wrapper in a .astro file, the exception will not occur.

Error log

npm run dev

16:24:08 [watch] src/pages/index.mdx
QWIK ERROR Error: Internal assert, this is likely caused by a bug in Qwik: The Qwik Component was not invoked correctly
    at createAndLogError (/home/projects/withastro-astro-wyclcm/node_modules/@builder.io/qwik/core.mjs:113:52)
    at throwErrorAndStop (/home/projects/withastro-astro-wyclcm/node_modules/@builder.io/qwik/core.mjs:59:17)
    at assertNumber (/home/projects/withastro-astro-wyclcm/node_modules/@builder.io/qwik/core.mjs:156:5)
    at Object.QwikComponent (/home/projects/withastro-astro-wyclcm/node_modules/@builder.io/qwik/core.mjs:7291:5)
    at renderJSXVNode (/home/projects/withastro-astro-wyclcm/node_modules/astro/dist/runtime/server/jsx.js:118:41)
    at renderJSX (/home/projects/withastro-astro-wyclcm/node_modules/astro/dist/runtime/server/jsx.js:57:10)
    at renderJSXVNode (/home/projects/withastro-astro-wyclcm/node_modules/astro/dist/runtime/server/jsx.js:112:22)
16:24:08 [200] / 8ms

Related?

#50

If we normally try to pass in children of a JSX component in an Astro file, it would be done like this:

inside MyReactComponent:

import React from 'react';

const MyReactComponent = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default MyReactComponent;

in index.astro

---
import MyReactComponent from './MyReactComponent.jsx';
---

<MyReactComponent>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</MyReactComponent>

In Qwik, we also use slots, rather than JSX children.

If we use Qwik's Slot component:

import { Slot } from '@builder.io/qwik' 

export const MyQwikComponent = (props) => {
  return (
    <div {...props}>
      <Slot />
    </div>
  );
};

index.astro

---
import MyQwikComponent from './MyQwikComponent.tsx';
---

<MyQwikComponent>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</MyQwikComponent>

This causes an error, and will not render anything.

user made issue:
#14

reproduction:
https://github.com/thejackshelton/astro-qwik-slot-repro

stackblitz:
https://stackblitz.com/~/github.com/thejackshelton/astro-qwik-slot-repro

Not sure if is something wrong with my code but I cannot manage to setup a context. I get an error saying that the context value cannot be found:

Minimal Demo with Stackblitz: https://stackblitz.com/edit/withastro-astro-cwqlod

Any help is much appreciated.

It seems a recent change somewhere in Astro core has caused the jsxImportSource to be overrided.

Workaround:

/** @jsxImportSource @builder.io/qwik */

Add this at the top of the file.

withastro/language-tools#731

EDIT: there's an issue with astro check withastro/language-tools#727

As mentioned above, I am trying to run Qwik with deno and encountering some issues.

Mac-Mann@Mac-Mann-MacBook-Pro deno-astro-template % npm run dev

[email protected] dev
deno run -A --unstable npm:astro dev

⚠️ The --unstable flag is deprecated and will be removed in Deno 2.0. Use granular --unstable-* flags instead.
Learn more at: https://docs.deno.com/runtime/manual/tools/unstable_flags
Cannot read properties of undefined (reading 'env')
Stack trace:
at Object.astro:config:setup (/Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/@QwikDev[email protected]/node_modules/@qwikdev/astro/src/index.ts, :68:17)
at runHookConfigSetup (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/[email protected]/node_modules/astro/dist/integrations/index.js:148:60)
at async createContainerWithAutomaticRestart (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/[email protected]/node_modules/astro/dist/core/dev/restart.js:77:28)
at async dev (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/[email protected]/node_modules/astro/dist/cli/dev/index.js:26:10)
at async cli (file:///Users/Mac-Mann/Website/deno-astro-template/node_modules/.deno/[email protected]/node_modules/astro/dist/cli/index.js:169:5)

I can still build a prod version of the template, but the dev environment complains because of the qwik plugin relying on Node heavily in its node_modules. I already have tried as well adding deno parameters to my command like --allow-env but to no avail. I am running Astro 4.5.9 and my deno adapter is updated to support Astro version 4.

hey,
this is qwik in astro alongside react too, and vercel. the most basic components are working any more,
so probably problem is with config / compiler setup

• repo is here : https://github.com/Britnell/astro-gym
• ts config is setup for react :

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

• in qwik file i use /** @jsxImportSource @builder.io/qwik */
• astro config setup for both frameworks in separate subfolders ..

integrations: [
    qwikdev({
      include: ["src/qwik/*"],
    }),
    react({
      include: ["src/react/*"],
    }),

• error is on /qwik/counter.astro - the Qwik demo of a simple counter, useSignal + $(()=>...)
• https://github.com/Britnell/astro-gym/blob/main/src/qwik/qwik.tsx
• the error on the page when run dev is about QRL [ERROR] Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.
• interestingly the error on run build is Objects are not valid as a React child (found: object with keys {type, props, immutableProps, children, flags, key}). If you meant to render a collection of children, use an array instead.
• I have upgraded qwik & astro/qwik packages but no difference ...
• any suggestions of what else to try would be very welcome

stackblitz here if that helps
https://stackblitz.com/~/github.com/Britnell/astro-gym

Hi,

I have noticed that everything is working fine if I use inline imports like the following:

import { component$, useSignal } from "@builder.io/qwik";

while I receive the "Error: Code(31)" if I use multiple lines (especially if the "import" keyword and '@builder.io/* ' are in different lines:

import { 
component$, useSignal
} from "@builder.io/qwik";

Error log:

QWIK ERROR Error: Code(31)
    at createAndLogError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:50:54)
    at logErrorAndStop (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:42:57)
    at qError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:59:12)
    at serializeQRL (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3725:15)
    at file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:42
    at mapJoin (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3428:20)
    at serializeQRLs (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:12)
    at renderNode (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:1957:60)
    at processData (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2013:24)
    at walkChildren (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2044:16) s_Nx3K86jjfOI
Error in renderToStaticMarkup function of @qwikdev/astro:  Error: Code(31)
    at createAndLogError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:50:54)
    at logErrorAndStop (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:42:57)
    at qError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:59:12)
    at serializeQRL (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3725:15)
    at file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:42
    at mapJoin (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3428:20)
    at serializeQRLs (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:12)
    at renderNode (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:1957:60)
    at processData (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2013:24)
    at walkChildren (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2044:16)
Error in check function of @qwikdev/astro:  Error: Code(31)
    at createAndLogError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:50:54)
    at logErrorAndStop (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:42:57)
    at qError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:59:12)
    at serializeQRL (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3725:15)
    at file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:42
    at mapJoin (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3428:20)
    at serializeQRLs (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:12)
    at renderNode (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:1957:60)
    at processData (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2013:24)
    at walkChildren (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2044:16)
file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:53
        throw err;
        ^

Error: Code(31)
    at createAndLogError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:50:54)
    at logErrorAndStop (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:42:57)
    at qError (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:59:12)
    at serializeQRL (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3725:15)
    at file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:42
    at mapJoin (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3428:20)
    at serializeQRLs (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:3740:12)
    at renderNode (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:1957:60)
    at processData (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2013:24)
    at walkChildren (file:///Users/fabiobiondi/Desktop/training/astro-qwik-integration-demo/dist/chunks/pages/index_957913fa.mjs:2044:16)

UPDATE

My friend @gabdisi already made a PR to fix the issue ♥️

How to reproduce:

npm create astro@latest

Where should we create your new project?
  astro-app

How would you like to start your new project?
  Empty

Install dependencies?
  Yes

Do you plan to write TypeScript?
  No

Initialize a new git repository?
  Yes

cd astro-app

npx astro add @qwikdev/astro

create src/components/counter.jsx

import { component$, useSignal } from "@builder.io/qwik";

export const Counter = component$(() => {
  const counter = useSignal(0);

  return <button onClick$={() => counter.value++}>{counter.value}</button>;
});

edit src/pages/index.astro

---
import { Counter } from "../components/counter";
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>Astro</title>
	</head>
	<body>
		<h1>Astro.js - Qwik</h1>
		/* no hydration directive! */
		<Counter />
	</body>
</html>

npx astro build

 error   Path contains invalid characters: /C:/Users/user/astro-app/dist/
  File:
    C:\Users\user\astro-app\node_modules\fs-extra\lib\mkdirs\utils.js:16:21
  Code:
    15 |     if (pathHasInvalidWinCharacters) {
    > 16 |       const error = new Error(`Path contains invalid characters: ${pth}`)
         |                     ^
      17 |       error.code = 'EINVAL'
      18 |       throw error
      19 |     }
  Stacktrace:
Error: Path contains invalid characters: /C:/Users/user/astro-app/dist/
    at checkPath (C:\Users\user\astro-app\node_modules\fs-extra\lib\mkdirs\utils.js:16:21)
    at module.exports.makeDir (C:\Users\user\astro-app\node_modules\fs-extra\lib\mkdirs\make-dir.js:12:3)
    at Object.<anonymous> (C:\Users\user\astro-app\node_modules\universalify\index.js:18:45)
    at moveArtifacts (C:/Users/user/astro-app/node_modules/@qwikdev/astro/src/index.ts:114:39)
    at astro:build:done (C:/Users/user/astro-app/node_modules/@qwikdev/astro/src/index.ts:98:17)
    at async withTakingALongTimeMsg (file:///C:/Users/user/astro-app/node_modules/astro/dist/integrations/index.js:18:18)
    at async runHookBuildDone (file:///C:/Users/user/astro-app/node_modules/astro/dist/integrations/index.js:328:7)
    at async AstroBuilder.build (file:///C:/Users/user/astro-app/node_modules/astro/dist/core/build/index.js:145:5)
    at async AstroBuilder.run (file:///C:/Users/user/astro-app/node_modules/astro/dist/core/build/index.js:165:7)
    at async build (file:///C:/Users/user/astro-app/node_modules/astro/dist/core/build/index.js:44:3)

What I've found:

The error is caused when Qwik creates a /.tmp-{serial} folder in the root with the compiled code and then tries to move it to /dist

What I've tried to find the problem:

If I comment the function checkPath at node_modules\fs-extra\lib\mkdirs\make-dir.js:12:3 to skip the path validation a get this error:

ENOENT: no such file or directory, mkdir 'C:\C:\Users\user\astro-app\dist'

But from here I get confused, What could be causing the issue?

Hey @thejackshelton here's the latest attempt, components have been moved to /components/react and components/qwik

and i still see the following error when visiting any of the React example pages:

Uncaught Error: Objects are not valid as a React child (found: object with keys {type, props, immutableProps, children, flags, key, dev}). If you meant to render a collection of children, use an array instead

Preview site is here: https://qwik-break-from-react.netlify.app/

Astro config is as follows and it doesn't seem to matter which order the integration is added.

import { defineConfig } from 'astro/config';
import qwikdev from '@qwikdev/astro';
import react from '@astrojs/react';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [
    qwikdev({
      include: ['**/qwik/*'],
    }),
    react({
      include: ['**/react/*'],
    }),
    tailwind(),
  ],
});

Hi, I'm trying to use Qwik for the search on my site. It's the only interactive part on the site and so far has been done with a normal script tag in Astro:

So I replaced the search with Qwik but when I do a production build and use it, there is a visible delay on the first search.
It seems that the component is only fully downloaded once you trigger the event listener, which leads to a bad UX.

Here's how I setup the event listener:

                <input
                    type="text"
                    class="outline-none w-full px-2 py-2 xl:py-4 rounded-r xl:rounded-r-2xl"
                    placeholder="Search"
                    bind:value={searchString}
                />

Unfortunately I haven't found out how to initialise everything on page load so that the first search is snappy as well. (Also idk why it downloads around 5 files, upon inspection it seems to be the hooks etc)

Anyway here's a link to try, just search for is on the site: https://deploy-preview-20--visionary-rugelach-7f4621.netlify.app/ and you should see that it takes quite some time to render the result, afterwards its fine.

Any help is appreciated.

The problem

Since I installed the integration, and only when I run the build command astro build I receive an error from vite telling me "Rollup failed to resolve import". This only happens on code that is imported from a Qwik component, either directly or indirectly. It fails to resolve any 'path' alias you have set from the tsconfig.json.

For example the error above is thrown because I have a Qwik component ContactForm which uses a validation schema located in a file named schema.ts. This file is the one that imports from @features/localization (indirect import) and thus it fails to build.

Example

Reproducible example: https://stackblitz.com/edit/github-ubg8bv-nq1xum?file=src%2FaliasedFolder%2Fsomevars.ts

This example is simple, it contains a simple Counter Qwik component that displays a button and a text. The text is imported from another file at aliasedFolder/somevars.ts. If you look at the tsconfig.json you'll see that the folder is aliased. The import in the Counter component uses that alias.

If you run npm run dev everything should work (at least it does in my case). But as soon as you run npm run build you'll be given the same Rollup error I am talking about.

Problem

• qwikify$ component's hydration seems working, but throw err at browser.
• A React component with client:something is working correctly, but wrapped qwikify$ isn't.

Code

  "dependencies": {
    "@astrojs/react": "^3.0.7",
    "@builder.io/qwik": "^1.3.0",
    "@builder.io/qwik-react": "^0.5.0",
    "@qwikdev/astro": "^0.3.1",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "astro": "^4.0.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },

• astro.config

import qwikdev from '@qwikdev/astro';
import react from "@astrojs/react";

export default defineConfig({
  integrations: [
    qwikdev({
      include: ['**/qwik/*']
    }),
    react({
      experimentalReactChildren: true,
      include: ['**/react/*'],
    }),
  ]
});

• react

/** @jsxImportSource react */

export default function ReactComp() {
  const [count, setCount] = useState(0)

  return (
    <div>
      {count}
      <button onClick={() => setCount((prev) => prev + 1)}>button</button>
    </div>
  )
}

• qwik

const FromReact = qwikify$(ReactComp, { eagerness: 'hover' })

export default component$(() => {
  return (
    <FromReact />
  )
}) // as <QwikContainsReactComponent />

• astro

  <FromReact client:idle /> //working
  <QwikContainsReactComponent /> //not

Tried again.

• astro.config

export default defineConfig({
  integrations: [
    qwikdev({
      include: ['**/qwik/*'],
    }),
    qwikReact({ // ++ added
      include: ['**/qwik-react/*']
    }),
    react({
      experimentalReactChildren: true,
      include: ['**/react/*'],
    }),
  ],
});

• react

/** @jsxImportSource react */
import { qwikify$ } from '@builder.io/qwik-react';
import { useState } from 'react';

function Counter() {
  console.log('React <Counter/> Render '); //works
  const [count, setCount] = useState(0);
  return (
    <button className="react" onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

export const QCounter = qwikify$(Counter, { eagerness: 'hover' }); //seem works, when hover button elem, JS hydraration implemented(i have checked in network tab)

• astro

//in astro file, innerHtml is shown&successfully logged(console.log('React <Counter/> Render ');) 
//with error below
<QCounter />
<Counter client:idle/> //ok

when i hover QCounter,

• client.js created! but,
  

error message here

After cloning the tutorial from Astro https://github.com/withastro/blog-tutorial-demo
I followed the installation instruction for setting up Qwik, I first got the following issue:

[vite] Error when evaluating SSR module /node_modules/@qwikdev/astro/src/index.ts: failed to import "typescript"

After running npm install typescript --save-dev problem was solved.

However, now there is a new issue:

Internal assert, this is likely caused by a bug in Qwik: The Qwik Component was not invoked correctly

Hello Mr @thejackshelton, not sure if it's this package or some other dependancy... but

I didn't have typescript installed in my Astro project, and it's not named as peer dependency in this package so Astro errored when i spun up the dev server.

Simple fix of course, i just installed typescript, but it might be helpful if its mentioned as part of the install scripts, e.g

# Using NPM
npx astro add @qwikdev/astro typescript
 
# Using Yarn
yarn astro add @qwikdev/astro typescript
 
# Using PNPM
pnpm astro add @qwikdev/astro typescript

For passing the props into the qwik component the listed example is:

import { component$, useStore } from "@builder.io/qwik";

export interface CounterProps {
	initialValue?: number;
	step?: number;
}
const Counter = component$((props: CounterProps) => {
	const state = useStore({ count: props.initialValue || 0 });
	return (
		<div>
			<span>{state.count}</span>
			<button onClick$={() => (state.count += props.step || 1)}>+</button>
		</div>
	);
});

export default Counter;

The example gives no error but the values of props.initalValue and props.step both are undefined.

My Workaround i found works is this one below:

import { component$, useSignal } from "@builder.io/qwik";
export interface CounterProps {
	initialValue?: number;
	step?: number;
}
const Counter = component$((props) => {
	const { step, initialValue } = props.props;
	const count = useSignal(initialValue || 0);
	return (
		<div>
			<div>
				{step},{initialValue}
			</div>
			<span>{count.value}</span>
			<button onClick$={() => (count.value += step || 1)}>+</button>
		</div>
	);
});

export default Counter;

// src/pages/index.astro
---
import Counter from '../components/Counter';
import Layout from '../layouts/Layout.astro';
---

<Layout title="Welcome to Astro.">
	<main>
		<Counter step={4} initialValue={10}/>
	</main>
</Layout>

When a directory exists in public with the same name as a page and a qwik component exists anywhere in the project, that page is not showing up in the final build.

To reproduce

• npm create astro@latest (Empty, with Typescript in Strict mode)
• npx astro add @qwikdev/astro and modify tsconfig.json according to the documentation
• Create a page (e.g., cp src/pages/index.astro src/pages/some_page.astro)
• Create a directory in public with same name (e.g., mkdir public/some_page)
• Create a qwik-component anywhere (e.g., a hello world component in src/component.tsx)
• Build (npm run build) and observe that some_page is missing from the build in dist
• The page will show up in the build again when either the directory in public is deleted or all qwik components are removed

Reason

During build, files/directories from dist are moved to a temp-directory. At this time, it seems the files from public already exists in dist but the pages have not been built yet.
Then, qwik runs its build in that temp-directory and astro builds the static pages in the dist-directory.
Qwik then moves all files/directories directly in the temp-directory back to the dist-directory.
In this case, this overwrites the generated page in the some_page-directory with the previously moved version from the public-directory.

A simple fix would be to replace fsExtra.move with fsExtra.copy, as this seems to merge the directories correctly (at the cost of having to duplicate the data).
This merging-behavior for fsExtra.move was discussed in jprichardson/node-fs-extra#668, but apparently only implemented in a separate package.

Depending on how you would want to resolve this issue, I can look into creating a pull-request if you want.

import qwikdev from '@qwikdev/astro';

// https://astro.build/config
export default defineConfig({
integrations: [
tailwind({
applyBaseStyles: false,
}),
qwikdev(),
],
});

When I build on windows 11, I get the following error: I did not create a qwik sample.

Path contains invalid characters: \D:\foldername\dist
File:
D:\foldername\node_modules\fs-extra\lib\mkdirs\utils.js:16:21
Code:
15 | if (pathHasInvalidWinCharacters) {
> 16 | const error = new Error(Path contains invalid characters: ${pth})
| ^
17 | error.code = 'EINVAL'
18 | throw error
19 | }
Stacktrace:
After commenting out qwikdev(), the build succeeds.

Each build will continue to create a folder of the form .tmp-o0bk86ikj2l.

I experimented again and it doesn't build regardless of the node.

Context

I hope I am not being annoying with the issues, this is the third I write, it's just things that I am randomly encountering myself while using it 🥲. This time I am experimenting a very weird issue which I can't provide much context on. I was working on my project, and one thing I usually do is try building from time to time to ensure that everything works as expected and to not have any surprises. The thing is that, from nowhere, the builds started failing.

I think the integration is messing something up with Vite because it fails while transforming an Astro component that does not have any syntax errors, which has been working for almost a month and hasn't been touched since. As soon as I comment out the integration from the Astro configuration file, everything builds correctly.

Things that makes the issue very confusing

• Everything works on dev
• Removing node_modules and reinstalling everything doesn't solve anything (tried multiple times)
• Rollback to my previous version (0.1.15, where everything worked fine) doesn't solve anything neither.
• Removing all pages of Astro and only working with a simple file which has literally only a <h1>Hello World!</h1>, effectively removing all "references/imports" to the affected Astro component also doesn't do anything (this may be expected behaviour, seems Astro is bundling the code inside src even when no page uses it?)
• It doesn't have any claryfing error message on why it fails, only a "Parse Error".

The component definition

It's just a simple wrapper of an <a> tag. As I said, no errors are given by the editor or ESLint and it works on dev.

---
import { type HTMLAttributes } from 'astro/types'
import { conditionalAttrs } from '@utils/conditionals'

export interface Props extends HTMLAttributes<'a'> {

  /** Whether the link should be prefetched if inside the viewport or not. */
  shouldPrefetch?: boolean

  /** Should the link be opened in a new tab? */
  targetIsBlank?: boolean

  /** When to underline the link. */
  underline?: 'always' | 'hover' | 'never'
}

const {

  shouldPrefetch = false,
  targetIsBlank = false,
  underline = 'always',

  class: clazz,
  ...rest

} = Astro.props

// The styles to apply based on the underline policy.
const underlineStyles = {

  underline: underline === 'always',

  'hover-underline': underline === 'hover',
  'no-underline': underline === 'never'
}

// Conditional attributes
const attrs = conditionalAttrs({

  rel: ['prefetch', shouldPrefetch],
  target: ['_blank', targetIsBlank]
})
---

<a

  uno-outline='focus-visible:2 focus-visible:white focus-visible:offset-10 focus-visible:~'
  class:list={[underlineStyles, clazz, 'rounded-0.25']} {...attrs} {...rest}
>
  <slot />
</a>

<style>

  .hover-underline {

    text-decoration: none;
  }

  .hover-underline::after {

    view-transition-name: none;

    content: '';
    width: 75%;

    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    bottom: 0;

    transform: scaleX(0);
    height: 2px;

    background-color: white;
    transform-origin: center right;
    transition: transform 0.25s ease-out;
  }

  .hover-underline:hover::after {

    transform: scaleX(1);
    transform-origin: center left;
  }

</style>

Build Log

At first I thought that it happened still because of the srcDir issue we had until the recent version, because I renamed back to source, however I tried to go back to src and it fails the same way. I even tried to rollback to 0.1.15 which still doesn't have the fix for the srcDir issue and yet the same error.

$ astro build
04:35:57 PM [content] No content directory found. Skipping type generation.
04:35:57 PM [@qwikdev/astro] astro:build:start
vite v4.5.0 building for production...
✓ 59 modules transformed.
✓ built in 359ms
[vite:build-import-analysis] Parse error @:51:5
file: /home/iivvaannxx/.../components/base/links/link.astro:51:4
49: >
50:   <slot />
51: </a>
        ^
52: 
53: <style>
transforming (64) node_modules/nanostores/index.js error   Parse error @:51:5
  File:
    /home/iivvaannxx/.../components/base/links/link.astro:51:4
  Code:
    49: >
    50:   <slot />
    51: </a>
            ^
    52: 
    53: <style>
  Stacktrace:
Error: Parse error @:51:5
    at parse$e (file:///home/iivvaannxx/.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:16497:355)
    at Object.transform (file:///home/iivvaannxx/.../node_modules/vite/dist/node/chunks/dep-bb8a8339.js:46653:27)

error: script "build" exited with code 1 (SIGHUP)

It must be the integration because as soon as I remove it from the integrations list the build succeeds.

I'm trying to use Custom Events instead of nanostores, as the docs recommend.

Given a component Island1 with the setup for triggering an event:

export const customEvent = (name: string) =>
  new CustomEvent<string>('awesome', {
    detail: name,
    bubbles: true,
  })

export const Island1 = component$((props) => {
  const divRef = useSignal<HTMLElement>()

  const handleClick$ = $(() => {
    const event = customEvent('Island 1')
    divRef.value?.dispatchEvent(event)
  })

  return (
    <div
      ref={divRef}
      onClick$={handleClick$}
    >
      Island1
    </div>
  )
})

And Island2 with the setup for listening:

import { $, component$, useOn, useSignal } from '@builder.io/qwik'

export const Island2 = component$((props) => {
  const divRef = useSignal<HTMLElement>()

  useOn(
    'awesome',
    $((event: CustomEvent<string>): void => {
      console.log(event.detail)
    })
  )

  return (
    <>
      <div
        ref={divRef}
      >
        Island2
      </div>
    </>
  )
})

I can see the listener was added in dev tools Event Listeners tabs. I works with useOn and also with <div onAwesome$={} />.
When I click on it, dev tools logs QWIK Container resumed for Island1.
But the console.log inside the listener never happens. Maybe because Island2 is not resumed?

I received many error like this, and they broke my build

✘ [ERROR] Could not resolve "zlib"

    dist/$server_build/chunks/pages/_slug__JQIUuMKx.mjs:20:23:
      20 │ import require$$3 from 'zlib';
         ╵                        ~~~~~~

  The package "zlib" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

Bringing Qwik into Astro is exciting, but how can I use Flowbite in the Qwik + Astro setup?

I don't think this is the right method for me to follow, or is it?

Astro's current view transitions implementation relies on hydration directives, which is the reason we have the issue with #40 for example.

https://stackblitz.com/~/github.com/thejackshelton/vt-state-repro/
https://github.com/thejackshelton/vt-state-repro

My understanding, is that Qwik's scripts aren't being re-executed because they don't hook into the lifecycle events Astro view transitions emit. This is on my radar and intend to fix soon.

Astro cannot seem to find the sync.js file in dev mode. Production does seem to work.

13:45:38 [404] /src/%3Csync%3E.js

In our example repro when trying to click the button

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://localhost:4321/src/%3Csync%3E.js

reproduction:
https://stackblitz.com/edit/withastro-astro-efhq2k?file=src%2Fcomponents%2Ftest.tsx

steps to reproduce:

• Use sync$ in your application
• Run dev mode

The Problem

1. I created a fresh astro projects and installing the qwik plugin using the provided astro add installer.
2. Then create a counter component and add it to the page.
3. Clicking it works in dev mode, but fails to GET the JS file associated with the counter in production build.

Browser

Firefox

I used a Vite plugin that allows using C language-style conditional compilation in the code.

The simplified code looks like this:

// v-ifdef SSR
import db from "./db"
// v-endif

export default function findProduct() {
  // v-ifdef SSR
  return db.findProduct()
  // v-else
  return fetch("/api/product/search").then(res => res.json())
  // v-endif
}

This allows different logic branches for SSR and CSR bundles.

During the build compilation, everything works fine. However, in dev mode, it seems that there is no separate compilation for SSR and CSR. The code received in the browser is from the SSR conditions, including the database connection code.

If I use import.meta.env.SSR, the build mode relies on tree shaking to achieve different code inclusion for SSR and CSR. In dev mode, it includes all the code and injects something like import.meta.env = {SSR: false} at the top of the CSR file to make the browser execute the CSR code path.

However, some third-party libraries can only be executed on the server and should not be bundled and sent to the browser. This is because these packages would throw errors in the browser environment.

here is a demo project: https://github.com/shjyh/astro-env-demo

I Want to generate a separate CSR bundle in dev mode with the same effect as in the build

When using Astro's blog starter, we get an error with a Qwik component inside of MDX.

https://github.com/Avaray/astro-qwik-test

This does not seem to break anything in dev mode or preview, but something to keep in mind. Will look more into this.

Summary

First and foremost, I'd like to extend my deep appreciation and respect to the team for developing this amazing integration!

I'm encountering an issue when using the ViewTransition with this integration.

The error message displayed in the development environment is:

Uncaught SyntaxError: Unexpected token '{' 

Interestingly, this issue does not occur when the project is built for production (npm run build && npm run preview).

I would greatly appreciate any insights or assistance in resolving this issue. Thank you!

Minimal Demo with Stackblitz

• https://stackblitz.com/edit/withastro-astro-kpv8vn?file=src%2Fpages%2Findex.astro

Environment

• "@astrojs/check": "^0.3.1"
• "@builder.io/qwik": "^1.2.19"
• "@qwikdev/astro": "^0.2.4"
• "astro": "^3.6.0"
• "typescript": "^5.3.2"

Hi team, hope you're well.

I'm writing a blog post for The New Stack about the new Astro integration. I was planning on showing x3 ways to build a simple sidebar navigation site: https://simple-sidebar-navigation-astro.netlify.app/

If you resize your browser you'll see the burger menu appear.

1. Vanilla Js:
   https://github.com/PaulieScanlon/simple-sidebar-navigation-astro/blob/main/src/layouts/layout.astro
   In this example i'm showing the gross vanilla Js way to manipulate the DOM.

2. React:
   https://github.com/PaulieScanlon/simple-sidebar-navigation-astro/blob/feat/add-react/src/layouts/layout.jsx
   In this example i'm showing how you could use React and a single state variable. Which works, but given this is a Layout compoent, React would be in every page and thus, kinda defeating the point of using Astro.

3. Quik:
   https://github.com/PaulieScanlon/simple-sidebar-navigation-astro/blob/feat/add-quick/src/layouts/layout.jsx
   In this example, i imagined id use signals but... i can't render the Astro child from main

E.g

// src/pages/index.astro
---
import Main from '../layouts/main.astro';
---

<Main>
  <h1>Index</h1>
  ...
</Main>

// src/layouts/main.astro
---
import Layout from './layout';
---

<html lang='en'>
  <head>
    <meta charset='utf-8' />
  </head>
  <body class='prose max-w-none bg-custom-background'>
    <Layout>
      <slot />
    </Layout>
  </body>
</html>

// src/pages/layout.jsx

import { Slot, component$ } from '@builder.io/qwik';

const Layout = component$(() => {
  return (
    <>
      <main class='lg:pl-[12.5rem]'>
        <div class='mx-auto px-4 lg:px-16 py-8 max-w-none xl:ml-0 xl:mr-[15.5rem]'>
          Content: <Slot />
        </div>
      </main>
    </>
  );
});

export default Layout;

Here's a screenshot of the error.

It's probably something i'm doing wrong, but if you do have a few mins to investigate, i'd appreciate it.

Thanks in advance!

Using SSR & Vercel it seems that the @astrojs/vercel adapter, or vercel serverless functions move the dist, and cannot get the Qwik client build.

https://vercel-astro-qwik.vercel.app/
(error when clicking on the counter)

Error:

Loading module from “https://vercel-astro-qwik-he7u.vercel.app/build/q-952dfb06.js” was blocked because of a disallowed MIME type (“”).
[vercel-astro-qwik-he7u.vercel.app](https://vercel-astro-qwik-he7u.vercel.app/)

Loading failed for the module with source “https://vercel-astro-qwik-he7u.vercel.app/build/q-952dfb06.js”. [vercel-astro-qwik-he7u.vercel.app:1:242](https://vercel-astro-qwik-he7u.vercel.app/)

Uncaught (in promise) TypeError: error loading dynamically imported module: https://vercel-astro-qwik-he7u.vercel.app/build/q-952dfb06.js

We get a CLI log from them:

08:17:31 PM [@astrojs/vercel/serverless] Bundling function ../../../../dist/entry.mjs

When running the build, we can see for a short moment the proper dist is created with the client folder before it seems to be moved and then the client folder no longer exists when the vercel adapter moves the files into their edge functions folder.

It seems that the dist file exists for a short duration, before it is moved into .vercel/output/functions/{your-path}/dist

Here is what it looks like after moved:

reproduction:

1. clone this repo:
   https://github.com/thejackshelton/vercel-astro-qwik

2. npm i and grab the latest version of @qwikdev/astro

3. run the build with npm run build

4. you should be able to see a .vercel folder, and inside is our dist folder.

Side note: if we change the outDir in astro.config.mjs, we can see that we get a root folder that includes our dist and client build.

Like #2 , the cloudflare SSR adapter cannot seem to find the correct files.

https://43db24fb.test-astro-qwik.pages.dev/

reproduction:

1. clone https://github.com/thejackshelton/test-astro-qwik

2. run npm i and npm run build

3. add the project to cloudflare and deploy it.

Should get the same issue when clicking on our counter:

GET
https://43db24fb.test-astro-qwik.pages.dev/build/q-225f5de6.js

Loading module from “https://43db24fb.test-astro-qwik.pages.dev/build/q-225f5de6.js” was blocked because of a disallowed MIME type (“”).

[43db24fb.test-astro-qwik.pages.dev](https://43db24fb.test-astro-qwik.pages.dev/)
Loading failed for the module with source “https://43db24fb.test-astro-qwik.pages.dev/build/q-225f5de6.js”. [43db24fb.test-astro-qwik.pages.dev:1:242](https://43db24fb.test-astro-qwik.pages.dev/)

Uncaught (in promise) TypeError: error loading dynamically imported module: https://43db24fb.test-astro-qwik.pages.dev/build/q-225f5de6.js

I can actually see that the file exists if we take the QRL and add client in the URL path, but if I remove that, then the node ssr preview does not work...

If this is removed I think it would work, but I'm curious on what that means for node ssr.

// TODO: Fix this and have one source of truth, instead of reaching for this dist file that qwikVite seems to create for us automatically
  let clientBuildPath = "client";

  if (distDir !== "dist") {
    clientBuildPath = "dist/client";
  }

  await moveArtifacts(
    tempDir,
    join(
      distDir,
      astroConfig?.output === "server" ? clientBuildPath : "."
    )
  );

Hi I've added some data fetching fetching from an external API and I've noticed that the entire page won't render until the data is loaded ,I think I've used the useResource$ hook properly the code is available here
no spinner at all
small demo

There is currently an issue using Qwik alongside other JSX-based framework integrations in Astro. My understanding is that the user needs to change their file structure and astro config for this to work.

The problem, is that the renderToStaticMarkup function that Astro provides, will also try to read / render other JSX components.

For example, if we add a React component to index.astro, the @qwikdev/astro integration will log out the following from server.ts

Error in renderToStaticMarkup function of @qwikdev/astro:  TypeError: Cannot read properties of null (reading 'useState')
    at exports.useState (/home/jackshelton/dev/open-source/astro/qwikdev-astro/node_modules/.pnpm/[email protected]/node_modules/react/cjs/react.production.min.js:25:394)
    at ReactCounter (file:///home/jackshelton/dev/open-source/astro/qwikdev-astro/apps/astro-demo/dist/server/chunks/pages/index_886e2bc3.mjs:4409:29)

If we have it return nothing when it is not a Qwik component like this:

    if (Component.constructor.name !== "QwikComponent") {
      // If it's not a Qwik component, return an object with an empty 'html' property
      return { html: "" };
    }

Then it will still error out, as renderFrameworkComponent (being used internally by Astro), tries to look for the React client entrypoint.

NoClientEntrypoint: `ReactCounter` component has a `client:load` directive, but no client entrypoint was provided by `@qwikdev/astro`.
    at renderFrameworkComponent (file:///home/jackshelton/dev/open-source/astro/qwikdev-astro/apps/astro-demo/dist/server/chunks/astro_dfd94c1b.mjs:1573:11)
    at async renderComponent (file:///home/jackshelton/dev/open-source/astro/qwikdev-astro/apps/astro-demo/dist/server/chunks/astro_dfd94c1b.mjs:1714:10)
    at async renderChild (file:///home/jackshelton/dev/open-source/astro/qwikdev-astro/apps/astro-demo/dist/server/chunks/astro_dfd94c1b.mjs:1108:11)

My understanding, is that we need to add an include option for consumers in the astro.config.mjs, which I then think would need to be provided to qwikVite? or a new setting in the plugin?

This is where I'm a bit lost,

https://docs.astro.build/en/guides/upgrade-to/v3/#what-should-i-do-24

I saw this in the Solid integration:

plugins: [ solid({ include, exclude, dev: isDev, ssr: true }),    {
name:
  '@astrojs/solid:config-overrides', enforce : 'post', config() {
    return {
    esbuild : {  // To support using alongside other JSX frameworks, still let
   // // esbuild compile stuff. Solid goes first anyways. include:
   // /\.(m?ts|[jt]sx)$/,       },      };     },    },   
],

And then in their vite plugin:

export interface Options {
  /**
   * A [picomatch](https://github.com/micromatch/picomatch) pattern, or array of patterns, which specifies the files
   * the plugin should operate on.
   */
  include?: FilterPattern;

Which uses this:
https://github.com/micromatch/picomatch

When adding an import from builder.io / qwik entrypoint, the MDX page will not add any content, and a warning will be present in the console:

QWIK WARN A unsupported value was passed to the JSX, skipping render. Value: {
  'astro:jsx': true,
  type: Symbol(astro:fragment),
  props: {
    children: [
      [Object], '\n',     [Object],
      '\n',     [Object], '\n',
      [Object], '\n',     [Object],
      '\n',     [Object], '\n',
      [Object], '\n',     [Object]
    ]
  },
  [Symbol(astro:renderer)]: 'astro:jsx'

reproduction:
https://stackblitz.com/~/github.com/thejackshelton/astro-qwik-mdx-repro

Click on blog, then the first post.

I'm running output: server in astro, i can't understand why this 404 message comes up in log?
luckly, there's no problems running app realated this message.

"@builder.io/qwik": "^1.3.5"
"@qwikdev/astro": "^0.4.0"
"astro": "^4.1.2",

14:40:20 [200] / 4ms
14:40:20 [200] /api/0 0ms
14:40:20 [404] /qwik-prefetch-service-worker.js

• Error at browser

Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:4321/qwik-prefetch-service-worker.js for scope http://localhost:4321/ encountered an error during installation.