Skip to content

[TRI-1029] @trigger.dev/react doesn't work out of the box with Next.js Page Router: Cannot use import statement outside a module Error #331

@ericallam

Description

@ericallam

When using @trigger.dev/react in Next.js Page Router, importing will cause an error because Page Router modules aren't automatically transpiled to CJS (whereas they are in App Router).

From Next 13.1 onwards, the fix is to the add @trigger.dev/react to the list of transpiled packages in the next.config.js file:

const nextConfig = {
  transpilePackages: ["@trigger.dev/react"],
};

module.exports = nextConfig;

In Next versions below 13.1, the next-transpile-modules package should be used in next.config.js:

const withTM = require('next-transpile-modules')(['@trigger.dev/react']); // pass the modules you would like to see transpiled

module.exports = withTM({});

We should do the following:

  • Look into why Next.js is using the ESM module exported by @trigger.dev/react instead of the CJS
  • If nothing can be done about the above issue, then we should make sure @trigger.dev/cli init correctly handles this (whenever the @trigger.dev/react stuff is added to the init command (see [TRI-1018] Add the @trigger.dev/react package when doing @trigger.dev/cli init #330)
  • Add to the React Hooks docs (and the Next.js quickstart) info about this

TRI-1029

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions