fix: 🐛 Removed crypto dependency from client bundle

Uses hashCode instead of sha1 for external images ✅Closes: #332
dc7290 · Dec 8, 2022 · ca4ea71 · ca4ea71
1 parent 7569362
commit ca4ea71
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/__tests__/components/image/external-images/index.test.tsx b/__tests__/components/image/external-images/index.test.tsx
@@ -37,15 +37,15 @@ describe('External images', () => {
         externalUrl: 'https://next-export-optimize-images.vercel.app/sub-path/og.png',
         output: '/_next/static/chunks/images/sub-path/og_1920_75.webp',
         quality: 75,
-        src: '/_next/static/media/8fcb025d6e036ec05907f2367ee713067a0c406c.png',
+        src: '/_next/static/media/-803215824.png',
         width: 1920,
       },
       {
         extension: 'webp',
         externalUrl: 'https://next-export-optimize-images.vercel.app/sub-path/og.png',
         output: '/_next/static/chunks/images/sub-path/og_3840_75.webp',
         quality: 75,
-        src: '/_next/static/media/8fcb025d6e036ec05907f2367ee713067a0c406c.png',
+        src: '/_next/static/media/-803215824.png',
         width: 3840,
       },
     ])

diff --git a/src/image.tsx b/src/image.tsx
@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { createHash } from 'crypto'
-
 import Image, { ImageLoader, ImageProps } from 'next/dist/client/image'
 import React from 'react'
 
@@ -10,6 +8,16 @@ import getConfig, { ParsedImageInfo } from './utils/getConfig'
 
 const config = getConfig()
 
+function hashCode(src: string) {
+  let hash = 0
+  for (let i = 0; i < src.length; i += 1) {
+    const chr = src.charCodeAt(i)
+    hash = (hash << 5) - hash + chr
+    hash |= 0 // Convert to 32bit integer
+  }
+  return `${hash}`
+}
+
 const defaultImageParser: (src: string) => ParsedImageInfo = (src: string) => {
   const path = src.split(/\.([^.]*$)/)[0]
   const extension = (src.split(/\.([^.]*$)/)[1] || '').split('?')[0]
@@ -86,15 +94,13 @@ const exportableLoader: ImageLoader = ({ src: _src, width, quality }) => {
     const path = require('path') as typeof import('path')
 
     if (src.startsWith('http')) {
-      json.src = `/${externalOutputDir}/${createHash('sha1')
-        .update(
-          src
-            .replace(/^https?:\/\//, '')
-            .split('/')
-            .slice(1)
-            .join('/')
-        )
-        .digest('hex')}.${originalExtension}`
+      json.src = `/${externalOutputDir}/${hashCode(
+        src
+          .replace(/^https?:\/\//, '')
+          .split('/')
+          .slice(1)
+          .join('/')
+      )}.${originalExtension}`
 
       json.externalUrl = src
     }