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

Transpile the ESM bundle to ES5 but still use ES module system #181

Merged
merged 2 commits into from
Oct 7, 2020

Conversation

stefcameron
Copy link
Member

@stefcameron stefcameron commented Oct 7, 2020

Fixes #172 again.

See webpack/webpack#5756

The initial approach was to add a browser target to package.json and
point it at the UMD build so that bundlers would pick that up instead of
the ESM build, since they (except for Rollup) tend to prefer browser
first, then module (ESM), then main.

But that would potentially affect tree-shaking, and we don't want to
hamper that optimizing process.

So this PR transpiles the code in the ESM bundle down to ES5, so that
it runs in IE9+ like the CJS and UMD bundles do, while keeping the
import/export ESM statements.

Features and Bug Fixes

  • Issue being fixed is referenced.
  • Test coverage added/updated.
  • Typings added/updated.
  • README updated (API changes, instructions, etc.).
  • Changes to dependencies explained.
  • Changeset added (run yarn changeset locally to add one, follow prompts).

Fixes #172 again.

AFAICT, this seems to be the best solution to what __a lot__ of folks
in the community have been experiencing with ESM bundles, referenced
from a package's `module` entry, that aren't also transpiled down
to ES5 (which is technically in conflict with ESM, which is an ES6
feature).

The problem arises because this package states both `module` and
`main`, but Webpack defaults `mainFields` to
`['browser', 'module', 'main']`, in order. So it will always pick
`module` over `main` by default, because it doesn't understand
that the build's target is NOT a browser that supports ESM...

See webpack/webpack#5756
@changeset-bot
Copy link

changeset-bot bot commented Oct 7, 2020

🦋 Changeset detected

Latest commit: 2cec08e

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@stefcameron stefcameron changed the title Add browser entry to package.json Transpile the ESM bundle to ES5 but still use ES module system Oct 7, 2020
@stefcameron stefcameron merged commit 756c79d into master Oct 7, 2020
@stefcameron stefcameron deleted the issue-172 branch October 7, 2020 23:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

IE11 not working with latest release
1 participant