Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(dev): vite base and qrl segment fixes #6629

Merged
merged 8 commits into from
Jul 9, 2024
Merged

fix(dev): vite base and qrl segment fixes #6629

merged 8 commits into from
Jul 9, 2024

Conversation

wmertens
Copy link
Member

@wmertens wmertens commented Jul 1, 2024

  • fixes nx monorepo path lookup in dev mode
  • fix vite prefix for css etc
  • fix qrl segment path encoding for windows in dev mode
  • only pass parent filename since path is always the same
  • simplify resolveId path handling
  • change starter to only add service worker in production
  • add base url to manifest

@wmertens wmertens requested a review from a team as a code owner July 1, 2024 21:05
Copy link

netlify bot commented Jul 1, 2024

👷 Deploy Preview for qwik-insights processing.

Name Link
🔨 Latest commit a2aead6
🔍 Latest deploy log https://app.netlify.com/sites/qwik-insights/deploys/66831a1be56a150008b3cc25

Copy link

netlify bot commented Jul 1, 2024

Deploy Preview for qwik-insights ready!

Name Link
🔨 Latest commit f086139
🔍 Latest deploy log https://app.netlify.com/sites/qwik-insights/deploys/668d065e474bcc0008e4055e
😎 Deploy Preview https://deploy-preview-6629--qwik-insights.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

cloudflare-workers-and-pages bot commented Jul 1, 2024

Deploying qwik-docs with  Cloudflare Pages  Cloudflare Pages

Latest commit: f086139
Status: ✅  Deploy successful!
Preview URL: https://56a44c4d.qwik-8nx.pages.dev
Branch Preview URL: https://fix-dev.qwik-8nx.pages.dev

View logs

Copy link

pkg-pr-new bot commented Jul 1, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

commit: f086139

@builder.io/qwik

npm i https://pkg.pr.new/@builder.io/qwik@6629

@builder.io/qwik-city

npm i https://pkg.pr.new/@builder.io/qwik-city@6629

eslint-plugin-qwik

npm i https://pkg.pr.new/eslint-plugin-qwik@6629

create-qwik

npm i https://pkg.pr.new/create-qwik@6629


templates

@frankroc2022
Copy link

frankroc2022 commented Jul 4, 2024

How long can this be taken till the pull request is accepted and we can easy use this fix? It's only a question. If it takes longer I will migrate my real project from npm to pnpm. Because I only can use the fix with pnpm or how it is possible with npm?

This fix does not solve all off my useOn... problems but a lot.

@wmertens wmertens requested a review from a team as a code owner July 4, 2024 19:40
@wmertens
Copy link
Member Author

wmertens commented Jul 4, 2024

@frankroc2022 it seems in good shape now, I'd just like some more confirmations that it works for everyone

@gioboa
Copy link
Member

gioboa commented Jul 4, 2024

@frankroc2022 in meantime you can use the continuous build created from this PR. We structured a multi steps approval inside of the core team to reduce regressions like the one we had with v1.6.0.
Thanks for your patience.

@El-Potato-Slayer
Copy link

El-Potato-Slayer commented Jul 5, 2024

@frankroc2022 it seems in good shape now, I'd just like some more confirmations that it works for everyone

@wmertens I've used the continuous build, but I get this error:
image

For reference, I've added a clickable div:

<div onClick$={() => console.log('1')}>click me</div>

@nelsonprsousa
Copy link
Contributor

Just tried this version.

Got the following error:
Failed to fetch dynamically imported module: http://localhost:5173/%40fsC%3A%5Csrc%5Cgithub%5Cmilkyway%5Cweb%5Cnode_modules%5Cqwik-speak%5Clib/useqwikspeak_resumecontext_6bh92hvek8o.js?_qrl_parent=use-qwik-speak.qwik.mjs

Here are some logs with qwikVite({ debug: true }):

