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.

Sign up for GitHub

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

Jump to bottom

Issue with Qwik, Vite and Vercel deployment #69

Closed
kerbelp opened this issue Mar 6, 2023 · 13 comments · Fixed by #254
Closed

Issue with Qwik, Vite and Vercel deployment #69

kerbelp opened this issue Mar 6, 2023 · 13 comments · Fixed by #254

Comments

@kerbelp
Copy link

kerbelp commented Mar 6, 2023 •
edited

I followed Qwik integration documentation, and build worked locally but when deployed to Vercel I got the following error:
on command pnpm run build:

Error: [vite]: Rollup failed to resolve import "@unpic/core" from "/vercel/path0/src/s_w1wzaavnrf0.js".

I assume its related to vite configuration and not the core unpic-img library, but it would be great if a solution to this was documented in the readme as well.

Thanks
@kerbelp
Copy link
Author

kerbelp commented Mar 6, 2023

Update:
I added the following line to vite.config.ts:
build: { rollupOptions: { external: ['@unpic/qwik'], } }

and now I have a different error in Vercel deployment:

Error: The Edge Function "_qwik-city" is referencing unsupported modules:
 - assets/@qwik-city-plan-299b976e.js: @unpic/qwik

@sarvex
Copy link

sarvex commented May 11, 2023

I followed Qwik integration documentation, and build worked locally but when deployed to Vercel I got the following error: on command pnpm run build:

Error: [vite]: Rollup failed to resolve import "@unpic/core" from "/vercel/path0/src/s_w1wzaavnrf0.js".

I assume its related to vite configuration and not the core unpic-img library, but it would be great if a solution to this was documented in the readme as well.

Thanks

I am facing the same issue and most certainly it is comming because of the vite update vide #213

@sarvex
Copy link

sarvex commented May 12, 2023 •
edited

@ascorbic Kindly update the vite dependency to 4.3.5 as 4.3.2 has a known issue on windows

@Mo0nbase
Copy link

Mo0nbase commented Jun 16, 2023 •
edited

Any progress with this error? Facing the same issue. @ascorbic

@sarvex
Copy link

sarvex commented Jun 16, 2023

@Mo0nbase I think the problem comes from @unpic inability to handle edge computing. I am not sure anymore if the previous comment will fix it.
Till @ascorbic redesigns the library to handle edge computing, either not use the edge computing or @unpic

@ascorbic
Copy link
Owner

@sarvex It does work with edge computing, so I think the issue is something else. The demo is deployed to Netlify edge, and works fine. Can you share a repo that is a minimal reproduction of the problem and I'll see if I can track it down.

@sarvex
Copy link

sarvex commented Jun 17, 2023 •
edited

@ascorbic The best way to recreate the issue is with https://qwind.pages.dev template. I have created a fresh github repo and requested you as a collaborator. https://github.com/sarvex/qwik-unpic. The latest build is deployed on vercel - https://qwik-unpic-git-main-sarvex.vercel.app/

And here are the logs from the latest build

