How to consume an es6 Module on browser bundled by rollup.js, published on NPM

Viewed 551

I have published a simple js library to NPM which I want to be used by both node and browser, using rollup.js I have created 2 seperate bundles for both commonJs and ES

rollup.config.js

output: [
    {
      dir: "bin/common",
      format: "cjs",
    },
    {
      dir: "bin/esm",
      format: "esm",
    },
  ],

cjs bundle works fine in node, however I am getting error while using the esm bundle

index.html

<html>
  <head>
    <script src="./src/index.js" type="module">
    </script>
  </head>
  <body></body>
</html>

Index.js

import * as myLib from "./node_modules/bin/esm/myLib.js";
console.log(myLib);

MyLib.js ES bundle generated by rollup.js

Object.defineProperty(exports, "__esModule", { // error is thrown from this line
  value: true
});
exports["default"] = void 0;

/** Lib Related code (no external dependencies, simple js code) **/

module.exports = exports.default;

*The Error

ReferenceError: exports is not defined

I want to create bundles that can be consumed as ES Modules even without webpack.

P.S I am serving the html using a local server, NOT from file system

0 Answers
Related