search

ascorbic / get-pixels

🌈 🦕 Get the decoded pixel data from a JPG or PNG image
12 stars 3 forks source link

Module "util" has been externalized for browser compatibility. Cannot access "util.inherits" in client code. #4

Closed jamaluddinrumi closed 1 year ago

jamaluddinrumi commented 1 year ago

i use @unpic/placeholder with this code 

---
import { encode } from "blurhash";
import { getPixels } from "@unpic/pixels";
import { blurhashToCssGradientString } from "@unpic/placeholder";
import { Image } from "@unpic/astro";

export const getPlaceholder = async (url:URL) => {
  const jpgData = await getPixels(url.toString());
  const data = Uint8ClampedArray.from(jpgData.data);
  const blurhash = encode(data, jpgData.width, jpgData.height, 9, 4);
  const placeholder = blurhashToCssGradientString(blurhash);
  return placeholder
}

const photoMobileUrl = new URL("https://a.storyblok.com/f/118728/414x414/b9bdd0ccf5/tim-produksi-on-mobile.jpg")
---

<Image
  cdn="storyblok"
  src={photoMobileUrl.toString()}
  width={414}
  height={414}
  class="block bg-auto lg:hidden"
  alt={t("productionTeam")}
  loading={"eager"}
  background={await getPlaceholder(photoMobileUrl)}
/>

and i got this error log

chunk-AC2VUBZ6.js?v=8c085393:11 Module "util" has been externalized for browser compatibility. Cannot access "util.inherits" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
get @ browser-external:util:9
node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/chunkstream.js @ chunkstream.js:18
__require @ chunk-AC2VUBZ6.js?v=8c085393:11
node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/parser-async.js @ parser-async.js:5
__require @ chunk-AC2VUBZ6.js?v=8c085393:11
node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/png.js @ png.js:5
__require @ chunk-AC2VUBZ6.js?v=8c085393:11
(anonymous) @ index.js:2
chunkstream.js:18 Uncaught (in promise) TypeError: util.inherits is not a function
    at node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/chunkstream.js (chunkstream.js:18:6)
    at __require (chunk-AC2VUBZ6.js?v=8c085393:11:50)
    at node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/parser-async.js (parser-async.js:5:19)
    at __require (chunk-AC2VUBZ6.js?v=8c085393:11:50)
    at node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/png.js (png.js:5:14)
    at __require (chunk-AC2VUBZ6.js?v=8c085393:11:50)
    at index.js:2:21
node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/chunkstream.js @ chunkstream.js:18
__require @ chunk-AC2VUBZ6.js?v=8c085393:11
node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/parser-async.js @ parser-async.js:5
__require @ chunk-AC2VUBZ6.js?v=8c085393:11
node_modules/.pnpm/pngjs@7.0.0/node_modules/pngjs/lib/png.js @ png.js:5
__require @ chunk-AC2VUBZ6.js?v=8c085393:11
(anonymous) @ index.js:2
await in (anonymous) (async)
start @ (index):10039
childrenConnectedCallback @ (index):10039
await in childrenConnectedCallback (async)
connectedCallback @ (index):10039

Screen Shot 2023-05-24 at 7 51 26 PM

jamaluddinrumi commented 1 year ago

very fast response

unfortunately, after upgrade to @unpic/pixels 1.2.0, it yield another error appear on console log 

chunk-X5MHFPH7.js?v=12e76c63:19 Module "http" has been externalized for browser compatibility. Cannot access "http.IncomingMessage" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
get @ browser-external:http:9
node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/core/util.js @ util.js:5
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/client.js @ client.js:9
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
node_modules/.pnpm/undici@5.22.1/node_modules/undici/index.js @ index.js:3
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
(anonymous) @ _dnt.shims.js:1
chunk-X5MHFPH7.js?v=12e76c63:19 Module "querystring" has been externalized for browser compatibility. Cannot access "querystring.stringify" in client code. See http://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
get @ browser-external:querystring:9
node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/core/util.js @ util.js:11
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/client.js @ client.js:9
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
node_modules/.pnpm/undici@5.22.1/node_modules/undici/index.js @ index.js:3
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
(anonymous) @ _dnt.shims.js:1
util.js:13 Uncaught (in promise) ReferenceError: process is not defined
    at node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/core/util.js (util.js:13:32)
    at __require2 (chunk-X5MHFPH7.js?v=12e76c63:19:50)
    at node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/client.js (client.js:9:14)
    at __require2 (chunk-X5MHFPH7.js?v=12e76c63:19:50)
    at node_modules/.pnpm/undici@5.22.1/node_modules/undici/index.js (index.js:3:16)
    at __require2 (chunk-X5MHFPH7.js?v=12e76c63:19:50)
    at _dnt.shims.js:1:67
