question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Requesting ECMAScript module (ESM) bundle support

See original GitHub issue

EDIT: When this issue was raised, the module only shipped with a CommonJS / UMD build. Projects using Webpack or other bundlers used the default import syntax to pull the CommonJS build:

// old way
import XLSX from "xlsx";

v0.18.1 activated the ESM build for common tooling. See https://docs.sheetjs.com/docs/installation/frameworks for more details. The literal equivalent of the old import is

// new way
import * as XLSX from "xlsx";
import * as cptable from 'xlsx/dist/cpexcel.full.mjs';
XLSX.set_cptable(cptable);

Tree Shaking is supported with the ESM build!. If a project is only exporting XLSX files (using utils and writeFile), using named imports with writeFileXLSX drastically reduces bundle size:

import { utils, writeFile } from "xlsx";

Sheet.js is providing the following warning in the Angular CLI for the new v10 release:

Screen Shot 2020-06-29 at 12 12 16 PM

Starting with Angular 10 the Angular CLI now provide warnings for CommonJS modules. Read more about it here: https://blog.angular.io/version-10-of-angular-now-available-78960babd41

When you use a dependency that is packaged with CommonJS, it can result in larger slower applications. Starting with version 10, we now warn you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.

And here: https://angular.io/guide/build#configuring-commonjs-dependencies

It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes. Instead, it is recommended that you use ECMAScript modules in your entire application. For more information, see How CommonJS is making your bundles larger

They reference the following article regarding the issues with CommonJS: https://web.dev/commonjs-larger-bundles/

Additionally I’ve seen a few discussions by Angular staff members on Github discussing potentially dropping CommonJS support by default, and making it an opt-in feature in the future.

I realize the Angular team is taking a very strong armed approach here, but their reasoning seems solid. Needless to say I’d love to see ESM support if possible. Thanks!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:44
  • Comments:21 (6 by maintainers)

github_iconTop GitHub Comments

12reactions
techmaster242commented, Nov 6, 2020

I’m running into this same issue. The resulting file is very large (725kB) and slow. If we could get this working as an ES module, it would help a lot.

9reactions
itayperrycommented, Sep 7, 2020

Was this issue solved? I work with Angular as well 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using ECMAScript modules (ESM) with Node.js
Learn about using ES modules in Node.js today and get a closer look at how you can migrate your codebase to make use...
Read more >
ECMAScript modules | Node.js v19.3.0 Documentation
Node.js fully supports ECMAScript modules as they are currently specified and provides interoperability between them and its original module format, ...
Read more >
ECMAScript Modules - webpack
Requests to packages e.g. import "lodash" are still supported. Only the "default" export can be imported from non-ESM. Named exports are not available....
Read more >
What does it take to support Node.js ESM? – The Guild
I have worked on all The Guild's libraries and graphql-js to support ESM. Here is how you can do it too.
Read more >
How we employed the new ECMAScript Module Support in ...
CommonJS ( require ) loads the modules synchronously. ESM ( import ), on the other hand, can be asynchronous, which allows for better ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found