How to build a library #7635

zlac · 2022-02-01T10:58:02Z

zlac
Feb 1, 2022

Hi,

I am trying to build a js library using ES6 and parcel. I am new to bundlers and I found parcel to be easiest to setup.

I followed this guide https://parceljs.org/getting-started/library/

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "scripts": {
    "watch": "parcel watch",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

but when I try to include main.js into HTML with normal script tag like this

<body>
    <script src="main.js"></script>
</body>

I am getting error

main.js:5 Uncaught ReferenceError: module is not defined
at main.js:5

Also, main.js is not minified, it looks like this

function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}

$parcel$export(module.exports, "add", () => $a007c2cfd8994d7d$export$e16d8520af44a096);
function $a007c2cfd8994d7d$export$e16d8520af44a096(a, b) {
    return a + b;
}

What am I doing wrong?

Thanks

windheart · 2022-02-01T13:11:19Z

windheart
Feb 1, 2022

Try add type="module" to your script tag

3 replies

zlac Feb 1, 2022
Author

Tried that, still the same error

module is not defined
at main.js:5

windheart Feb 1, 2022

Could you post your main.js here, if it is not very big?

zlac Feb 1, 2022
Author

I use the code from https://parceljs.org/getting-started/library/

src/index.js

export function add(a, b) {
  return a + b;
}

package.json

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
  "devDependencies": {
    "parcel": "latest"
  }
}

After npm run build I get dist/main.js

function $parcel$export(e, n, v, s) {
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}

$parcel$export(module.exports, "add", () => $a007c2cfd8994d7d$export$e16d8520af44a096);
function $a007c2cfd8994d7d$export$e16d8520af44a096(a, b) {
    return a + b;
}

karen-sarkisyan · 2022-02-05T12:35:17Z

karen-sarkisyan
Feb 5, 2022

Hi,
Parcel is creating a CommonJS module in main.js, browsers don't support them.

However, modern browsers do support ES6 modules. So if you really want to import a module into your browser, you can add an option to create one in your package.json:

{
  "name": "my-library",
  "version": "1.0.0",
  "source": "src/index.js",
  "main": "dist/main.js",
+ "module": "dist/modern.main.js", // this will create an ES6 module in modern.main.js
  "devDependencies": {
    "parcel": "latest"
  }
}

And, as @windheart pointed out, import modern.main.js with type="module" attribute into your html.

1 reply

tst32 Feb 7, 2022

no, the same again. no minification, all content unchanged, just vars renamed to hashnames as #7635 (reply in thread) commented
i just want parcel to remove spaces and my comments from bundle.js

harshsummit · 2024-03-12T10:53:42Z

harshsummit
Mar 12, 2024

Was this issue resolved? I'm not able to import the exported functions from the bundled js file

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to build a library #7635

{{title}}

Replies: 3 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to build a library #7635

zlac Feb 1, 2022

Replies: 3 comments · 4 replies

windheart Feb 1, 2022

zlac Feb 1, 2022 Author

windheart Feb 1, 2022

zlac Feb 1, 2022 Author

karen-sarkisyan Feb 5, 2022

tst32 Feb 7, 2022

harshsummit Mar 12, 2024

zlac
Feb 1, 2022

Replies: 3 comments 4 replies

windheart
Feb 1, 2022

zlac Feb 1, 2022
Author

zlac Feb 1, 2022
Author

karen-sarkisyan
Feb 5, 2022

harshsummit
Mar 12, 2024