Open jonathanmoore opened 5 years ago
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):
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).
hi, Any updates with upgrade packages ?
@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.
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-experimentalWith this new approach, Babel will automatically look for code that needs a polyfill and import the correct modules.
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