ERR_REQUIRE_ESM require of of ES Module not supported how can I fix this? on file-type package

Question

I've a outdated app that uses very older few packages those doesn't support ES Module as an example file-type package. So if you setup babel and node HTTP server with and then install file-type package then start building and running will throw error message like below:

Error [ERR_REQUIRE_ESM]: require() of ES Module E:\test\testbabel\node_modules\file- 
type\index.js from E:\test\testbabel\dist\index.js not supported.
Instead change the require of E:\test\testbabel\node_modules\file-type\index.js in 
E:\test\testbabel\dist\index.js to a dynamic import() which is available in all CommonJS 
 modules.
at Object.<anonymous> (E:\test\testbabel\dist\index.js:10:17) {
code: 'ERR_REQUIRE_ESM'
}

I tried this on a fresh project though my old project has an outdated config or so, It still throwing this error

Here are my index.js codes

import http from 'http';
import { fileTypeFromFile } from 'file-type';

const server = http.createServer((req, res) => {
    res.end('Hello from the server');
}).listen(4001);

console.log('Server is up and running');

export default server;

file package.json.

{
  "name": "testbabel",
  "version": "1.0.0",
  "description": "test babel with http or express",
  "main": "index.js",
  "scripts": {
    "build": "babel index.js -d dist",
    "start": "npm run build && node dist/index.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.18.2",
    "@babel/plugin-transform-modules-commonjs": "^7.18.2",
    "@babel/preset-env": "^7.18.2"
  },
  "dependencies": {
    "file-type": "^17.1.1"
  }
}

I just tried to import the package and got the errors above.

attempt:

I thought a converter might help so used @babel/plugin-transform-modules-commonjs but still didn't help, and seems no effect on including that package

I'm not sure but added some tweaks on package.json like "type": "module" "type": "commonjs" didn't help at all.

what is the easiest solution for this issue and how do we fix it?

Note: I saw people were going back to the supported package instead of new one which doesn't make sense to me as a solution.

Answer 1

Option1(babel with mocha): Rename "index.js" to "index.mjs" and modify file-type's pacakage.json ("index.js" to "index.mjs"), then leave Babel to transpile for you.

// babel-register.js
const babel_register = require("@babel/register").default;
babel_register({
    ignore: [
        // Only work on Project-wide configuration
        // overrides ignore can transpile packages(modules) from node_modules (https://babeljs.io/docs/en/babel-register/#ignores-node_modules-by-default)
    ],
});

Use babel.config instead of .babelrc

//.mocharc.js
require("./babel-register");

module.exports = {
    // https://github.com/mochajs/mocha/blob/v8.4.0/example/config/.mocharc.js
    ui: "bdd",
    timeout: 5000,
    recursive: true,
};

Option2(babel only): Using dynamic import expression

async function doSomething() {
    const {fileTypeFromStream} = await import("file-type");
}

and

["@babel/preset-env", {
    exclude: ["proposal-dynamic-import"]
}]

Avoiding Babel tanspile dynamic import expression