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

Verify canary release

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

Checkout the project
Adapt next.js version
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

About this issue

Original URL
State: open
Created a year ago
Reactions: 14
Comments: 21 (1 by maintainers)

Most upvoted comments

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

davidbnk on Jun 11, 2023

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/client@3.7.14

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

mikedidomizio on May 30, 2023

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.

woodwoerk on Feb 7, 2024

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

CleanShot 2023-11-13 at 08 53 38@2x

If this can help!

Rieranthony on Nov 13, 2023

having this issue as well

alexboii on Sep 26, 2023

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 on Jun 9, 2023

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

kiurious on Mar 26, 2024

Same issue but on production without using jest.

CleanShot 2023-11-27 at 15 56 22@2x

RusseII on Nov 27, 2023

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:

You’re using jest
Your default testEnvironment is jsdom
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.

Kevin-McGonigle on Nov 22, 2023

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

davidbnk on Jun 10, 2023

Can confirm, this error is still coming through for chrome 84.0.4147 with nextjs 14.1.0 on production, no jest Screenshot 2024-04-10 at 16 46 32

Matts on Apr 10, 2024

@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.

Kevin-McGonigle on Nov 22, 2023

Screenshot 2023-08-21 at 09 50 04

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

camin-mccluskey on Aug 21, 2023