Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
dhmoon91 opened this issue Nov 15, 2023 · 3 comments · Fixed by sandiiarov/use-deep-compare#251
Labels
question Further information is requested

Comments

@dhmoon91
Copy link

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 dhmoon91 added the question Further information is requested label Nov 15, 2023
@dhmoon91
Copy link
Author

dhmoon91 commented Nov 15, 2023

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
Copy link

mozzius commented Nov 28, 2023

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
Copy link

mozzius commented Dec 5, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants