fix(medusa-react): Fix production.min.js causing invalid hook usage error in CJS environments (#3144)

.changeset/tricky-starfishes-cough.md

@@ -0,0 +1,5 @@
+---
+"medusa-react": patch
+---
+
+fix(medusa-react): Fix production.min.js causing invalid hook usage error in CJS environments

packages/medusa-react/jest.config.js

@@ -11,4 +11,9 @@ module.exports = {
   },
   setupFilesAfterEnv: ["./jest.setup.js"],
   testEnvironment: "jsdom",
+  moduleNameMapper: {
+    // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
+    // Issue is fixed in newer versions of UUID, but since it's a transitive dependency, we need to force it here.
+    "^uuid$": "uuid",
+  },
 }

packages/medusa-react/package.json

@@ -2,52 +2,36 @@
   "version": "4.0.3",
   "license": "MIT",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "engines": {
     "node": ">=10"
   },
   "scripts": {
-    "start": "dts watch",
-    "build": "dts build",
-    "prepare": "dts build",
-    "test": "dts test --passWithNoTests",
-    "lint": "dts lint",
-    "size": "size-limit",
-    "analyze": "size-limit --why",
+    "build": "tsup src/index.ts",
+    "prepare": "cross-env NODE_ENV=production yarn run build",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test": "jest --passWithNoTests"
   },
   "peerDependencies": {
     "@medusajs/medusa": "^1.7.4",
     "@tanstack/react-query": ">=4.22.0",
-    "react": ">=16"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
-    }
+    "react": ">=16",
+    "react-dom": ">=16"
   },
   "name": "medusa-react",
   "author": "Zakaria S. El Asri",
-  "module": "dist/medusa-react.esm.js",
-  "size-limit": [
-    {
-      "path": "dist/medusa-react.cjs.production.min.js",
-      "limit": "10 KB"
-    },
-    {
-      "path": "dist/medusa-react.esm.js",
-      "limit": "10 KB"
-    }
-  ],
   "devDependencies": {
     "@babel/core": "^7.16.0",
     "@medusajs/medusa": "^1.7.4",
-    "@size-limit/preset-small-lib": "^6.0.4",
     "@storybook/addon-contexts": "^5.3.21",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-info": "^5.3.21",
@@ -55,30 +39,28 @@
     "@storybook/addons": "^6.3.12",
     "@storybook/react": "^6.3.12",
     "@tanstack/react-query": "^4.22.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^27.0.3",
-    "@types/lodash": "^4.14.177",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "axios": "^0.24.0",
     "babel-loader": "^8.2.3",
-    "dts-cli": "^1.5.1",
-    "husky": "^7.0.4",
+    "cross-env": "^7.0.3",
+    "jest": "^29.4.1",
+    "jest-environment-jsdom": "^29.4.1",
     "msw": "^0.35.0",
     "msw-storybook-addon": "^1.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",
     "react-json-view": "^1.21.3",
-    "size-limit": "^6.0.4",
-    "ts-jest": "^27.1.4",
-    "tslib": "^2.3.1"
+    "ts-jest": "^29.0.5",
+    "tslib": "^2.3.1",
+    "tsup": "^6.5.0"
   },
   "dependencies": {
-    "@medusajs/medusa-js": "^1.3.7",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21"
+    "@medusajs/medusa-js": "^1.3.7"
   },
   "msw": {
     "workerDirectory": "public"

packages/medusa-react/src/contexts/session-cart.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useEffect } from "react"
-import { useLocalStorage } from "../hooks/utils"
-import { RegionInfo, ProductVariant } from "../types"
 import { getVariantPrice } from "../helpers"
-import { isArray, isEmpty, isObject } from "lodash"
+import { useLocalStorage } from "../hooks/utils"
+import { ProductVariant, RegionInfo } from "../types"
+import { isArray, isEmpty, isObject } from "../utils"
 
 interface Item {
   variant: ProductVariant
@@ -72,7 +72,7 @@ const reducer = (state: SessionCartState, action: Action) => {
     }
     case ACTION_TYPES.ADD_ITEM: {
       const duplicateVariantIndex = state.items.findIndex(
-        item => item.variant.id === action.payload?.variant?.id
+        (item) => item.variant.id === action.payload?.variant?.id
       )
       if (duplicateVariantIndex !== -1) {
         state.items.splice(duplicateVariantIndex, 1)
@@ -81,7 +81,7 @@ const reducer = (state: SessionCartState, action: Action) => {
       return generateCartState(state, items)
     }
     case ACTION_TYPES.UPDATE_ITEM: {
-      const items = state.items.map(item =>
+      const items = state.items.map((item) =>
         item.variant.id === action.payload.id
           ? { ...item, ...action.payload.item }
           : item
@@ -91,7 +91,7 @@ const reducer = (state: SessionCartState, action: Action) => {
     }
     case ACTION_TYPES.REMOVE_ITEM: {
       const items = state.items.filter(
-        item => item.variant.id !== action.payload.id
+        (item) => item.variant.id !== action.payload.id
       )
       return generateCartState(state, items)
     }
@@ -122,7 +122,7 @@ export const generateCartState = (state: SessionCartState, items: Item[]) => {
 }
 
 const generateItems = (region: RegionInfo, items: Item[]) => {
-  return items.map(item => ({
+  return items.map((item) => ({
     ...item,
     total: getVariantPrice(item.variant, region),
   }))
@@ -171,7 +171,7 @@ export const SessionCartProvider = ({
   }
 
   const getItem = (id: string) => {
-    return state.items.find(item => item.variant.id === id)
+    return state.items.find((item) => item.variant.id === id)
   }
 
   const setItems = (items: Item[]) => {

packages/medusa-react/src/helpers/index.ts

@@ -1,5 +1,5 @@
-import { isEmpty } from "lodash"
-import { RegionInfo, ProductVariantInfo } from "../types"
+import { ProductVariantInfo, RegionInfo } from "../types"
+import { isEmpty } from "../utils"
 
 type FormatVariantPriceParams = {
   variant: ProductVariantInfo
@@ -65,7 +65,8 @@ export const getVariantPrice = (
   region: RegionInfo
 ) => {
   let price = variant?.prices?.find(
-    p => p.currency_code.toLowerCase() === region?.currency_code?.toLowerCase()
+    (p) =>
+      p.currency_code.toLowerCase() === region?.currency_code?.toLowerCase()
   )
 
   return price?.amount || 0

packages/medusa-react/src/utils/index.ts

@@ -0,0 +1,11 @@
+export const isObject = (input: any) => input instanceof Object
+export const isArray = (input: any) => Array.isArray(input)
+export const isEmpty = (input: any) => {
+  return (
+    input === null ||
+    input === undefined ||
+    (isObject(input) && Object.keys(input).length === 0) ||
+    (isArray(input) && (input as any[]).length === 0) ||
+    (typeof input === "string" && input.trim().length === 0)
+  )
+}

packages/medusa-react/tsup.config.ts

@@ -0,0 +1,16 @@
+import type { Options } from "tsup"
+
+const config: Options = {
+  entry: ["src/**/*.ts"],
+  dts: true,
+  clean: true,
+  minify: true,
+  bundle: true,
+  sourcemap: true,
+  format: ["cjs", "esm"],
+  target: "es2020",
+  skipNodeModulesBundle: true,
+  tsconfig: "./tsconfig.json",
+}
+
+export default config