Details
Qwik Speak Resolved locale: pt
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/pt/app.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/pt/home.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/pt/listing.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/pt/product.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/pt/runtime.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/pt/app.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/pt/home.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/pt/product.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/pt/listing.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/pt/runtime.json
[QWIK PLUGIN: 804] resolveId(824) Start /@fs/C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs { from:
 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(824) Not resolved /C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs C:/src/github/milkyway/web/index.html
[QWIK PLUGIN: 804] resolveId(825) Start /@fs/C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs { from:
 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(825) Not resolved /C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs C:/src/github/milkyway/web/index.html
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs
[QWIK PLUGIN: 804] resolveId(826) Start /@fs/C:/src/github/milkyway/web/node_modules/vite/dist/client/env.mjs {
  from: 'C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs',
  for: 'client'
}
[QWIK PLUGIN: 804] resolveId(826) Not resolved /@fs/C:/src/github/milkyway/web/node_modules/vite/dist/client/env.mjs C:/src/github/milkyway/web/node_modules/vite/dist/client/client.mjs
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/node_modules/vite/dist/client/env.mjs
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/node_modules/vite/dist/client/env.mjs
[QWIK PLUGIN: 804] resolveId(827) Start /%40fsC%3A\src\github\milkyway\web\src/root_component_useondocument_p6osfoenwte.js?_qrl_parent=root.tsx { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(827) Resolved C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/src/root_component_useondocument_p6osfoenwte.js from transformedOutputs
[QWIK PLUGIN: 804] resolveId(828) Start /%40fsC%3A\src\github\milkyway\web\src/root_component_useondocument_p6osfoenwte.js?_qrl_parent=root.tsx { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(828) Resolved C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/src/root_component_useondocument_p6osfoenwte.js from transformedOutputs
[QWIK PLUGIN: 804] load() transforming QRL parent C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/src/root.tsx
[QWIK PLUGIN: 804] resolveId(829) Start C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/src/root.tsx { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(829) falling back to default resolver
[QWIK PLUGIN: 804] resolveId(830) Start C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/src/root.tsx { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(830) falling back to default resolver
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/src/root.tsx
[QWIK PLUGIN: 804] resolveId(831) Start /%40fsC%3A\src\github\milkyway\web\node_modules\qwik-speak\lib/useqwikspeak_resumecontext_6bh92hvek8o.js?_qrl_parent=use-qwik-speak.qwik.mjs { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(831) Resolved C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/node_modules/qwik-speak/lib/useqwikspeak_resumecontext_6bh92hvek8o.js from transformedOutputs
[QWIK PLUGIN: 804] resolveId(832) Start /%40fsC%3A\src\github\milkyway\web\node_modules\qwik-speak\lib/useqwikspeak_resumecontext_6bh92hvek8o.js?_qrl_parent=use-qwik-speak.qwik.mjs { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(832) Resolved C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/node_modules/qwik-speak/lib/useqwikspeak_resumecontext_6bh92hvek8o.js from transformedOutputs
[QWIK PLUGIN: 804] load() transforming QRL parent C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/node_modules/qwik-speak/lib/use-qwik-speak.qwik.mjs
[QWIK PLUGIN: 804] resolveId(833) Start C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/node_modules/qwik-speak/lib/use-qwik-speak.qwik.mjs { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(833) falling back to default resolver
[QWIK PLUGIN: 804] resolveId(834) Start C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/node_modules/qwik-speak/lib/use-qwik-speak.qwik.mjs { from: 'C:\\src\\github\\milkyway\\web\\index.html', for: 'client' }
[QWIK PLUGIN: 804] resolveId(834) falling back to default resolver
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/@fsC:/src/github/milkyway/web/node_modules/qwik-speak/lib/use-qwik-speak.qwik.mjs
Qwik Speak warn Locale not resolved. Fallback to default locale: en
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/en/app.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/en/home.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/en/listing.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/en/product.json
[QWIK PLUGIN: 804] load() Not found C:/src/github/milkyway/web/i18n/en/runtime.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/en/product.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/en/listing.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/en/app.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/en/home.json
[QWIK PLUGIN: 804] transform() Not transforming C:/src/github/milkyway/web/i18n/en/runtime.json
15:02:30 [vite] Internal server error: Missing Qwik City Env Data for help visit https://github.com/QwikDev/qwik/issues/6237
      at AsyncFunction.QwikCityProvider_component_TxCFOy819ag [as resolved] (C:\src\github\milkyway\web\node_modules\@builder.io\qwik-city\index.qwik.mjs:659:11)
      at AsyncFunction.invokeApply (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:3665:22)
      at AsyncFunction.invoke (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:3658:22)
      at C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:7297:21
      at maybeThen (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:384:54)
      at C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:7289:25
      at C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:1043:25
      at safeCall (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:373:21)
      at executeComponent (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:1043:10)
      at renderSSRComponent (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:1405:20)
Qwik Speak warn Locale not resolved. Fallback to default locale: en
15:02:30 [vite] Internal server error: Missing Qwik City Env Data for help visit https://github.com/QwikDev/qwik/issues/6237
      at AsyncFunction.QwikCityProvider_component_TxCFOy819ag [as resolved] (C:\src\github\milkyway\web\node_modules\@builder.io\qwik-city\index.qwik.mjs:659:11)
      at AsyncFunction.invokeApply (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:3665:22)
      at AsyncFunction.invoke (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:3658:22)
      at C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:7297:21
      at maybeThen (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:384:54)
      at C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:7289:25
      at C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:1043:25
      at safeCall (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:373:21)
      at executeComponent (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:1043:10)
      at renderSSRComponent (C:\src\github\milkyway\web\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:1405:20) (x2)

@shairez
Copy link
Contributor

shairez commented Jul 6, 2024

@wmertens just tested it and it seems like it's fixing the constant error, but when I change something and HMR it goes straight into the following error:
image

And it goes away when I manually refrech...

If it helps, it seems like it's failing to load the segment of an event handler QRL of the following code:

      window:onScroll$={() => {
        windowScrolled.value = window.scrollY > 0;
      }}

@wmertens
Copy link
Member Author

wmertens commented Jul 7, 2024

@nelsonprsousa thank you, looks like it's not handling absolute paths in windows correctly. I'll try to fix.

@shairez is this with qwik-ui?

wmertens added 2 commits July 8, 2024 13:21

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
- fixes nx monorepo path lookup in dev mode
- fix vite prefix for css etc
- fix qrl segment path encoding for windows in dev mode
- only pass parent filename since path is always the same
- simplify resolveId path handling
- change starter to only add service worker in production
- add base url to manifest
@frankroc2022
Copy link

Is it possible to use @wmertens fix commit with npm? Or only with pnpm?

@wmertens
Copy link
Member Author

wmertens commented Jul 8, 2024

@frankroc2022 the instructions literally use npm :-)

npm i https://pkg.pr.new/@builder.io/qwik@6629

@frankroc2022
Copy link

frankroc2022 commented Jul 8, 2024

Thx. I did it wrong.
It fixes all my vite hmr dev problems. Nice!

But what triggered these problems qwik or browser changes? I had these problems also with qwik v.1.5.7 and many other versions I tested.

@wmertens
Copy link
Member Author

wmertens commented Jul 8, 2024

@nelsonprsousa I think it's fixed for windows now, can you try?

@wmertens
Copy link
Member Author

wmertens commented Jul 8, 2024

actually, http://localhost:5173/%40fsC is wrong, it should say have the @ like http://localhost:5173/@fsC, that's a recent commit, but even then it should say http://localhost:5173/@fs/C, so it's still wrong.

@nelsonprsousa
Copy link
Contributor

nelsonprsousa commented Jul 8, 2024

actually, http://localhost:5173/%40fsC is wrong, it should say have the @ like http://localhost:5173/@fsC, that's a recent commit, but even then it should say http://localhost:5173/@fs/C, so it's still wrong.

Just deleted node_modules folder.

Got:

Failed to fetch dynamically imported module: http://localhost:5173/@fsC%3A%5Csrc%5Cgithub%5Cmilkyway%5Cweb%5Cnode_modules%5Cqwik-speak%5Clib/useqwikspeak_resumecontext_6bh92hvek8o.js?_qrl_parent=use-qwik-speak.qwik.mjs

Looks like we are getting closer.

@frankroc2022
Copy link

Today 2024-07-08 I run npm i https://pkg.pr.new/@builder.io/qwik@6629. Just I run npm list, it showed:
@builder.io/qwik@1.6.0-dev20240704222606

Then I changed in package.json
"@builder.io/qwik": "https://pkg.pr.new/@builder.io/qwik@6629",
to
"@builder.io/qwik": "https://pkg.pr.new/@builder.io/qwik@6629#dc466d6", (latest commit so far)

Now npm list shows:
@builder.io/qwik@1.6.0-dev20240708174604

I rechecked it. With both commits after run npm run dev I get the error:
"error loading dynamically imported module"
but If I then change my code and hmr refrehes page the error is gone and I can change my code how often I want.
To be clear I only have the problem once after enter npm run dev.

I get this error for [...catchall] and without [...catchall].

@wmertens
Copy link
Member Author

wmertens commented Jul 8, 2024

@frankroc2022

"error loading dynamically imported module"
look in your browser console for errors like "outdated optimized dep", and maybe add those modules to optimizeDeps.exclude

@frankroc2022
Copy link

frankroc2022 commented Jul 8, 2024

"error loading dynamically imported module: http://localhost:5173/src/components/ts/global_component_useondocument_1nxsaijurq4.js?_qrl_parent=global.tsx"

console:
http://localhost:5173/src/components/ts/global_component_useondocument_1nxsaijurq4.js?_qrl_parent=global.tsx
504 Outdated Optimize Dep

But how I can add my custom component to:

optimizeDeps: {
      // Put problematic deps that break bundling here, mostly those with binaries.
      // For example ['better-sqlite3'] if you use that in server functions.
      exclude: [],
    }

?

Info: Firefox, Linux in Oracle VirtualBox for Windows. All up-to-date.

@shairez
Copy link
Contributor

shairez commented Jul 8, 2024

FYI -

Whenever there's a new commit being pushed to a PR, the commit hash here is being updated

That means that you can install the latest commit by replacing the number suffix (6629) with the commit hash like this:

https://pkg.pr.new/@builder.io/qwik@dc466d6

@wmertens wmertens force-pushed the fix-dev branch 3 times, most recently from 2788974 to ed49e88 Compare July 9, 2024 09:16
thejackshelton and others added 6 commits July 9, 2024 11:43
without this, the react-dom server is loaded with `require` statements in dev mode
This is a temporary fix, the real fix is to remove the full build during buildStart, and then only rely on `.qwik` in the filename. This avoids overbuilding and allows other vite plugins to transform the code.
This way the generated imports by vite and the generated qrl segments are in the same path in devtools
@wmertens
Copy link
Member Author

wmertens commented Jul 9, 2024

@nelsonprsousa can you test the latest update?

@frankroc2022 can you look into global.tsx, are you importing anything there?

@nelsonprsousa
Copy link
Contributor

@nelsonprsousa can you test the latest update?

@frankroc2022 can you look into global.tsx, are you importing anything there?

Just checked the new version.

Looks like I can no longer import { qwikCity } from '@builder.io/qwik-city/vite'. Rings any bell?

image

✘ [ERROR] Missing "./vite" specifier in "@builder.io/qwik" package [plugin externalize-deps]

    node_modules/vite/node_modules/esbuild/lib/main.js:1225:27:
      1225 │         let result = await callback({
           ╵                            ^

    at e (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46568:25)
    at n (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46568:627)
    at o (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46568:1297)
    at resolveExportsOrImports (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:47189:18)
    at resolveDeepImport (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:47212:25)
    at tryNodeResolve (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:46977:16)
    at resolveByViteResolver (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:66878:20)
    at file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:66911:28
    at requestCallbacks.on-resolve (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:1225:28)
    at handleRequest (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:647:17)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

    at setup (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:66899:18)
    at handlePlugins (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:1150:21)
    at buildOrContextImpl (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:873:5)
    at Object.buildOrContext (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:699:5)
    at C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:2023:15
    at new Promise (<anonymous>)
    at Object.build (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:2022:25)
    at build (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:1873:51)
    at bundleConfigFile (file:///C:/src/github/milkyway/web/node_modules/vite/dist/node/chunks/dep-CzJTQ5q7.js:66854:24)

  The plugin "externalize-deps" was triggered by this import

    vite.config.ts:5:25:
      5 │ import { qwikCity } from '@builder.io/qwik-city/vite';~~~~~~~~~~~~~~~~~~~~~~~~~~~~

failed to load config from C:\src\github\milkyway\web\vite.config.ts
error when starting dev server:
Error: Build failed with 1 error:
node_modules/vite/node_modules/esbuild/lib/main.js:1225:27: ERROR: [plugin: externalize-deps] Missing "./vite" specifier in "@builder.io/qwik" package
    at failureErrorWithLog (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:1472:15)
    at C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:945:25
    at runOnEndCallbacks (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:1315:45)
    at buildResponseToResult (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:943:7)
    at C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:970:16
    at responseCallbacks.<computed> (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:622:9)
    at handleIncomingPacket (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:677:12)
    at Socket.readFromStdout (C:\src\github\milkyway\web\node_modules\vite\node_modules\esbuild\lib\main.js:600:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:559:12)

@wmertens
Copy link
Member Author

wmertens commented Jul 9, 2024

@nelsonprsousa that's utterly bizarre. Can you check the package.json, and/or recreate node_modules to be sure?
The build artifact looks correct to me...

@jessezhang91
Copy link
Contributor

I've also been having this problem non-stop the last few days but updated my package.json to use the latest commit from this PR:

    "@builder.io/qwik": "https://pkg.pr.new/@builder.io/qwik@f086139",
    "@builder.io/qwik-city": "https://pkg.pr.new/@builder.io/qwik-city@f086139",

seems to have fully resolved it! Thanks a bunch!

re: @builder.io/qwik-city/vite, I had an issue with that when I only had the qwik package locked to the commit. Once I added qwik-city as well, that went away.

@nelsonprsousa
Copy link
Contributor

yarn cache killed me again. Sorry @wmertens, it is working now as expected 🚀
Thank you!

@wmertens wmertens merged commit 9adc593 into main Jul 9, 2024
29 checks passed
@wmertens wmertens deleted the fix-dev branch July 9, 2024 15:36
@frankroc2022
Copy link

frankroc2022 commented Jul 10, 2024

@nelsonprsousa can you test the latest update?

@frankroc2022 can you look into global.tsx, are you importing anything there?

I have still the same problem even with 1.7.0.

global.tsx

import { $, component$, Resource, useContext, useOnDocument, useResource$, useStore, useStylesScoped$ } from '@builder.io/qwik';
import { useLocation } from '@builder.io/qwik-city';
import styles from '../navigation/navigation-overlay.css?inline';
import { Image } from "@unpic/qwik";
import { GlobalContext } from '~/routes/layout';

export default component$(() => {
  useStylesScoped$(styles);

  useOnDocument(
    'DOMContentLoaded',
    $(() => {
      console.log('global - document - DOMContentLoaded');
    })
  )
...

Error in Firefox 127.0.2 (64-bit) Linux in Oracle VM VirtualBox for Windows 11:
http://localhost:5173/src/components/ts/global_component_useondocument_1nxsaijurq4.js?_qrl_parent=global.tsx
504 Outdated Optimize Dep

The error comes only after npm run dev, after refresh page the error is gone.

The error only exist for useOnDocument with DOMContentLoaded but not for useOnDocument scroll.
The error only exist for useOnWindow with load but not for useOnWindow resize.

Here my package.json:

{
  "name": "my-qwik-basic-starter",
  "description": "Demo App with Routing built-in (recommended)",
  "engines": {
    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
  },
  "engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
  "private": true,
  "trustedDependencies": [
    "sharp"
  ],
  "trustedDependencies-annotation": "Needed for bun to allow running install scripts",
  "type": "module",
  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.server": "vite build -c adapters/netlify-edge/vite.config.ts",
    "build.types": "tsc --incremental --noEmit",
    "deploy": "netlify deploy --build",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
    "preview": "qwik build preview && vite preview --open",
    "start": "vite --open --mode ssr",
    "qwik": "qwik"
  },
  "devDependencies": {
    "@builder.io/qwik": "^1.7.0",
    "@builder.io/qwik-city": "^1.7.0",
    "@netlify/edge-functions": "^2.9.0",
    "@types/eslint": "^8.56.10",
    "@types/node": "^20.14.10",
    "@typescript-eslint/eslint-plugin": "^7.16.0",
    "@typescript-eslint/parser": "^7.16.0",
    "@unpic/qwik": "^0.0.46",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-qwik": "^1.7.0",
    "netlify-cli": "^17.33.0",
    "postcss": "^8.4.39",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "tailwindcss": "3.4.4",
    "typescript": "5.5.3",
    "undici": "*",
    "vite": "^5.3.3",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.24.7",
    "@netlify/functions": "^2.8.1",
    "intl-segmenter-polyfill": "^0.4.4"
  }
}

I also use nearly every time:
rm -rf node_modules/.cache node_modules/.vite

It doesn't matter if I disable cache or not in developer console under network. What is better disable cache or not? I also tried with closed developer console.

Btw. I love qwik since I use it.

Edit:
Fresh 1.7.0 install (npm create qwik@latest) only added to root.tsx:

useOnDocument(
    'DOMContentLoaded',
    $(() => {
      console.log('global - document - DOMContentLoaded');
    })
  )

import in root.tsx is now:
import { $, component$, useOnDocument } from "@builder.io/qwik";

And I get the same error.

Interesting if I have Chrome next to Firefox open the error is only shown in Chrome not in Firefox anymore. If I close the Chrome Tab and restart npm run dev it is again in Firefox shown. So the error exists really only on first load.

@frankroc2022
Copy link

Thx. I did it wrong. It fixes all my vite hmr dev problems. Nice!

But what triggered these problems qwik or browser changes? I had these problems also with qwik v.1.5.7 and many other versions I tested.

This was my mistake. I never downgraded to 1.5.7 or older because of my mistake in package.json, I had:
^1.5.7
but it had to be ~1.5.7. Sry for that. For me 1.5.7 was the last working version.

Error since then:
"error loading dynamically imported module"

In 1.6.0 when site auto refreshes.

In 1.7.0 only when site is loaded for the first time.

@frankroc2022
Copy link

1.7.1 solved all my problems, thx!

@njoguamos
Copy link

1.7.1 works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

9 participants