I managed to resolve the issue by tweaking the configuration in my package's package.json and utilizing the rollup plugin @rollup/plugin-node-resolve.
Within the package.json file of my package, I included the browser option which dictates how modules should be resolved when the package is used in a browser environment. As per the npm documentation on the browser option in package.json:
If your module is designed for client-side usage, the browser field should be utilized instead of the main field. This can help indicate to users that it might rely on features not available in Node.js modules (e.g., window).
Thus, using the example provided in the initial question, the npm package might contain something like this:
{
"name": "mypackage",
"version": "1.5.1",
"description": "A brand new package",
"main": "index.js",
"browser": {
"B": "./B.bundle.js"
},
}
This setup ensures that when "mypackage" is utilized within a browser context, the module B import will load from the specified file location at "./B.bundle.js".
Furthermore, when using rollup, I needed to specify that the bundle I was creating was intended for the browser environment. The plugin responsible for handling node module imports is @rollup/plugin-node-resolve. Within this plugin, there is an option to specify the context as browser. According to the plugin documentation regarding the browser option:
If true, directs the plugin to utilize browser module resolutions in package.json and includes 'browser' in exportConditions if absent to apply browser conditionals in exports. If false, any browser properties in package files are disregarded. Alternatively, a value of 'browser' can be added to both the mainFields and exportConditions options, with this option taking precedence over mainFields.
For my rollup configuration file, I had something along these lines:
// rollup.config.js
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import nodePolyfills from "rollup-plugin-node-polyfills";
export default {
input: "index.js",
output: {
file: "dist/mypackage.bundle.js",
format: "es",
},
plugins: [
nodePolyfills(),
resolve({
browser: true, //<- instructs rollup to use browser module resolution
}),
commonjs(),
],
},
While @vrajpaljhala's solution may appear viable, in my opinion, using @rollup/plugin-replace could be too complex and risky as it involves directly replacing strings enclosed in "". This approach could lead to challenging-to-discover errors if the package name being replaced is a common word found as a string in the code rather than solely in an import statement.