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

ribeaud commented 1 year ago

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

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

mikedidomizio commented 1 year ago

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

davidbnk commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

ribeaud commented 1 year ago

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

zigang93 commented 11 months ago

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 commented 10 months ago

Screenshot 2023-08-21 at 09 50 04

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

alexboii commented 9 months ago

having this issue as well

tom-mason-verses commented 8 months ago

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

Rieranthony commented 7 months ago

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!

timneutkens commented 7 months ago

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 commented 7 months ago

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

Kevin-McGonigle commented 7 months ago

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.

alamenai commented 7 months ago

@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 commented 7 months ago

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