Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ES module build #129

Closed
blikblum opened this issue Jul 5, 2019 · 8 comments · Fixed by #138
Closed

Add ES module build #129

blikblum opened this issue Jul 5, 2019 · 8 comments · Fixed by #138

Comments

@blikblum
Copy link
Contributor

blikblum commented Jul 5, 2019

Currently bottlejs is distributed only as a umd module.

With an ES module build is possible to take advantage of tools like https://github.com/pikapkg/web

Its possible to have both builds (es and umd) by using module field: https://github.com/rollup/rollup/wiki/pkg.module

If deems appropriate i can help implementing it

@young-steveo
Copy link
Owner

Shouldn't be too hard to implement. I'll put it on the list. Thanks for the suggestion!

@blikblum
Copy link
Contributor Author

blikblum commented Jul 8, 2019

I can create a PR. Just like to know the direction. Still use the current concatenation build through grunt or change to something like rollup?

@young-steveo
Copy link
Owner

For now it would be best to make a new grunt task; probably as simple as creating a new exports wrapper for es modules, concat the source and wrap it.

@young-steveo
Copy link
Owner

Maybe rename this file to umd.js and create a new one for es module as a sibling.

@young-steveo
Copy link
Owner

This has been merged and will be released as v2.0.0 (since it is a potentially breaking change for some webpack users)

@kernwig
Copy link

kernwig commented Jul 2, 2021

How does one make it work with webpack?

{
    "errorType": "TypeError",
    "errorMessage": "Bottle.pop is not a function",
    "stack": [
        "TypeError: Bottle.pop is not a function",
        "    at Object.call (/var/task/src/stacks/ingest/webpack:/node_modules/@sailplane/injector/dist/injector.js:165:26)",
        "    at __webpack_require__ (/var/task/src/stacks/ingest/webpack:/webpack/bootstrap:19:22)",
        "    at Object.call (/var/task/src/stacks/ingest/webpack:/src/stacks/ingest/state-change-lambda.ts:3:1)",
        "    at __webpack_require__ (/var/task/src/stacks/ingest/webpack:/webpack/bootstrap:19:22)",
        "    at /var/task/src/stacks/ingest/webpack:/webpack/bootstrap:83:10",
        "    at Object.<anonymous> (/var/task/src/stacks/ingest/state-change-lambda.js:1:1630)",
        "    at Module._compile (internal/modules/cjs/loader.js:999:30)",
        "    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)",
        "    at Module.load (internal/modules/cjs/loader.js:863:32)",
        "    at Function.Module._load (internal/modules/cjs/loader.js:708:14)"
    ]
}

@kernwig
Copy link

kernwig commented Jul 2, 2021

Solved above... it's a Typescript thing.

I simply changed the way I import bottlejs from:

import * as Bottle from 'bottlejs';

to

import Bottle from 'bottlejs';

@kernwig
Copy link

kernwig commented Jul 7, 2021

The above worked at runtime, but fails in JEST with TypeError: Cannot read property 'pop' of undefined when calling Bottle.pop.

I switched to const {Bottle} = require('bottlejes');. This lets my library compile and test with JEST, but then when imported by another project, JEST works but it fails at runtime with TypeError: Cannot read property 'pop' of undefined.

Library (https://github.com/onicagroup/sailplane/pull/100/files) and end project (an AWS Lambda) both use commonjs. No means of importing bottlejs v2 works for all scenarios.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants