ERR_REQUIRE_ESM: Require of ES Module in CommonJS Context (ts-node, svgdom)

[famhy]

ERR_REQUIRE_ESM: require() of ES Module

I'm encountering the error "ERR_REQUIRE_ESM: require() of ES Module ..." whenever I install a new package or update an @types version. The specific module causing the issue seems to be Error [ERR_REQUIRE_ESM]

even when delete svgdom i get the same error in other package .

C:\Users\PC\Documents\Giftyshop\back_giftyshop\node_modules\ts-node\dist\index.js:851
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\PC\Documents\Giftyshop\back_giftyshop\node_modules\svgdom\main-module.js from C:\Users\PC\Documents\Giftyshop\back_giftyshop\src\controllers\dashboard\shop.ts not supported.
Instead change the require of main-module.js in C:\Users\PC\Documents\Giftyshop\back_giftyshop\src\controllers\dashboard\shop.ts to a dynamic import() which is available in all CommonJS modules.
    at require.extensions.<computed> [as .js] (C:\Users\PC\Documents\Giftyshop\back_giftyshop\node_modules\ts-node\dist\index.js:851:20)
    at Object.<anonymous> (C:\Users\PC\Documents\Giftyshop\back_giftyshop\src\controllers\dashboard\shop.ts:19:18)
    at m._compile (C:\Users\PC\Documents\Giftyshop\back_giftyshop\node_modules\ts-node\dist\index.js:857:29) {
  code: 'ERR_REQUIRE_ESM'
}

• tsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

• Package.json

 "devDependencies": {
    "@types/formidable": "^3.4.5",
    "@types/jsonwebtoken": "^9.0.6",
    "@types/multer": "^1.4.11",
    "@types/node": "^20.14.2",
    "@types/svgdom": "^0.1.2",
    "@types/ws": "^8.5.10",
    "nodemon": "^3.1.3",
    "prisma": "^5.15.0",
    "ts-node": "^10.9.2",
    "tslib": "^2.6.3",
    "typescript": "^5.4.5"
  },
  "dependencies": {
    "@types/cors": "^2.8.17",
    "@types/express": "^4.17.21",
    "@types/html-pdf-node": "^1.0.2",
    "@types/morgan": "^1.9.9",
    "@types/node-cron": "^3.0.11",
    "@types/nodemailer": "^6.4.15",
    "@types/qr-image": "^3.2.9"
  }
}

• I make search and i try to chenge tsconfig i change the module from form comonjs to esnext

• tsconfig.json (new)

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
 "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */

  },
  "include": ["src"]
}

but when i change the module i get new error :

Debugger attached.
TypeError: Unknown file extension ".ts" for C:\Users\PC\Documents\Giftyshop\back_giftyshop\src\main.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:403:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:285:45)
    at async link (node:internal/modules/esm/module_job:78:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

**i seem to be not logic for me cause i tryed all the solutions in internet but i steal butween those two error .

so if there is any solution or something that i did wrong please help me to find it out .**