Compile time exceptions

[theKashey]

Trying to apply this preset in different forms and it throws different errors.

The configuration which works:

const modernize = [
    path.resolve(preset, './plugins/transform-umd-to-cjs'),
    // Currently disabled, causes problems with non-CJS files:
    // cjs && path.resolve(preset, './plugins/transform-cjs-to-esm'),
    [path.resolve(preset, './plugins/transform-arguments'), { loose }],
    // path.resolve(preset, './plugins/transform-destructuring'),
    // path.resolve(preset, './plugins/transform-classes'),
    // path.resolve(preset, './plugins/transform-methods'),
    // too broken:
    // path.resolve(preset, './plugins/transform-mangle-identifiers'), // the only one disabled before
    path.resolve(preset, './plugins/transform-fallbacks'),
    // path.resolve(preset, './plugins/transform-iife-arrows'),
    path.resolve(preset, './plugins/transform-implicit-scope'),
    path.resolve(preset, './plugins/transform-array-spread'),
    // path.resolve(preset, './plugins/transform-template-literals'),
    // path.resolve(preset, './plugins/transform-optimize-webpack'),
    // path.resolve(preset, './plugins/transform-remove-polyfills'),
    // module && path.resolve(preset, './plugins/transform-implicit-strict')
  ].filter(Boolean);

Trying to compile on "result bundles" results in not very replicable errors (firstly in remove-polyfills), so I've ended applying this preset via webpack loader per every file. Just a few caused an error.

---

• react-router-dom@5.2.0 - react-router-dom/esm/react-router-dom.js

• react-redux@7.1.0 - react-redux/es/connect/selectorFactory.js

• connected-react-router@6.5.2 - connected-react-router/esm/selectors.js

  TypeError: react-router-dom/esm/react-router-dom.js: Cannot read property 'arguments' of undefined
  at visitParam (babel-preset-modernize/dist/plugins/transform-destructuring/index.js:232:34)

• lodash-es@4.17.15

  /lodash-es/_cloneBuffer.js: Cannot read property 'node' of undefined
  at isValidRefPath (node_modules/babel-preset-modernize/dist/plugins/transform-destructuring/index.js:163:45)

• core-js@2.6.10

  core-js/library/modules/es6.array.from.js: Cannot read property 'end' of undefined
  at NodePath.getSource (@babel/traverse/lib/path/introspection.js:145:12)
  at isOptionalParamCheck (babel-preset-modernize/dist/plugins/transform-classes/index.js:1:10755)

• react-helmet-async@0.2.0

  react-helmet-async/lib/index.js: You passed `path.replaceWith()` a falsy node, use `path.remove()` instead
  at NodePath.replaceWith (/Users/akorzunov/dev/Z/arnica/urge/the-urge-reactjs/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/replacement.js:115:11)
  at PluginPass.Identifier (/Users/akorzunov/dev/Z/arnica/urge/the-urge-reactjs/node_modules/babel-preset-modernize/dist/plugins/transform-classes/index.js:1:12633)

---

interesting failure found at intersection-observer@0.7.0 the code

// Exit early if we're not running in a browser.
if (typeof window !== 'object') {
  return;
}

caused an error

Module parse failed: 'return' outside of function (12:2)
You may need an appropriate loader to handle this file type.
|  */
| if (false) {
>   return;
| }

After fixing all problems (removing plugins causing errors and changing some scripts) 28kb were removed from a total 1.5mb bundle. Size comparison can be found at https://gist.github.com/theKashey/45050f6fc341e0e324ac4fbee46a5c72

[developit]

Thanks for doing such a thorough investigation @theKashey!

FWIW the preset is less effective when applied per-module because it can't apply cross-module knowledge when removing polyfills or helper functions. It does produce useless error stacks though, that's for sure.

The early exit issue is actually just because you're applying this to a non-module file - switching Babel-loader's options to include sourceType:'unambiguous' would fix that.

I'll try to look into the per-library errors you uncovered. Rough edges like these are why I sat on this code for so long :P