require("protomaps-leaflet") returns string, not object

tl;dr using require("protomaps-leaflet") returns the string "/static/media/index.e620cdf0cd3caacfc7b7.cjs" instead of an object of the package exports.

I'm currently developing a package that combines the use of vector map tiles for leaflet with the capability to store them in cache for offline use. For my package to work, I have imported a number of methods from Protomaps-leaflet. One of the methods I need to sourcesToViews() from views.ts. Importing this works fine; no errors from TypeScript or ESlint. Once I've compiled my package using npx tsc, linked it for testing, and imported it in my React.js app to test, it crashes. The cause being require("protomaps-leaflet") returns the string "/static/media/index.e620cdf0cd3caacfc7b7.cjs" instead of an object with all the methods like sourcesToViews(). Am I compiling my package incorrectly or importing the methods from "protomaps-leaflet" incorrectly?

I am aware that the main reason for empty imports/requires is due to circular imports but I have triple checked thisand used plugins to check for me and I don't have any circular imports.

Here's my tsconfig.json from my package:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "skipLibCheck": true,
    "strict": true,
    "target": "es2016"
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src"
  ]
}

And here is my package.json:

{
  "bin": "dist/index.js",
  "browser": "dist/index.js",
  "dependencies": {
    "leaflet": "^1.9.4",
    "leaflet.offline": "^3.1.0",
    "pmtiles": "^3.0.7",
    "protomaps-leaflet": "^4.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.8.0",
    "@types/node": "^22.0.0",
    "eslint": "^9.8.0",
    "eslint-config-prettier": "^9.1.0",
    "globals": "^15.8.0",
    "husky": "^8.0.0",
    "lint-staged": "^15.2.7",
    "prettier": "3.3.3",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.0.0"
  },
  "files": [
    "dist",
    "package.json"
  ],
  "keywords": [
    "leaflet",
    "offline",
    "vector"
  ],
  "license": "ISC",
  "lint-staged": {
    "src/**/*.{js, ts}": [
      "eslint --quiet --fix"
    ],
    "src/**/*.{json,js,ts}": [
      "prettier --write --ignore-unknown"
    ]
  },
  "module": "dist/index.js",
  "name": "leaflet-vector-offline",
  "repository": {
    "type": "git",
    "url": "https://github.com/George-Madeley/leaflet-vector-offline.git"
  },
  "scripts": {
    "build": "rm -rf dist && npx tsc",
    "format": "eslint --fix src && prettier -w \"./src/**/*.ts\"",
    "lint": "eslint src && prettier --check \"./src/**/*.ts\"",
    "lint:fix": "eslint --fix src tes",
    "prepare": "husky install",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "types": "dist/index.d.ts",
  "version": "1.0.12"
}

And here is how I have imported protomaps-leaflet:

import * as protomapsLeaflet from "protomaps-leaflet";

protomaps / protomaps-leaflet

require("protomaps-leaflet") returns string, not object #168