tsconfig causes [ERR_REQUIRE_ESM]: Must use import to load ES Module

Question

I already know how to solve the error [ERR_REQUIRE_ESM]: Must use import to load ES Module

but I noticed that it caused by setting paths to refer to node_modules in tsconfig.json and I don't know the exact reason.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
       "paths": {
          "*": ["node_modules/*", "types/*"]                  
       }
  }
}

removing "*": ["node_modules/*", "types/*"] loves the issue but I want to know why?

this error occurs especially when registering tsconfig-paths with ts-node and then running webpack -c webpack.config.ts

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
       "paths": {
          "*": ["node_modules/*", "types/*"]                  
       }
  },
  "ts-node": {
     "require": ["tsconfig-paths/register"]
  }
}

full error trace:

(node:6087) UnhandledPromiseRejectionWarning: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /workspace/dibo/projects/ngx-cms/node_modules/colorette/index.js
require() of ES modules is not supported.
require() of /workspace/dibo/projects/ngx-cms/node_modules/colorette/index.js from /workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/utils/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /workspace/dibo/projects/ngx-cms/node_modules/colorette/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /workspace/dibo/projects/ngx-cms/node_modules/colorette/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (/workspace/dibo/projects/ngx-cms/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.get colors [as colors] (/workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/utils/index.js:3:16)
    at Object.error (/workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/utils/logger.js:5:58)
    at runCLI (/workspace/dibo/projects/ngx-cms/node_modules/webpack-cli/lib/bootstrap.js:13:22)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:6087) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:6087) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

tsconfig causes [ERR_REQUIRE_ESM]: Must use import to load ES Module

0 Answers0