bug: Error: Unable to resolve module @trigger.dev/core/v3

[maxckelly]

Provide environment information

"@trigger.dev/react-hooks": "^3.2.1",
React native

Describe the bug

Hi - I'm trying to use the react hooks as stated in the documentation but whenever I try to call authentication or subscribe I get the below error. Can someone please help.

Error: Unable to resolve module @trigger.dev/core/v3 from /Users/USER/other/PROJECT/node_modules/@trigger.dev/react-hooks/dist/commonjs/hooks/useApiClient.js: @trigger.dev/core/v3 could not be found within the project or in these directories:
  node_modules
  3 | Object.defineProperty(exports, "__esModule", { value: true });
  4 | exports.useApiClient = useApiClient;
> 5 | const v3_1 = require("@trigger.dev/core/v3");
    |                       ^
  6 | const contexts_js_1 = require("../contexts.js");
  7 | /**
  8 |  * Hook to create an API client instance using authentication context or provided options.
    at ModuleResolver.resolveDependency (Users/USER/other/PROJECT/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:138:15)
    at DependencyGraph.resolveDependency (Users/USER/other/PROJECT/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
    at Users/USER/other/PROJECT//node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (Users/USER/other/PROJECT/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (Users/USER/other/PROJECT/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at async Promise.all (index 1)
    at async visit (/Users/USER/other/PROJECT/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 17)
    at async visit (Users/USER/other/PROJECT/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
    at async Promise.all (index 7)

Reproduction repo

https://github.com/triggerdotdev/trigger.dev

To reproduce

Build react native application and install package as stated in docs

Additional information

No response

[Cirr0e]

Hi there! I understand you're encountering a module resolution error while trying to use @trigger.dev/react-hooks in your React Native project.

The error you're seeing suggests there's a compatibility issue between the React Native environment and the @trigger.dev packages. Looking at the underlying issue, this is happening because @trigger.dev/react-hooks is trying to import from @trigger.dev/core/v3, but this dependency isn't being resolved correctly in the React Native environment.

Here's what I suggest to resolve this:

1. First, make sure you have all the necessary dependencies installed:

npm install @trigger.dev/[email protected] @trigger.dev/[email protected]

2. Since you're using React Native, you'll need to add the core package explicitly to your dependencies in package.json:

{
  "dependencies": {
    "@trigger.dev/react-hooks": "^3.2.1",
    "@trigger.dev/core": "^3.2.1"
  }
}

3. After updating your dependencies, clear your React Native bundler cache:

# For Metro bundler
npx react-native start --reset-cache

Important considerations:

• React Native has specific module resolution rules that can sometimes conflict with packages designed primarily for web React
• Make sure all your @trigger.dev packages are on the same version to avoid compatibility issues
• You might need to configure Metro bundler to properly resolve these packages

If you're still experiencing issues after trying these steps, please let me know:

1. What version of React Native you're using
2. Your metro.config.js configuration (if you have customized it)
3. Whether you're using Expo or bare React Native

The error appears to be a module resolution issue rather than a functional one, so once we get the packages properly resolved, you should be able to use the React hooks as documented.

Let me know if you need any clarification or run into other issues!

[thecoorum]

Hey @Cirr0e! I'm also experiencing the following issue using Expo SDK 52. I installed both /react-hook and /core packages, cleared the cache with npx expo start --clear, but it was still unsuccessful.

Here is the list of installed packages for me

"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.3",
"expo": "~52.0.11",
"@trigger.dev/core": "^3.3.5",
"@trigger.dev/react-hooks": "^3.3.5",
"@trigger.dev/sdk": "^3.3.5"

As I'm using the default Expo template it doesn't have metro.config.js generated (assuming it's not customized)

[thecoorum]

@maxckelly I just understood that @Cirr0e is an automation bot for answers, so probably it won't always respond correctly. Did you resolve the issue for you by any chance?

[Cirr0e]

Hey there! I see you're having trouble with @trigger.dev packages in your React Native project. This looks like a module resolution issue with Metro bundler, which is quite common when using packages that use ESM imports in a React Native environment.

Here's how we can fix this:

1. First, create or modify your metro.config.js in your project root:

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

// Add this to handle the @trigger.dev packages
config.resolver.extraNodeModules = {
  '@trigger.dev/core': require.resolve('@trigger.dev/core'),
  '@trigger.dev/react-hooks': require.resolve('@trigger.dev/react-hooks'),
  '@trigger.dev/sdk': require.resolve('@trigger.dev/sdk'),
};

// Ensure proper handling of ESM modules
config.resolver.sourceExts = [...config.resolver.sourceExts, 'mjs', 'cjs'];

module.exports = config;

2. Clear your Metro bundler cache:

npx react-native start --reset-cache
# or for Expo
npx expo start --clear

3. If you're using Expo, you might also need to add these to your app.json or app.config.js:

{
  "expo": {
    "experiments": {
      "tsconfigPaths": true
    }
  }
}

4. Make sure your packages are properly installed in your package.json:

{
  "dependencies": {
    "@trigger.dev/core": "^3.3.5",
    "@trigger.dev/react-hooks": "^3.3.5",
    "@trigger.dev/sdk": "^3.3.5"
  }
}

This solution is based on similar module resolution issues seen in React Native projects and the fix that worked for Next.js environments (referenced in issue #930).

Let me know if you run into any issues with this setup. You might need to tweak the Metro configuration based on your specific project setup.

Also, since you're using Expo SDK 52, which is quite recent, please make sure you have the latest versions of all @trigger.dev packages, as there might be compatibility updates specifically for newer React Native versions.

[thecoorum]

@Cirr0e even with the suggested changes the bundling throws the following error

Unable to resolve "@trigger.dev/core/v3" from "node_modules/@trigger.dev/react-hooks/dist/commonjs/hooks/useApiClient.js"

and crashes the Expo Go app on project launch

[maxckelly]

Unfortunately haven't solved it yet. I've resorted to using my own backend and calling Trigger api to get results. Not ideal for now but best solution till i have more time to look at it

[Danfraga33]

Any solutions on this ?