[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

[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 https://github.com/triggerdotdev/trigger.dev/issues/330)
• [ ] Add to the React Hooks docs (and the Next.js quickstart) info about this

_TRI-1029

[Chigala]

I'll look into this

[birksy89]

You'll be sick of me after all that ngrok faffing on @Chigala, but I just ran into this and solved it with the above advice 😅

I don't think the work in the other issue/PR made it into the Docs, unless I've missed where this is specifed somewhere.

Just wanted to flag / bump this, as I'm sure many people are still using the Page router for Next.js.

I regularly use the T3 Stack, which is still on Page Router Next: https://create.t3.gg/

[Chigala]

@birksy89 You are right, the info isn't in the Docs.