'Error [ERR_REQUIRE_ESM]: require() of ES Module not supported : file-url

I'm getting this strange error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/raphy/Raphy-Template/node_modules/file-url/index.js from /home/raphy/Raphy-Template/dist/src/main/main.js not supported.
Instead change the require of index.js in /home/raphy/Raphy-Template/dist/src/main/main.js to a dynamic import() which is available in all CommonJS modules

And I do not understand why this happens:

node: v16.15.0 , typescript": "^4.5.4 , O.S: Ubuntu 20.04 Desktop

This is tsconfig.json :

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"],
    "target": "es2021",
    "module": "commonjs",
    "lib": ["es2021"],
    "outDir": "dist",
    //"jsx": "react",
    "jsx": "react-jsx",
    "baseUrl": "./src",
    "paths": {
      "@sections/*": ["app/sections/*"],
      "@app/*": ["app/*"]
    },
    "strict": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "allowJs": true
  },
  "include": ["src/**/*"],
  "exclude": [
    "src/index.js",
    "dist",
  ]
}

And in main.ts I import file-url in this way:

import fileUrl from 'file-url'

Where I'm already importing many other packages in the same way without any problems: For example: import validUrl from 'valid-url'; does not give any error

But in the compiled file /dist/src/main.js : I see :

const file_url_1 = __importDefault(require("file-url"));

How to solve the problem?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source