fix: Buffer import breaks @trigger.dev/react (#714)

Author: ericallam

.changeset/dull-masks-smash.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/core-backend": patch
+"@trigger.dev/sdk": patch
+"@trigger.dev/core": patch
+---
+
+Creates a new package @trigger.dev/core-backend that includes code shared between @trigger.dev/sdk and the Trigger.dev server

apps/webapp/app/services/runs/performRunExecutionV2.server.ts

@@ -1,9 +1,9 @@
 import {
-  API_VERSIONS,
-  BloomFilter,
+  ApiEventLog,
   ConnectionAuth,
   EndpointHeadersSchema,
   RunJobAutoYieldWithCompletedTaskExecutionError,
+  RunJobBody,
   RunJobError,
   RunJobInvalidPayloadError,
   RunJobResumeWithTask,
@@ -14,27 +14,25 @@ import {
   RunSourceContextSchema,
   supportsFeature,
 } from "@trigger.dev/core";
+import { BloomFilter } from "@trigger.dev/core-backend";
 import { RuntimeEnvironmentType, type Task } from "@trigger.dev/database";
 import { generateErrorMessage } from "zod-error";
 import { eventRecordToApiJson } from "~/api.server";
+import {
+  MAX_RUN_CHUNK_EXECUTION_LIMIT,
+  MAX_RUN_YIELDED_EXECUTIONS,
+  RUN_CHUNK_EXECUTION_BUFFER,
+} from "~/consts";
 import { $transaction, PrismaClient, PrismaClientOrTransaction, prisma } from "~/db.server";
+import { detectResponseIsTimeout } from "~/models/endpoint.server";
 import { enqueueRunExecutionV2 } from "~/models/jobRunExecution.server";
 import { resolveRunConnections } from "~/models/runConnection.server";
+import { prepareTasksForCaching, prepareTasksForCachingLegacy } from "~/models/task.server";
+import { CompleteRunTaskService } from "~/routes/api.v1.runs.$runId.tasks.$id.complete";
 import { formatError } from "~/utils/formatErrors.server";
 import { safeJsonZodParse } from "~/utils/json";
 import { EndpointApi } from "../endpointApi.server";
 import { logger } from "../logger.server";
-import { prepareTasksForCaching, prepareTasksForCachingLegacy } from "~/models/task.server";
-import {
-  MAX_RUN_CHUNK_EXECUTION_LIMIT,
-  MAX_RUN_YIELDED_EXECUTIONS,
-  RESPONSE_TIMEOUT_STATUS_CODES,
-  RUN_CHUNK_EXECUTION_BUFFER,
-} from "~/consts";
-import { ApiEventLog } from "@trigger.dev/core";
-import { RunJobBody } from "@trigger.dev/core";
-import { CompleteRunTaskService } from "~/routes/api.v1.runs.$runId.tasks.$id.complete";
-import { detectResponseIsTimeout } from "~/models/endpoint.server";
 import { forceYieldCoordinator } from "./forceYieldCoordinator.server";
 
 type FoundRun = NonNullable<Awaited<ReturnType<typeof findRun>>>;

apps/webapp/package.json

@@ -63,6 +63,7 @@
     "@team-plain/typescript-sdk": "^2.2.0",
     "@trigger.dev/companyicons": "^1.5.14",
     "@trigger.dev/core": "workspace:*",
+    "@trigger.dev/core-backend": "workspace:*",
     "@trigger.dev/database": "workspace:*",
     "@trigger.dev/sdk": "workspace:*",
     "@types/pg": "8.6.6",

apps/webapp/remix.config.js

@@ -12,13 +12,15 @@ module.exports = {
     "marked",
     "axios",
     "@trigger.dev/core",
+    "@trigger.dev/core-backend",
     "@trigger.dev/sdk",
     "emails",
     "highlight.run",
   ],
   watchPaths: async () => {
     return [
       "../../packages/core/src/**/*",
+      "../../packages/core-backend/src/**/*",
       "../../packages/trigger-sdk/src/**/*",
       "../../packages/emails/src/**/*",
     ];

apps/webapp/tsconfig.json

@@ -23,6 +23,8 @@
       "@trigger.dev/sdk/*": ["../../packages/trigger-sdk/src/*"],
       "@trigger.dev/core": ["../../packages/core/src/index"],
       "@trigger.dev/core/*": ["../../packages/core/src/*"],
+      "@trigger.dev/core-backend": ["../../packages/core-backend/src/index"],
+      "@trigger.dev/core-backend/*": ["../../packages/core-backend/src/*"],
       "@trigger.dev/database": ["../../packages/database/src/index"],
       "@trigger.dev/database/*": ["../../packages/database/src/*"],
       "emails": ["../../packages/emails/src/index"],

docs/_snippets/remix/troubleshooting.mdx

@@ -0,0 +1,46 @@
+## Troubleshooting
+
+### `'TriggerProvider' not found`
+
+When running the Remix app, you may see an error like this:
+
+```
+import { TriggerProvider } from "@trigger.dev/react";
+         ^^^^^^^^^^^^^^^
+SyntaxError: Named export 'TriggerProvider' not found. The requested module '@trigger.dev/react' is a CommonJS module, which may not support all module.exports as named exports.
+CommonJS modules can always be imported via the default export, for example using:
+
+import pkg from '@trigger.dev/react';
+const { TriggerProvider } = pkg;
+```
+
+To fix this, edit your `remix.config.js` file and add the `@trigger.dev/react` package to your list of `serverDependenciesToBundle`:
+
+```js
+export default {
+  // ... other config
+  serverDependenciesToBundle: ["@trigger.dev/react"],
+};
+```
+
+### `[ERROR] Node builtin "buffer"`
+
+When running the Remix app, you may see an error like this:
+
+```
+✘ [ERROR] Node builtin "buffer" (imported by "node_modules/@trigger.dev/core/dist/index.js") must be polyfilled for the browser.
+You can enable this polyfill in your Remix config, e.g. `browserNodeBuiltinsPolyfill: { modules: { buffer: true } }`
+[plugin browser-node-builtins-polyfill-plugin]
+```
+
+To fix this, edit your `remix.config.js` file and add the `browserNodeBuiltinsPolyfill` config:
+
+```js
+export default {
+  browserNodeBuiltinsPolyfill: {
+    modules: {
+      buffer: "empty",
+    },
+  },
+};
+```

docs/documentation/guides/manual/remix.mdx

@@ -5,3 +5,5 @@ description: "How to manually setup Trigger.dev in your Remix project"
 ---
 
 <Snippet file="manual-setup-remix.mdx" />
+
+<Snippet file="remix/troubleshooting.mdx" />

docs/documentation/guides/platforms/remix.mdx

@@ -16,3 +16,5 @@ View our [guide for writing Jobs](/documentation/guides/create-a-job).
 ## Deployment
 
 View our [deployment guide](/documentation/guides/deployment) to learn how to deploy your Jobs.
+
+<Snippet file="remix/troubleshooting.mdx" />

docs/documentation/quickstarts/remix.mdx

@@ -5,6 +5,8 @@ description: "Start creating Jobs in 5 minutes in your Remix project."
 icon: "r"
 ---
 
+## Quickstart
+
 This quick start guide will get you up and running with Trigger.dev.
 
 <Accordion title="Need to create a new Remix project to add Trigger.dev to?">
@@ -84,6 +86,8 @@ If you navigate to your Trigger.dev project you will see this Job in the "Jobs"
 
 </Steps>
 
+<Snippet file="remix/troubleshooting.mdx" />
+
 <Snippet file="quickstart-whats-next.mdx" />
 <CardGroup cols={2}>
   <Snippet file="card-react-hooks.mdx" />