[Feature Request] Add NextJS ESM sample

[lorensr]

Is your feature request related to a problem? Please describe.

Not being able to use NextJS and Temporal and ES modules from NPM. User feedback: https://temporalio.slack.com/archives/C01DKSMU94L/p1642900509072000?thread_ts=1642896199.071100&cid=C01DKSMU94L

Describe the solution you'd like

Once NextJS supports type: "module", create a sample combining NextJS with our fetch-esm sample.

Additional context

NextJS recently added support for importing ES modules from NPM, but it doesn't appear to support having "type": "module", in the package.json. When I tried, the Temporal part works fine, but next build fails:

https://github.com/lorensr/next.js/tree/58fc36e0166e6479c810e2f57ab9c101c3ff66f0/examples/with-temporal

git clone https://github.com/lorensr/next.js.git
cd next.js/examples/with-temporal
git checkout 58fc36e01
npm i
npm run build

error: require() of ES Module is not supported

$ npm run build

> build
> next build

info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types  
warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data ..node:internal/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/me/gh/next.js/examples/with-temporal/.next/server/pages/_document.js from /Users/me/gh/next.js/examples/with-temporal/node_modules/next/dist/server/require.js not supported.
_document.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename _document.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/me/gh/next.js/examples/with-temporal/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.requirePage (/Users/me/gh/next.js/examples/with-temporal/node_modules/next/dist/server/require.js:47:12)
    at Object.loadComponents (/Users/me/gh/next.js/examples/with-temporal/node_modules/next/dist/server/load-components.js:47:45)
    at Object.getNamedExports (/Users/me/gh/next.js/examples/with-temporal/node_modules/next/dist/build/utils.js:652:51)
    at execFunction (/Users/me/gh/next.js/examples/with-temporal/node_modules/jest-worker/build/workers/processChild.js:145:17)
    at execHelper (/Users/me/gh/next.js/examples/with-temporal/node_modules/jest-worker/build/workers/processChild.js:124:5)
    at execMethod (/Users/me/gh/next.js/examples/with-temporal/node_modules/jest-worker/build/workers/processChild.js:128:5)
    at process.messageListener (/Users/me/gh/next.js/examples/with-temporal/node_modules/jest-worker/build/workers/processChild.js:46:7)
    at process.emit (node:events:390:28) {
  type: 'Error',
  code: 'ERR_REQUIRE_ESM'
}

[lorensr]

Update: works if I remove type: module from root package.json and add a second package.json for temporal. Will submit PR

https://github.com/lorensr/next.js/commit/85b719375f53e29e15acae740a3317295e480b42

[swyxio]

yea lets try to keep it as simple as possible.. i think it wouldnt be too bad to just make the whole nextjs example ESM