Motivation
Many modules are supporting esm now, it is better for bundlers to do tree-shaking and do care node.js and browser environment with separated bundle.js.

Description
Bundlers like rollup or webpack want to see esm modules and they do tree-shaking for smaller size. Currently you're using cjs and supporting both node.js and browser by hand (instead of umd). This is bad bacause it exports some global variables like _self in browser and you won't be able to use it in the native esm way because imports order is not guaranteed. See vite#1438 since vite depends on native esm in development mode. This solution is also wrong.

As a result, your package.json should look like this:

{
    // node's require and import, to override it, see "exports"
    "main": "dist/index.js",
    // https://nodejs.org/api/packages.html#packages_conditional_exports
    "exports": {
        "node": {
            "import": "./src/index.mjs",
            "require": "./dist/index.js"
        },
        "default": "./src/index.browser.mjs"
    },
    // front-end bundler read this (like vite or webpack)
    "module": "src/index.browser.mjs"
}