[NEXT-1188] [13.4.x] ReferenceError: TextEncoder is not defined

[ribeaud]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

❯ npx next info

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 21:00:17 PST 2023; root:xnu-8796.101.5~3/RELEASE_X86_64
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://gitlab.com/biomedit/next-widgets/

To Reproduce

1. Checkout the project
2. Adapt next.js version
3. Run npm i && npm run test

Describe the Bug

Since v13.4.x, our test suites started to throw following error:

ReferenceError: TextEncoder is not defined

If we roll back to v13.3.4, the tests are green.

Somehow I have the impression that https://github.com/vercel/next.js/pull/49053 introduced the problem on our side but I am not sure 100% (I went through all the changes listed in the changelog).

Here is the MR where the problem started to appear. The MR did succeed because I reverted Next.js to v13.3.4.

Expected Behavior

Tests should be green.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1188

[mikedidomizio]

I encountered this exact same error on my team when running Jest tests. The error for us, appears to be coming through Apollo Client @apollo/[email protected]

Like @ribeaud the fix was to downgrade to v13.3.4. I bisected through it and for us, the error is introduced through this PR which removes node-fetch as a fallback and goes straight to undici.

I reverted the commit e6acd40cba2c565919ee3e94bb9e8a100dc69495 (branch here) and everything works. Not the answer, but just some info. Even if I just return node-fetch and never undici things work fine.

Otherwise, setting the global TextEncoder did get me a step further as suggested here, but ran into further issues

clearImmediate is not defined

/next.js/packages/next/dist/compiled/undici/index.js:1:82074)

The below didn't work for me but may work for someone else. For me the Apollo client would never return data

// jest.setup.ts

global.clearImmediate = jest.fn()

My info

npx next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: N/A
      pnpm: 7.28.0
    Relevant packages:
      next: 13.4.5-canary.0
      eslint-config-next: 13.4.5-canary.0
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.8.2

[davidbnk]

This happens sometimes to us in production Next.js 13.4.4

