bug: `TriggerProvider` throws error in pages directory

[Marc Seitz]

Provide environment information

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 7.36 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.0 - ~/.pkgx/nodejs.org/v20.8.0/bin/node
    npm: 10.1.0 - ~/.pkgx/npmjs.com/v10.1.0/bin/npm
  Managers:
    pip3: 23.2.1 - ~/.pkgx/pip.pypa.io/v23.2.1/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.42.0 - /Users/mfts/.pkgx/git-scm.org/v2.42.0/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    Curl: 8.3.0 - /Users/mfts/.pkgx/curl.se/v8.3.0/bin/curl
  Servers:
    Apache: 2.4.56 - /usr/sbin/apachectl
  Virtualization:
    Docker: 24.0.6 - /usr/local/bin/docker
  IDEs:
    VSCode: 1.87.0 - /usr/local/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.38.0 - /Users/mfts/.pkgx/perl.org/v5.38.0/bin/perl
    Python: 3.11.6 - /Users/mfts/.pkgx/python.org/v3.11.6/bin/python
    Python3: 3.11.6 - /Users/mfts/.pkgx/python.org/v3.11.6/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    PostgreSQL: 15.6 - /Applications/Postgres.app/Contents/Versions/latest/bin/postgres
    SQLite: 3.39.2 - /Users/mfts/.pkgx/sqlite.org/v3.43.1/bin/sqlite3
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.2.1

Describe the bug

Getting an error when adding TriggerProvider to my pages/_app.tsx page

 ⨯ /Users/mfts/dev/mfts/papermark-main/node_modules/@trigger.dev/react/dist/TriggerProvider.js:2
import React from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at mod.require (/Users/mfts/dev/mfts/papermark-main/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/Users/mfts/dev/mfts/papermark-main/node_modules/@trigger.dev/react/dist/index.cjs:18:25)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19) {
  page: '/documents'
}

Reproduction repo

github.com/mfts/papermark

To reproduce

// pages/_app.tsx

import { TriggerProvider } from "@trigger.dev/react"
...

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps<{ session: Session }>) {
  return (
      <SessionProvider session={session}>
              <main className={inter.className}>
                    <TeamProvider>
                      <TriggerProvider publicApiKey={"..."}>
                        <Component {...pageProps} />
                      </TriggerProvider>
                    </TeamProvider>
              </main>
      </SessionProvider>
  ...
  );
}      


### Additional information

_No response_

[Matt Aitken]

Hey @mfts, you need to add something to your next.config to get this to work: #331

We should add this to the docs…

[Marc Seitz]

Thanks! That's helpful and fixed the issue.