[🐞] qwik-react errors on hydration & long initial load times running dev script

daltongray commented 1 year ago

Which component is affected?

Qwik React

Describe the bug

qwik-react app from latest
running in development mode
when pulling up pages without react component, the app loads quickly
with react elements on the page, load times after dev are considerably longer
hydration on react elements is not always consistent, often causing errors on the first interaction / signal - then working thereafter.

Reproduction

https://github.com/daltongray/qwik-react-bug-repro/tree/bug/flaky-dev

Steps to reproduce

Run npm install then npm run dev

expected behavior
- the app loads in the browser within a reasonable amount of time, or gives me an error in the console.
  
  instead
- the app takes more than 3 mintues to load.
Once the app loads in dev, navigate to /react to view the react demo that ships with qwik-react. Interact with the slider / table

expected behavior
- the slider hydrates on hover, the button onchange fires as expected
  
  instead
- hydration does not work properly on all components the first go around.
- Ie: Slider is not interactable, clicking the slider count button alerts after a delay, show table causes an error - then refreshes the page.
When the app loads, attempt to interact with the MUIFooter component

expected behavior
- the navigation items hydrate on hover
  
  instead
- hydration does not happen until after a refresh.
- Sometimes an error like this will appear TypeError: Failed to fetch dynamically imported module

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 9.59 GB / 27.86 GB
  Binaries:
    Node: 16.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.24.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (107.0.1418.62)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @builder.io/qwik: 0.15.2 => 0.15.2
    @builder.io/qwik-city: 0.0.128 => 0.0.128
    @builder.io/qwik-react: 0.2.1 => 0.2.1
    vite: 3.2.4 => 3.2.4

Additional Information

It would be nice to enable verbose console reports to track builds during that first load process. When I first encountered this bug, I figured it crashed because the load time was taking so long, and there's no information in the console about it.

manucorporat commented 1 year ago

looking at it!

staykova-sport-thieme commented 1 year ago

Hello! What I encountered following the installation instructions here https://qwik.builder.io/qwikcity/integrations/react/, as follows: npm create qwik cd to-my-app npm run qwik add react npm run dev and after that going to the page and interacting with the slider, is this error: [ERROR] No matching export in "node_modules/@mui/system/esm/index.js" for import "experimental_sx" node_modules/@mui/material/esm/styles/index.js:3:65: 3 │ getLuminance, emphasize, alpha, darken, lighten, css, keyframes, experimental_sx } from '@mui/system';

also if we fix this, there is "errors on the first interaction / signal - then working thereafter." as mentioned by @daltongray

manucorporat commented 1 year ago

We should be in a better spot now! we fixed a lot of configuration bugs around this, Please update to latest qwik!

QwikDev / qwik