QwikDev / qwik

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

[🐞] After an syntax error, the server does not refresh the page. #5827

Closed McKpol closed 7 months ago

McKpol commented 7 months ago

Which component is affected?

Qwik Runtime

Describe the bug

It seems to be a bug in the latest version, as the frontend was working perfectly fine before.

Reproduction

https://stackblitz.com/edit/qwik-starter-fpgpxm?file=src%2Froutes%2Findex.tsx

Steps to reproduce

  1. Create the app.
  2. npm run dev
  3. Produce a syntax error (and save file).
  4. Refresh page - error popup
  5. Undo error (and save file).
  6. Refresh page - error popup qwik can't reload the page

Console

PS C:\Users\McK\Documents\Dokumenty\Projects VSC\HTML JS MONGODB\arcrun\arccore> npm create qwik@latest
      ............
    .::: :--------:.
   .::::  .:-------:.
  .:::::.   .:-------.
  ::::::.     .:------.
 ::::::.        :-----:
 ::::::.       .:-----.
  :::::::.     .-----.
   ::::::::..   ---:.
    .:::::::::. :-:.
     ..::::::::::::
             ...::::

┌  Let's create a  Qwik App  ✨ (v1.4.3)
│
◇  Where would you like to create your new project? (Use '.' or './' for current directory)
│  ./arccore
│
●  Creating new project in  C:\Users\McK\Documents\Dokumenty\Projects VSC\HTML JS MONGODB\arcrun\arccore  ... 🐇
│
◇  Select a starter
│  Empty App (Qwik City + Qwik)
│
◇  Would you like to install npm dependencies?
│  Yes
│
◇  Initialize a new git repository?
│  No
│
◇  Finishing the install. Wanna hear a joke?
│  Yes
│
◇  🙈 ────────────────────────────╮
│                                 │
│  Why do bees have sticky hair   │
│  Because they use a honeycomb.  │
│                                 │
├─────────────────────────────────╯
│
◇  App Created 🐰
│
◇  Installed npm dependencies 📋
│
◇  Result ────────────────────────────────────────────────╮
│                                                         │
│  🦄  Success!  Project created in arccore directory     │
│                                                         │
│  🤍 Integrations? Add Netlify, Cloudflare, Tailwind...  │
│     npm run qwik add                                    │
│                                                         │
│  📄 Relevant docs:                                      │
│     https://qwik.builder.io/docs/getting-started/       │
│                                                         │
│  💬 Questions? Start the conversation at:               │
│     https://qwik.builder.io/chat                        │
│     https://twitter.com/QwikDev                         │
│                                                         │
│  👀 Presentations, Podcasts and Videos:                 │
│     https://qwik.builder.io/media/                      │
│                                                         │
│  🐰 Next steps:                                         │
│     cd arccore                                          │
│     npm start                                           │
│                                                         │
│                                                         │
├─────────────────────────────────────────────────────────╯
│
└  Happy coding! 🎉

PS C:\Users\McK\Documents\Dokumenty\Projects VSC\HTML JS MONGODB\arcrun> cd arccore
PS C:\Users\McK\Documents\Dokumenty\Projects VSC\HTML JS MONGODB\arcrun\arccore> npm run dev

> dev
> vite --mode ssr

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

  VITE v5.0.12  ready in 3694 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

> [PRODUCING ERROR IN src/routes/index.tsx] <

17:37:55 [vite] page reload src/routes/index.tsx
17:37:56 [vite] Internal server error: Expected ',', got 'Can'
  Plugin: vite-plugin-qwik
  File: C:/Users/McK/Documents/Dokumenty/Projects VSC/HTML JS MONGODB/arcrun/arccore/src/routes/index.tsx:9:9    
  7  |        <h1>Hi 👋</h1>
  8  |        <p
  9  |          Can't wait to see what you build with qwik!
     |           ^
  10 |          <br />
  11 |          Happy coding.

> [REPAIRING ERROR - still the same error] <

17:37:57 [vite] page reload src/routes/index.tsx
17:37:57 [vite] Internal server error: Expected ',', got 'Can'
  Plugin: vite-plugin-qwik
  File: C:/Users/McK/Documents/Dokumenty/Projects VSC/HTML JS MONGODB/arcrun/arccore/src/routes/index.tsx:9:9    
  7  |        <h1>Hi 👋</h1>
  8  |        <p
  9  |          Can't wait to see what you build with qwik!
     |           ^
  10 |          <br />
  11 |          Happy coding.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 12th Gen Intel(R) Core(TM) i3-12100F
    Memory: 2.99 GB / 7.84 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.98)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @builder.io/qwik: ^1.4.3 => 1.4.3 
    @builder.io/qwik-city: ^1.4.3 => 1.4.3 
    undici: * => 6.6.1 
    vite: ^5.0.12 => 5.0.12

Additional Information

No response

ZGFuZHk100 commented 7 months ago

I was about to create the same issue. Really just created the app from the boilerplate and getting the same issue. I was thinking about switching to Qwik, but I guess it's not a mature framework yet for a prod environment

thejackshelton commented 7 months ago

@McKpol currently debugging this, any idea on the qwik version you had when this feature was working properly?

McKpol commented 7 months ago

@thejackshelton I dont know how to check the qwik version, but my older app in qwik work perflectly and i guess it will help: package.json

...
  "devDependencies": {
    "@builder.io/qwik": "^1.3.2",
    "@builder.io/qwik-city": "^1.3.2",
    "@tauri-apps/cli": "^1.5.9",
    "@types/eslint": "^8.44.8",
    "@types/node": "^20.10.3",
    "@typescript-eslint/eslint-plugin": "^6.13.2",
    "@typescript-eslint/parser": "^6.13.2",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.55.0",
    "eslint-plugin-qwik": "^1.3.2",
    "postcss": "^8.4.33",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.3.2",
    "undici": "^5.26.0",
    "vite": "^5.0.6",
    "vite-tsconfig-paths": "^4.2.1"
...
ZGFuZHk100 commented 7 months ago

I tried version 1.4.2 - 1.4.1 - 1.1.0, still had the same issue. I'll try to use a different machine as I'm running it on an M1. Las hope

thejackshelton commented 7 months ago

Aha! With your deps @McKpol looks like we got some working behavior. We're getting somewhere.

thejackshelton commented 7 months ago

I've narrowed down the issue being introduced in "@builder.io/qwik-city": "1.4.2",

For now, I would suggest downgrading to v1.4.1 in your package.json @ZGFuZHk100 and @McKpol, and make sure not to use semantic versioning on the versions.

    "@builder.io/qwik": "1.4.1",
    "@builder.io/qwik-city": "1.4.1",
    "eslint-plugin-qwik": "1.4.1",

There is no ^, because we do not want semantic versioning here

The cause of the problem looks to be this commit here: https://github.com/BuilderIO/qwik/commit/c87c8edb647016fea1c50354c94555833f5b7ac9

wmertens commented 7 months ago

Argh, it was my fault :( thanks to your sleuthing @thejackshelton I was able to find the error, I introduced it by preloading the root route for faster startup. Fix incoming.

brandonpittman commented 7 months ago

This has been driving me nuts the last couple of days.

thejackshelton commented 6 months ago

@brandonpittman @ZGFuZHk100 @McKpol fixed in 1.4.5