jackmoore/autosize

ESM version uses ES6+ syntax other than import and export

andersk opened this issue · 2 comments

The ESM version of autosize added by #384 uses ES6+ syntax (other than import and export) that cannot be parsed as ES5.

$ es-check --module es5 src/autosize.js 
ES-Check: there were 1 ES version matching errors.

          ES-Check Error:
          ----
          · erroring file: src/autosize.js
          · error: SyntaxError: The keyword 'const' is reserved (1:0)
          · see the printed err.stack below for context
          ----

          SyntaxError: The keyword 'const' is reserved (1:0)

You might at first assume this isn’t a problem since import and export are themselves not ES5. But it is a problem, for the following reason. When bundling autosize into an application with webpack, webpack will automatically select the ESM version of autosize because of pkg.module. It will compile away the import and export syntax, but leave any other ES6+ syntax in place. Therefore, that application will no longer work in ES5-only browsers.

See also the pkg.module specification: “pkg.module will point to a module that has ES2015 module syntax but otherwise only syntax features that the target environments support.”

Cc @jorenbroekema

I think that webpack confuses the 'main' and 'module' entries in package.json. Other packages I use only have 'main' in their package.json. 'module' in this package points at the uncompiled file, and that is included. I have the same problem, and for now have to write

import autosize from 'autosize/dist/autosize.min';

Thank you @andersk, very helpful and concise description of the issue. Resolved by creating a new bundle for modules.