search

ascorbic / unpic-img

Multi-framework responsive image component
https://unpic.pics
1.36k stars 46 forks source link

Issue with Qwik, Vite and Vercel deployment #69

Closed kerbelp closed 1 year ago

kerbelp commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Mo0nbase commented 1 year ago

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

sarvex commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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] vite v4.3.9 building for production...
[17:09:28.719] transforming...
[17:09:29.976] ✓ 109 modules transformed.
[17:09:29.976] ✓ built in 2.29s
[17:09:29.976] [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`
[17:09:29.984] error 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
[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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

sarvex commented 1 year ago

@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.

Zain-ul-din commented 6 months ago

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 commented 6 months ago

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),