Attempted import error: 'TextDecoder' is not exported from '@polkadot/x-textdecoder'

Question

I installed following polkadot packages.

"@polkadot/api": "6.10.1",
"@polkadot/extension-dapp": "0.41.1",
"@polkadot/hw-ledger": "8.2.2",
"@polkadot/util-crypto": "8.0.2",

When run the "yarn start", I got this error.
./node_modules/@polkadot/util/u8a/toString.js
Attempted import error: 'TextDecoder' is not exported from '@polkadot/x-textdecoder'.

How can I fix that?

Answer 1

We had a similar issue when running Jest tests a while back, so we ended up just attaching TextEncoder to the global scope of the test environment as a workaround.

// script.js

import { TextEncoder, TextDecoder } from 'util';
import Environment from 'jest-environment-jsdom';

/**
 * A custom environment to set the TextEncoder that is required.
 */
export default class CustomTestEnvironment extends Environment {
  async setup() {
    await super.setup();
    if (typeof this.global.TextEncoder === 'undefined') {
      this.global.TextEncoder = TextEncoder;
      this.global.TextDecoder = TextDecoder;
    }
  }
}

The above code was loaded as the test environment in jest config like so:

testEnvironment: '<path to script.js>',

Answer 2

I am having the same issue. These are my packages and version:

"@polkadot/api": "7.15.1",
"@polkadot/extension-dapp": "0.42.10",
"@polkadot/keyring": "8.7.1",
"@polkadot/networks": "8.7.1",
"@polkadot/typegen": "^7.15.1",
"@polkadot/types": "7.15.1",
"@polkadot/ui-keyring": "1.4.1",
"@polkadot/ui-settings": "1.4.1",
"@polkadot/util": "8.7.1",
"@polkadot/util-crypto": "8.7.1",

Update:

I ended up solving my issue by abandoning create-react-app and therefore webpack. I migrated to vite using this guide. It only took like 20 minutes to migrate over and everything just worked.