bug: TypeError: (0 , import_react.cache) is not a function

[mattquestions]

Provide environment information

System:
OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
CPU: (32) x64 AMD Ryzen 9 7950X 16-Core Processor
Memory: 84.82 GB / 93.87 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 21.2.0 - ~/.nvm/versions/node/v21.2.0/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v21.2.0/bin/yarn
npm: 10.2.3 - ~/.nvm/versions/node/v21.2.0/bin/npm
pnpm: 8.10.5 - ~/.nvm/versions/node/v21.2.0/bin/pnpm
Watchman: 2023.12.04.00 - /home/linuxbrew/.linuxbrew/bin/watchman

Describe the bug

I'm new to Trigger.dev, while trying to define the following task

`import { task } from "@trigger.dev/sdk/v3";
import { callReplicate } from '@/app/actions/replicate';
import { supabaseAdmin } from "@/lib/supabase/admin";

export const processImageTask = task({
id: "process-image-task",
run: async (payload: { jobId: string }, { ctx }) => {
// Fetch the job details from Supabase
const { data: job, error: jobError } = await supabaseAdmin
.from('jobs')
.select('*')
.eq('id', payload.jobId)
.single();

  console.log(`trigger/process-image.ts job: ${JSON.stringify(job)}`);

  if (jobError || !job) {
    throw new Error('Job not found or failed to fetch job details.');
  }

  // Update job status to 'processing'
  await supabaseAdmin
    .from('jobs')
    .update({ status: 'processing' })
    .eq('id', payload.jobId);

  // Call the Replicate API to process the image
  const { data: result, error } = await callReplicate({
    type: "image-text-extractor",
    input: {
      image: job.image_url,
    },
  });   

  console.log(`trigger/process-image.ts result: ${JSON.stringify(result)}`);

  if (error) {
    throw new Error(`Image processing failed: ${error}`);
  }

  // Return the extracted text as the output of the task
  return { result };
},
onSuccess: async (payload, output, { ctx }) => {
  // Update job status to 'complete' and save the result
  await supabaseAdmin
    .from('jobs')
    .update({
      status: 'complete',
      result: JSON.stringify(output.result),
      updated_at: new Date().toISOString(),
    })
    .eq('id', payload.jobId);
},
onFailure: async (payload, error, { ctx }) => {
  // Update job status to 'failed'
  await supabaseAdmin
    .from('jobs')
    .update({
      status: 'failed',
      updated_at: new Date().toISOString(),
    })
    .eq('id', payload.jobId);
},

});`

I receive the following error

■ Error: Could not import trigger/process-image.ts │ │ TypeError: (0 , import_react.cache) is not a function │ at file:///home/user/project/lib/supabase/admin.ts:25:32 │ at ModuleJob.run (node:internal/modules/esm/module_job:218:25) │ at ModuleLoader.import (node:internal/modules/esm/loader:329:24) │ at tryImport (file:///home/user/.pnpm-store/v3/tmp/dlx-36225/node_modules/.pnpm/[email protected]/node_modules/trigger.dev/src/indexing/registerTasks.ts:54:20) │ at registerTasks (file:///home/user/.pnpm-store/v3/tmp/dlx-36225/node_modules/.pnpm/[email protected]/node_modules/trigger.dev/src/indexing/registerTasks.ts:8:29) │ at bootstrap (file:///home/user/.pnpm-store/v3/tmp/dlx-36225/node_modules/.pnpm/[email protected]/node_modules/trigger.dev/src/entryPoints/dev-index-worker.ts:88:24) │ at file:///home/user/.pnpm-store/v3/tmp/dlx-36225/node_modules/.pnpm/[email protected]/node_modules/trigger.dev/src/entryPoints/dev-index-worker.ts:98:49

In file:///home/user/project/lib/supabase/admin.ts, I have

import {cache} from "react";

Why is this happening?

Reproduction repo

I don't know how to provide Stackblitz/CodeSandbox, but this should be(?) easy to advice on.

To reproduce

Use import {cache} from "react"; in task definition.

Additional information

No response

[ericallam]

Which version of react are you using? If you are on React 18.x, unfortunately I don't think there's anything that can be done as that cache import is only available to experimental or canary releases of React (see here). If you are using Next.js you will be on one of those releases, which is why this works. One thing you could try is adding the react-server import condition in your trigger.config.ts file:

https://trigger.dev/docs/config/config-file#conditions

[Cirr0e]

Hi there! I understand you're running into an issue with the React cache function in your Trigger.dev task. Let me help you resolve this.

The error you're seeing is because the React cache function is part of React's Server Components features, which requires specific configuration to work properly in different contexts. For your Trigger.dev task, there are two ways to resolve this:

1. If you need to use React server components features, add the following to your trigger.config.ts file:

export default {
  // ... other config
  conditions: {
    // Add react-server condition to support React Server Components
    import: ["react-server"]
  }
}

2. Alternatively, if you don't specifically need React's server components features, I recommend removing the React cache usage and implementing a different caching solution. For example:

// Instead of React's cache
let cachedClient: SupabaseClient | null = null;

export const supabaseAdmin = (() => {
  if (cachedClient) return cachedClient;
  
  cachedClient = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.SUPABASE_SERVICE_ROLE_KEY!
  );
  
  return cachedClient;
})();

This solution uses a simple module-level singleton pattern which achieves similar caching behavior without depending on React's experimental features.

The second approach is more reliable for Trigger.dev tasks since they run in a Node.js environment where React server components features aren't typically needed.

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

References:

• Similar issue resolved in Trigger.dev GitHub issue #331
• Trigger.dev documentation on configuration