Warning: TypeError: 0, _$$_REQUIRE(_dependencyMap[9], "es-toolkit").debounce is not a function (it is undefined)

[tinker-dev-monk]

hello. First of all, thank you for making such a good toolkit.

I want to use this toolkit in react-native but something is not working properly.

Is there something I'm doing wrong?

Not just debounce, but others as well.

import { debounce } from 'es-toolkit'

const [onMutation] = useMutation()

const onPress = debounce(async () => {
  const {} = await onMutation()
  ...
}, 500)

yarn add es-toolkit

Installed with the command above, and the react-native information is shown below.

System:
  OS: macOS 14.6.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 1.15 GB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.12.2
    path: /opt/homebrew/opt/node@20/bin/node
  Yarn:
    version: 3.6.4
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.5.0
    path: /opt/homebrew/opt/node@20/bin/npm
  Watchman:
    version: 2024.04.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.18034.62.2411.12169540
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.2
    wanted: 0.75.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

[raon0211]

Let us check why it's not working.

[lypanov]

Same here but in my case error looks like: ERROR TypeError: 0, _esToolkit.partial is not a function (it is undefined)

[nemorize]

facebook/metro#670

This may have affected you. They said they aim to support it without the unstable flag from 0.73, but it appears to still be unstable.

[lypanov]

Thanks @nemorize! Yes, that's the issue. I've tested locally and alas Expo right now simply doesn't work with this unstable flag enabled. Seems like the entire ecosystem needs a fair bit more work until es-toolkit is going to be an option. I'll stick with implementing the functions I need as one off's.

[nemorize]

@lypanov Or you can create a patch that modify es-toolkit's package.json to have a main or module field.
Of course, I don't think the way is a good pratice...😭

[lypanov]

No rush, I have no doubt this'll be fixed in time and I'll re-try my migration :) Thanks again for the help understanding this issue! Hopefully others than are not in the Expo ecosystem are able to make the switch.

In case it's any use to anyone looking into this, here is the documentation on enabling the required flag: https://reactnative.dev/blog/2023/06/21/package-exports-support

[omins]

I'm encountering same issue with @lypanov when using Expo (51.0.31), Metro (0.80.10), and es-toolkit (1.17.0).

Here's the workaround I used:

1. Use exact version of es-toolkit
2. Install babel-plugin-module-resolver.
3. Add babel plugin to babel.config.js file like below.

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            "es-toolkit": "./node_modules/es-toolkit/dist/index.js", // Explicitly point to the CommonJS version
          },
          extensions: [".js", ".jsx", ".ts", ".tsx"], // Include relevant extensions
        },
      ],
    ],
  };
};

Please let me know if there is a better solution