QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.83k stars 1.31k forks source link

React Intergration not working [🐞] #5757

Open 01582 opened 9 months ago

01582 commented 9 months ago

Which component is affected?

Qwik

Describe the bug

I'm on qwik latest version and the react intergration is not working, here is an video:

https://github.com/BuilderIO/qwik/assets/150913511/e9d5a6a6-5d50-4f8c-ab1b-07dfa37d7dda

code of src/react/index.tsx

import { component$, useSignal } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import { ReactPage } from "~/integrations/react/React";

export default component$(() => {
  const show = useSignal(false);
  const count = useSignal(0);
  const variant = useSignal<"contained" | "outlined" | "text">("contained");

  return (
    <>
      <h1>Qwik/React mother of all demos</h1>
      <ReactPage client:idle/>

    </>
  );
});

export const head: DocumentHead = {
  title: "Qwik React",
};

and the React.tsx

// FILE: src/integrations/react/framer.tsx
// ==========================================

// πŸ‘‡πŸ½ this tells Qwik that the JSX here is React
/** @jsxImportSource react */

// one function to import 
import { qwikify$ } from '@builder.io/qwik-react';

const NavAnim = () => (
  <div>Hello</div>
);

// All you need is to export:
export const ReactPage = qwikify$(NavAnim);```

Reproduction

https://github.com/01582/landingpage

Steps to reproduce

1: bun qwik add react 2: use the qwik react intergration as shown in the docs

System Info

Running on wsl, ubuntu linux:
 System:
    OS: Linux 4.4 undefined
    CPU: (4) x64        Intel(R) Core(TM) i5-4460M CPU @ 3.40GHz
    Memory: 612.23 MB / 12.92 GB
    Container: Yes
    Shell: Unknown - /bin/bash

Additional Information

No response

wmertens commented 9 months ago

I watched the video but I don't understand what part isn't working?

01582 commented 9 months ago

I watched the video but I don't understand what part isn't working?

the reactpage which I imported it's not showing I tried to debug but can't find the issue and all possibility tried might be an error on qwik latest version for react integration pages

hamatoyogi commented 9 months ago

I've just checked a fresh install with React and used your code for the page and seems to be working as expected. Did you try and look at the DOM to search for Hello?

01582 commented 9 months ago

I've just checked a fresh install with React and used your code for the page and seems to be working as expected. Did you try and look at the DOM to search for Hello?

I searched at inspect element and it's nothing on "Hello world"

wmertens commented 9 months ago

I searched at inspect element and it's nothing on "Hello world"

But your code only writes "Hello"?

01582 commented 9 months ago

I searched at inspect element and it's nothing on "Hello world"

But your code only writes "Hello"?

Hello is not showing on the inspect elemet"