Installation fails: ERR_REQUIRE_ESM

[FlynnHillier]

chess-image-generator version:

1.0.9 (latest)

Steps to reproduce

yarn add chess-image-generator

The installation seems to work fine in a new fresh project, however in my project with the following package.json, the installation fails. I believe it is due to incorrect configuration for support between commonjs and es modules.

{
  "name": "chessalyze",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "https://github.com/FlynnHillier/chessalyze.git",
  "author": "FlynnHillier <flynnhillier@gmail.com>",
  "license": "MIT",
  "scripts": {
    "dev": "next dev",
    "postinstall": "npx next-ws-cli@latest patch",
    "postuninstall": "npx next-ws-cli@latest patch",
    "drizzle": "drizzle-kit push:pg --config=./drizzle.config.ts"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
    "@types/node": "^20.11.24",
    "@types/pg": "^8.11.2",
    "@types/react": "^18.2.61",
    "@types/react-dom": "^18.2.19",
    "@types/uuid": "^9.0.8",
    "@types/ws": "^8.5.10",
    "drizzle-kit": "^0.20.14",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.35",
    "postcss-import": "^16.0.1",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.12",
    "tailwindcss": "^3.4.1",
    "tsx": "^4.7.1",
    "typescript": "^5.3.3"
  },
  "dependencies": {
    "@auth/drizzle-adapter": "^0.7.0",
    "@lucia-auth/adapter-drizzle": "^1.0.7",
    "@t3-oss/env-nextjs": "^0.9.2",
    "@tabler/icons-react": "^2.47.0",
    "@tanstack/react-query": "^4.35.3",
    "@trpc/client": "^10.45.1",
    "@trpc/next": "^10.45.1",
    "@trpc/react-query": "^10.45.1",
    "@trpc/server": "^10.45.1",
    "arctic": "^1.2.1",
    "autoprefixer": "^10.4.18",
    "chess.js": "^1.0.0-beta.8",
    "cookie": "^0.6.0",
    "dotenv": "^16.4.5",
    "drizzle-orm": "^0.29.4",
    "lucia": "^3.1.1",
    "next": "^14.1.1",
    "next-ws": "^1.0.1",
    "next-ws-cli": "1.0.1",
    "pg": "^8.11.3",
    "react": "^18.2.0",
    "react-chessboard": "^4.4.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "superjson": "^2.2.1",
    "tailwind-scrollbar-hide": "^1.1.7",
    "usehooks-ts": "^3.0.2",
    "uuid": "^9.0.1",
    "ws": "^8.16.0",
    "zod": "^3.22.4"
  }
}

Expected behavior

Package is installed successfully.

Actual behavior

error C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\canvas: Command failed.
Exit code: 1
Command: node-pre-gyp install --fallback-to-build --update-binary
Arguments: 
Directory: C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\canvas
Output:
C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\string-width\index.js:2
const stripAnsi = require('strip-ansi');
                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\strip-ansi\index.js from C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\string-width\index.js not supported.
Instead change the require of C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\strip-ansi\index.js in C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\string-width\index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\flynn\Desktop\Programming\JS\chessalyze\node_modules\string-width\index.js:2:19) {
  code: 'ERR_REQUIRE_ESM'
}

[FlynnHillier]

I patched this issue by adding a "resolutions" field to package.json:

"resolutions": {
    "strip-ansi": "6.0.0"
  }