node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/core/util.js @ util.js:13
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
node_modules/.pnpm/undici@5.22.1/node_modules/undici/lib/client.js @ client.js:9
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
node_modules/.pnpm/undici@5.22.1/node_modules/undici/index.js @ index.js:3
__require2 @ chunk-X5MHFPH7.js?v=12e76c63:19
(anonymous) @ _dnt.shims.js:1
await in (anonymous) (async)
start @ (index):9784
childrenConnectedCallback @ (index):9784
await in childrenConnectedCallback (async)
connectedCallback @ (index):9784

Screen Shot 2023-05-25 at 5 26 46 AM

ascorbic commented 1 year ago

I'm a bit confused why this is running in the browser. From the Astro code, it looks like it should be rendered on the server. This is what we'd expect, because you shouldn't be trying to generate placeholders in the client, as that defeats the purpose. Is there anything about your site that could be causing this to run in the browser?

ascorbic commented 1 year ago

I just ran a test using the unpic astro demo, with the exact code that you shared and it worked fine. Can you share a reproduction repo please

jamaluddinrumi commented 1 year ago

I just ran a test using the unpic astro demo, with the exact code that you shared and it worked fine. Can you share a reproduction repo please

sure, can i invite you as a collaborator to my repo for this purpose? because it's a private repo

ascorbic commented 1 year ago

If possible could you do a minimal reproduction instead. I've found it's generally hard to reproeuce these sort of things on actual sites, because I won't have things like API keys etc

jamaluddinrumi commented 1 year ago

okay, i'll try to create a minimal reproduction first

and will let you know when it's ready to be investigated

jamaluddinrumi commented 1 year ago

sorry, for late response

i've just created minimal repro but i assume the error is not because of @unpic/pixels but another packages.

still trying to figure it out by myself.

you are welcome to close this issue if you wish.

ascorbic commented 1 year ago

OK, if you find out that it is related, please open a new issue

jamaluddinrumi commented 1 year ago

i've just found it

the problem is because i put the getPlaceholder() into separated file (.ts)

// utils.ts

import { encode } from "blurhash";
import { getPixels } from "@unpic/pixels";
import { blurhashToCssGradientString } from "@unpic/placeholder";

const getPlaceholder = async (url:string) => {
  const jpgData = await getPixels(url);
  const data = Uint8ClampedArray.from(jpgData.data);
  const blurhash = encode(data, jpgData.width, jpgData.height, 9, 4);
  const placeholder = blurhashToCssGradientString(blurhash);
  return placeholder
}
// somewhere .astro files

---
import { Image } from "@unpic/astro";
import { getPlaceholder } from "utils";
---

<Image
  background={await getPlaceholder(`${photoMobileUrl}/m/618x618`)}
  ... 
/>

when i put those together into one Astro files, the browser console log error is gone! 

// somewhere .astro files & it works!

---
import { encode } from "blurhash";
import { getPixels } from "@unpic/pixels";
import { blurhashToCssGradientString } from "@unpic/placeholder";

const getPlaceholder = async (url:string) => {
  const jpgData = await getPixels(url);
  const data = Uint8ClampedArray.from(jpgData.data);
  const blurhash = encode(data, jpgData.width, jpgData.height, 9, 4);
  const placeholder = blurhashToCssGradientString(blurhash);
  return placeholder
}

import { Image } from "@unpic/astro";
import { getPlaceholder } from "utils";
---

<Image
  background={await getPlaceholder("some-image-file-from-cdn.jpg")}
  ... 
/>

finally, thank's @ascorbic for this helpful library & your attentions 🙏