ReferenceError: TextEncoder is not defined
  at Object.119(./node_modules/next/dist/client/app-index.js:76:17)
  at s(app:///_next/static/chunks/webpack-aaa2a25000886b98.js:1:167)
  at callback(./node_modules/next/dist/client/app-next.js:10:26)
  at hydrate(./node_modules/next/dist/client/app-bootstrap.js:58:9)
  at appBootstrap(./node_modules/next/dist/client/app-bootstrap.js:23:16)
  at Object.4918(./node_modules/next/dist/client/app-next.js:6:19)
  at s(app:///_next/static/chunks/webpack-aaa2a25000886b98.js:1:167)
  at n(app:///_next/static/chunks/main-app-bcd83a9e7e626f59.js:1:763)
  at ? (app:///_next/static/chunks/main-app-bcd83a9e7e626f59.js:1:819)
  at Function.s.O(app:///_next/static/chunks/webpack-aaa2a25000886b98.js:1:593)
  at c(app:///_next/static/chunks/webpack-aaa2a25000886b98.js:1:3908)
  at <anonymous>(./node_modules/next/dist/build/polyfills/polyfill-module.js?5488:1:1)
  at Script.runInContext(vm.js:144:12)
  at Object.runInContext(vm.js:294:6)
  at processJavaScript(/bwtpn/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:241:10)
  at HTMLScriptElementImpl._innerEval(/bwtpn/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:176:5)
  at onLoadExternalScript(/bwtpn/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:98:12)
  at QueueItem.onLoadWrapped [as onLoad](/bwtpn/node_modules/jsdom/lib/jsdom/browser/resources/per-document-resource-loader.js:53:33)
  at AsyncResourceQueue._check(/bwtpn/node_modules/jsdom/lib/jsdom/browser/resources/async-resource-queue.js:39:22)
  at ? (/bwtpn/node_modules/jsdom/lib/jsdom/browser/resources/async-resource-queue.js:74:20)
  at processTicksAndRejections(internal/process/task_queues.js:95:5)

[davidbnk]

https://github.com/vercel/next.js/blob/387430c659f12189f9a36b55570820954f9b3a5c/packages/next/src/client/app-index.tsx#L97

this class seems to be imported from the polyfill, which maybe is failing to build under some some circumstances

https://github.com/vercel/next.js/blob/387430c659f12189f9a36b55570820954f9b3a5c/packages/next/src/client/app-index.tsx#L2

[ribeaud]

It is clear that the problem relates to Jest only. The deployed application works correctly on our side.
As a workaround one could apply any of the ones suggested here.

[davidbnk]

It happened to me in production a bunch of times running on vercel

[ribeaud]

Could it be that the fetch polyfill is not complete and miss TextDecoder resp. TextEncoder implementation?

[zigang93]

I am confirm this bug exist on 13.4.x I am not recommand those people try to mock TextEncoder and TextDecoder because it will break the useFakerTimer and waitFor for hanging the jest unit testing..

I am downgrade to 13.2.x , my test resolved

[camin-mccluskey]

Also spotted this issue in production. Same Chrome version as the repro above

[alexboii]

having this issue as well

[tom-mason-verses]

Has there been any movement on this? I'm encountering it as well

[Rieranthony]

Same issue for me in production, got this in my sentry logs this morning (running 14.0.2).

If this can help!

[timneutkens]

https://caniuse.com/mdn-api_textencoder

This API has been available in browsers for a long time, added in Chrome 38 which was published on 15th of August 2014. Looking at the stacktraces the reports are related to jsdom and somehow running Next.js internals with JSDOM (not sure how that setup would work, but the stacktrace is quite clear that it is using jsdom). JSDOM doesn't have TextEncoder it seems: https://github.com/jsdom/jsdom/issues/2524.

Is anyone else running into this that is not in the JSDOM environment?

[alamenai]

It happened to me in production ( NextJS13.4.0 ) :

[Kevin-McGonigle]

https://caniuse.com/mdn-api_textencoder

This API has been available in browsers for a long time, added in Chrome 38 which was published on 15th of August 2014. Looking at the stacktraces the reports are related to jsdom and somehow running Next.js internals with JSDOM (not sure how that setup would work, but the stacktrace is quite clear that it is using jsdom). JSDOM doesn't have TextEncoder it seems: jsdom/jsdom#2524.

Is anyone else running into this that is not in the JSDOM environment?

For those of you experiencing this error when:

1. You're using jest
2. Your default testEnvironment is jsdom
3. You're testing code that's meant to be run on the server

Try adding this to the top of your test file:

/**
 * @jest-environment node
 */

See the jest docs for more.

[alamenai]

@Kevin-McGonigle, do you mean to add it at the top of each file? Is there another way to add it to the jest config once time?

[Kevin-McGonigle]

@MenaiAla If most of your tests are for code executed in the node runtime, then going the opposite direction of setting the testEnvironment property of your jest config to 'node' (or omitting it entirely, since 'node' is the default) and then adding:

/**
 * @jest-environment jsdom
 */

to the top of tests for files where the code under test is typically executed in the browser might be the less painful route.

This, and my previous comment, is only applicable when the cause of this error is due to the mix up in runtimes.

[alamenai]

Thank you @Kevin-McGonigle.

[RusseII]

Same issue but on production without using jest.

[woodwoerk]

I'm seeing the same issue in production in the same Chrome version as the reports above (Chrome 84.0.4147). Our Next.js version is 14.0.4.

[kiurious]

We're on Next 14.0.1 and we had the same error in production this morning. We are not using jest though.

[Matts]

Can confirm, this error is still coming through for chrome 84.0.4147 with nextjs 14.1.0 on production, no jest

[frapsMatheus]

It's happening for me on prod deployed on Vercel. Anyone found a solution?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[frapsMatheus]

It's happening for me on prod deployed on Vercel (Next version 14.2.13). Did anyone find a solution?