Upgrade to Babel 7

[jonathanmoore]

Problem

Babel 7 introduced a lot of new, useful functionality, but most of all I would like to take advantage of useBuiltIns: 'usage' to help with polyfills. Currently, with Slate you either have to manually keep up with polyfills one by one as you develop or take the shotgun approach of importing all polyfills for the target browsers regardless of usage. https://babeljs.io/docs/en/babel-preset-env#usebuiltins-usage-experimental

With this new approach, Babel will automatically look for code that needs a polyfill and import the correct modules.

// In
var a = new Promise();

// Output
import "core-js/modules/es6.promise";
var a = new Promise();

More Information

I did take an initial attempt at migrating to Babel 7 locally, and after updating slate-tools the polyfills were loading as expected. However, I was running into additional conflicts with Shopify/babel-preset-shopify in the .babelrc file as well as live-reloading.

Upgrading will probably be a big effort, but it will help tremendously with development and even theme-scripts where a developer might assume the browser support is already there. For example: https://github.com/Shopify/theme-scripts/blob/43383342be21ab42b5fe4c78be98ec3655279ef5/packages/theme-cart/README.md#browser-support

[justinmetros]

babel-preset-shopify v17.0.0 was just released w/ Babel version 7.

Also tried a local move to Babel but slate-tools wasn't liking it:

ERROR in ./scripts/templates/index.js
Module build failed (from ../node_modules/@shopify/slate-tools/node_modules/babel-loader/lib/index.js):

[macrozone]

yes slate-tools has dependencies on old babel version and should be upgraded.

also very dangerous, if someone will just add babel-preset-shopify using the latest version, it will break.

Its very strange, that this has been released, while there is no support for babel 7 on the rest of shopify.

forcing babel 6 also comes with a lot of headache. For example, i tried to add storybook to my template project, which uses babel 7. So you end up with duplicated babelrcs, one for deprecated babel 6 (shopify) and one for storybook (current babel 7).

[ghost]

hi, Any updates with upgrade packages ?

[ryaninvents]

@macrozone do you have an example of a working Storybook configuration? I'm in the exact same situation

[EDIT:] Managed to get it working by creating this .storybook/webpack.config.js:

const babelrc = {
  // Don't read from root `.babelrc` since it's incompatible
  babelrc: false,

  // Override default config
  presets: ['react-app'],
  plugins: []
}

module.exports = async ({config,mode}) => {
  config.module.rules.forEach((rule) => {
    const matchingLoader = rule.use && rule.use.find(({loader}) => loader === 'babel-loader')
    if (!matchingLoader) return;
    Object.assign(matchingLoader.options, babelrc);
  });
  return config
}

You'll need to ensure that your rebuilt config does the same thing as the Shopify config, so it's not ideal, but at least it's not a showstopper anymore for using Storybook.