PedroBern / react-native-collapsible-tab-view

A cross-platform Collapsible Tab View component for React Native
MIT License
827 stars 160 forks source link

Turbo repo - pnpm installation - getting `TypeError: deepEqual is not a function (it is Object)` #381

Open dhmoon91 opened 7 months ago

dhmoon91 commented 7 months ago

I just installed the library in my turbo monorepo using pnpm, and getting TypeError: deepEqual is not a function (it is Object) error when using it.

Package version: "react-native-collapsible-tab-view": "^6.2.1", "react-native-pager-view": "6.2.0", "react-native-reanimated": "~3.3.0",

Following the stack-trace, looks like issue is from use-deep-compare dependency ->

function useDeepCompareMemoize(value) {
  const ref = React.useRef([]);
  // issue here
  if (!deepEqual(value, ref.current)) {
    ref.current = value;
  }

  return ref.current;
}

Commenting above if statement out renders out the tabs. Anyone ran into similar issue before?

dhmoon91 commented 7 months ago

Looks to be issue with deep-equal package used from use-deep-compare.

I pulled out the source code of this library, and copied stuff from use-deep-compare using manual installation of deep-equal and it works perfectly;

// hooks.tsx
...
import deepEqual from "deep-equal";

/** START: Copy of use-deep-compare functions */
function checkDeps(deps, name) {
  const reactHookName = `React.${name.replace(/DeepCompare/, "")}`;

  if (!deps || deps.length === 0) {
    throw new Error(
      `${name} should not be used with no dependencies. Use ${reactHookName} instead.`
    );
  }
}

function useDeepCompareMemoize(value) {
  const ref = useRef([]);

 // ******Using separate install of `deep-equal` *****
  if (!checkEqual(value, ref.current)) {
    ref.current = value;
  }

  return ref.current;
}
function useDeepCompareMemo(factory, dependencies) {
  if (process.env.NODE_ENV !== "production") {
    checkDeps(dependencies, "useDeepCompareMemo");
  }

  return useMemo(factory, useDeepCompareMemoize(dependencies));
}
/** End: Copy of use-deep-compare functions */

... rest of hooks.tsx

Is dependency getting screwed up or something using pnpm?

mozzius commented 7 months ago

I'm also getting this - running pnpm why dequal reveals that a dependency of eslint-plugin-jsx-a11y is using dequal 2.0.3, and between versions 1 and 2 dequal changed from a default export to a named export. I think this could probably be solved using pnpm overrides but I haven't figured it out yet

mozzius commented 6 months ago

Found a solution:

  "pnpm": {
    "overrides": {
      "dequal": "1.0.0",
      "aria-query>dequal": "2.0.3",
      "axobject-query>dequal": "2.0.3"
    }
  },

Make sure to run pnpm why dequal to figure out which dependencies to override