Nanoid4 in codecept error [ERR_REQUIRE_ESM]: require() of ES Module

Question

I updated to nanoid4 and began getting the following error:

[ERR_REQUIRE_ESM]: require() of ES Module [...]/node_modules/nanoid/index.js not supported. Instead change the require of index.js in [...]/signup_test.ts to a dynamic import() which is available in all CommonJS modules

This is the import it's complaining about:

import { customAlphabet } from 'nanoid'

This is the tsconfig file I'm using:

{
    "ts-node": {
      "files": true
    },
    "compilerOptions": {
      "jsx": "react-jsx",
      "types": [
        "node",
        "codeceptjs"
      ],
      "experimentalDecorators": true,
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "esModuleInterop": true,
      "module": "ES6",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "incremental": true,
      "target": "ESNext",
    },
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }

Unsure why it's broken

Answer 1

It works if you use another version of nanoid. For example:

npm uninstall nanoid
npm install [email protected]

If it doesn't, try changing some of your tsconfig.json according to this.

Answer 2

The error "[ERR_REQUIRE_ESM]: require() not supported" occurs because a package you are importing has been converted to be an ESM only package, which means that the package cannot be imported with require() anymore. Use npm i [email protected]