[17:09:16.237] Running build in Cleveland, USA (East) – cle1
[17:09:16.289] Cloning github.com/sarvex/qwik-unpic (Branch: main, Commit: 21b0b40)
[17:09:16.294] Skipping build cache, deployment was triggered without cache.
[17:09:16.747] Cloning completed: 458.207ms
[17:09:16.912] Running "vercel build"
[17:09:17.386] Vercel CLI 30.2.1
[17:09:17.932] Warning: Detected "engines": { "node": ">=18" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
[17:09:17.954] Detected `pnpm-lock.yaml` version 6 generated by pnpm 8...
[17:09:17.961] Installing dependencies...
[17:09:18.448] Lockfile is up to date, resolution step is skipped
[17:09:18.476] Progress: resolved 1, reused 0, downloaded 0, added 0
[17:09:18.549] Packages: +527
[17:09:18.549] ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
[17:09:18.826] Packages are hard linked from the content-addressable store to the virtual store.
[17:09:18.826]   Content-addressable store is at: /vercel/.local/share/pnpm/store/v3
[17:09:18.826]   Virtual store is at:             node_modules/.pnpm
[17:09:19.479] Progress: resolved 527, reused 0, downloaded 110, added 108
[17:09:20.479] Progress: resolved 527, reused 0, downloaded 270, added 269
[17:09:21.482] Progress: resolved 527, reused 0, downloaded 367, added 364
[17:09:22.482] Progress: resolved 527, reused 0, downloaded 484, added 481
[17:09:23.483] Progress: resolved 527, reused 0, downloaded 524, added 524
[17:09:24.283] .../sharp@0.32.1/node_modules/sharp install$ (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
[17:09:24.417] .../sharp@0.32.1/node_modules/sharp install: sharp: Downloading https://github.com/lovell/sharp-libvips/releases/download/v8.14.2/libvips-8.14.2-linux-x64.tar.br
[17:09:24.483] Progress: resolved 527, reused 0, downloaded 527, added 527, done
[17:09:24.826] .../sharp@0.32.1/node_modules/sharp install: sharp: Integrity check passed for linux-x64
[17:09:25.157] .../sharp@0.32.1/node_modules/sharp install: Done
[17:09:25.258] .../node_modules/@swc/core postinstall$ node postinstall.js
[17:09:25.267] .../esbuild@0.17.19/node_modules/esbuild postinstall$ node install.js
[17:09:25.317] .../node_modules/@swc/core postinstall: Done
[17:09:25.327] .../esbuild@0.17.19/node_modules/esbuild postinstall: Done
[17:09:25.442] 
[17:09:25.443] dependencies:
[17:09:25.443] + @builder.io/qwik 1.1.5
[17:09:25.443] + @builder.io/qwik-city 1.1.5
[17:09:25.443] + @fontsource-variable/inter 5.0.3
[17:09:25.443] + @unpic/qwik 0.0.19
[17:09:25.443] + gray-matter 4.0.3
[17:09:25.443] + markdown-it 13.0.1
[17:09:25.443] + node-fetch 3.3.1
[17:09:25.443] 
[17:09:25.443] devDependencies:
[17:09:25.443] + @divriots/jampack 0.13.0
[17:09:25.443] + @tailwindcss/typography 0.5.9
[17:09:25.443] + @types/eslint 8.40.2
[17:09:25.443] + @types/markdown-it 12.2.3
[17:09:25.443] + @types/node 20.3.1
[17:09:25.443] + @typescript-eslint/eslint-plugin 5.59.11
[17:09:25.443] + @typescript-eslint/parser 5.59.11
[17:09:25.444] + autoprefixer 10.4.14
[17:09:25.444] + eslint 8.43.0
[17:09:25.445] + eslint-plugin-qwik 1.1.5
[17:09:25.445] + postcss 8.4.24
[17:09:25.445] + prettier 2.8.8
[17:09:25.445] + tailwindcss 3.3.2
[17:09:25.445] + typescript 5.1.3
[17:09:25.445] + vite 4.3.9
[17:09:25.445] + vite-tsconfig-paths 4.2.0
[17:09:25.445] 
[17:09:25.445] Done in 7.4s
[17:09:25.477] Running "pnpm run build"
[17:09:25.928] 
[17:09:25.928] > qwind@0.109.0 build /vercel/path0
[17:09:25.928] > qwik build && jampack ./dist
[17:09:25.929] 
[17:09:25.990] 
[17:09:25.990]       ............
[17:09:25.990]     .::: :--------:.
[17:09:25.990]    .::::  .:-------:.
[17:09:25.990]   .:::::.   .:-------.
[17:09:25.990]   ::::::.     .:------.
[17:09:25.990]  ::::::.        :-----:
[17:09:25.990]  ::::::.       .:-----.
[17:09:25.991]   :::::::.     .-----.
[17:09:25.991]    ::::::::..   ---:.
[17:09:25.991]     .:::::::::. :-:.
[17:09:25.991]      ..::::::::::::
[17:09:25.991]              ...::::
[17:09:25.992]      
[17:09:25.992] 
[17:09:25.992] 
[17:09:25.992] pnpm run build.types
[17:09:25.992] pnpm run build.client
[17:09:25.992] pnpm run build.server
[17:09:25.992] pnpm run lint
[17:09:25.992] 
[17:09:26.459] 
[17:09:26.459] > qwind@0.109.0 build.client /vercel/path0
[17:09:26.459] > vite build
[17:09:26.459] 
[17:09:27.680] �[36mvite v4.3.9 �[32mbuilding for production...�[36m�[39m
[17:09:28.719] transforming...
[17:09:29.976] �[32m✓�[39m 109 modules transformed.
[17:09:29.976] �[32m✓ built in 2.29s�[39m
[17:09:29.976] �[31m[vite]: Rollup failed to resolve import "@unpic/core" from "/vercel/path0/src/s_w1wzaavnrf0.js".
[17:09:29.976] This is most likely unintended because it can break your application at runtime.
[17:09:29.976] If you do want to externalize this module explicitly add it to
[17:09:29.977] `build.rollupOptions.external`�[39m
[17:09:29.984] �[31merror during build:
[17:09:29.984] Error: [vite]: Rollup failed to resolve import "@unpic/core" from "/vercel/path0/src/s_w1wzaavnrf0.js".
[17:09:29.984] This is most likely unintended because it can break your application at runtime.
[17:09:29.984] If you do want to externalize this module explicitly add it to
[17:09:29.984] `build.rollupOptions.external`
[17:09:29.984]     at viteWarn (file:///vercel/path0/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.1/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46597:23)
[17:09:29.984]     at onwarn (/vercel/path0/node_modules/.pnpm/@builder.io+qwik@1.1.5_undici@5.22.1/node_modules/@builder.io/qwik/optimizer.cjs:2190:17)
[17:09:29.984]     at onRollupWarning (file:///vercel/path0/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.1/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46618:9)
[17:09:29.984]     at onwarn (file:///vercel/path0/node_modules/.pnpm/vite@4.3.9_@types+node@20.3.1/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:46368:13)
[17:09:29.984]     at file:///vercel/path0/node_modules/.pnpm/rollup@3.25.1/node_modules/rollup/dist/es/shared/node-entry.js:23639:13
[17:09:29.984]     at Object.logger [as onLog] (file:///vercel/path0/node_modules/.pnpm/rollup@3.25.1/node_modules/rollup/dist/es/shared/node-entry.js:25305:9)
[17:09:29.984]     at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/.pnpm/rollup@3.25.1/node_modules/rollup/dist/es/shared/node-entry.js:24221:26)
[17:09:29.984]     at file:///vercel/path0/node_modules/.pnpm/rollup@3.25.1/node_modules/rollup/dist/es/shared/node-entry.js:24181:26�[39m
[17:09:29.998]  ELIFECYCLE  Command failed with exit code 1.
[17:09:30.015]  ELIFECYCLE  Command failed with exit code 1.
[17:09:30.034] Error: Command "pnpm run build" exited with 1
[17:09:30.467] BUILD_UTILS_SPAWN_1: Command "pnpm run build" exited with 1

@ascorbic
Copy link
Owner

Thanks! It looks like, for soem reason pnpm isn't installing @unpic/qwik's dependencies. If you build it locally with pnpm, you'll see that @unpic/core isn't in node_modules. I am not sure why that's happening, and I'll need to look into how this can be debugged. In the meantime, a workaround is to manually install @unpic/core too. It built fine for me then.

@sarvex
Copy link

sarvex commented Jun 18, 2023

@ascorbic thanks for the detailed analysis. But I would like to draw your attention to this video

Currently, you are assuming that PNPM isn't installing @unpic/core because it can't be found in node_modules directory. But this is the expected behavior of PNPM because @unpic/core can be found in .pnpm/@unpic+core@0.0.24/node_modules` directory as a hard link as described in the FAQs

@ascorbic
Copy link
Owner

Yeah, I realise it won't be hoisted, but when I installed locally it wasn't in the nested node_modules either

@sarvex
Copy link

sarvex commented Jun 18, 2023 •
edited

@ascorbic that is interesting! For me, the hard link exists and if I hoist #unpic the build went through fine. I have updated the code for your perusal.

@ascorbic ascorbic mentioned this issue Jun 19, 2023
Merged
@kodiakhq kodiakhq bot closed this as completed in #254 Jun 19, 2023
kodiakhq bot pushed a commit that referenced this issue Jun 19, 2023
@ascorbic
fix(qwik): don't externalise @unpic/core dep (#254)
089245b 
I'm not sure why, but when installed with pnpm, rollup is unable to resolve the `@unpic/core` transitive dependency. This PR moves the package out of external deps, so that it is compiled into the bundle. Fixes #69
@Zain-ul-din
Copy link

Got this error on Vercel any idea how to fix?

<html>
<body>
<!--StartFragment-->
Deploying outputs...

- 20:11:10.699 | Error: The Edge Function "_qwik-city" is referencing unsupported modules:
- 20:11:10.700 | - @qwik-city-plan.js: firebase/app, firebase/firestore, firebase/auth

<!--EndFragment-->
</body>
</html>

@sarat1669
Copy link

Installing the dependency as a dev dependency fixes this issue in qwik.

// All dev dependencies should be bundled in the server build
noExternal: Object.keys(devDependencies),

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(qwik): don't externalise @unpic/core dep ascorbic/unpic-img
6 participants
@ascorbic @sarvex @kerbelp @sarat1669 @Mo0nbase @Zain-ul-din