I am trying to import the @metamask/detect-provider" library but when I go running npm start I get the error ERR_UNKNOWN_FILE_EXTENSION. I tried searching online for a possible solution but was unsuccessful

Source code app.js

import detectEthereumProvider from '@metamask/detect-provider';

const provider = await detectEthereumProvider();
const express = require("express");
const app = express();


if (provider) {
    app.get("/", function (req, res) {
        res.sendFile(__dirname + "/index.html");
    });
} else {
    app.get("/", function (req, res) {
        res.sendFile(__dirname + "/error.html");
    });
}

module.exports = app;

package.json

{
  "name": "myapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "type": "module",
  "dependencies": {
    "@maticnetwork/maticjs": "^3.2.2",
    "@maticnetwork/maticjs-web3": "^1.0.1",
    "@metamask/detect-provider": "^1.2.0",
    "body-parser": "^1.18.3",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "request": "^2.88.2",
    "truffle": "^5.4.33",
    "web3": "^1.7.0"
  }
}

Error

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension "" for /home/alessio/myapp/bin/www
    at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:65:15)
    at Loader.getFormat (internal/modules/esm/loader.js:116:42)
    at Loader.getModuleJob (internal/modules/esm/loader.js:247:31)
    at async Loader.import (internal/modules/esm/loader.js:181:17)
    at async Object.loadESM (internal/process/esm_loader.js:68:5) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
npm ERR! code 1
npm ERR! path /home/alessio/myapp
npm ERR! command failed
npm ERR! command sh -c node ./bin/www