temporalio / temporalio/samples-typescript

[Feature Request] Add NextJS ESM sample

Open

#95 opened on Jan 23, 2022 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement

Dominant language: TypeScript
Stars: 465
Forks: 148
Avg merge: 1d 10h
Merged PRs (30d): 11

Description

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'
}

Contributor guide

No contributing guide indexed for this repository

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Research direction

Start by comparing this repository's existing fetch-esm sample with the referenced Next.js examples/with-temporal sample and its package.json. Run the shown npm i and npm run build commands to reproduce the ESM failure. Done means adding a NextJS sample that combines the fetch-esm setup and builds successfully.

Written by the indexing model from the issue text.

Assessment

Tech stack: nextjs, typescript
Domain: web-dev
Issue type: Feature
Difficulty: 3/5
Estimated time: 1-2 days
Activity status: Stale
Clarity: Mostly clear
Newbie friendliness: 45/100