Beware of the import

When you are working on an existing project for a year or more, at one point you change your webpack or babel configurations rarely. You add something here or optimize their.

But what if you change scope and start working on a rather outdated setup?

Here is me, interested in adding Storybook 😀 and ending up updating Babel 6 to 7 and trying to understand why existing imports are not working anymore.

The great news is, babel as an upgrade script which updates your package.json 🎉

npx babel-upgrade --write --install

Does great things. It updates your old babel dependencies to the new ones. Yet somehow it didn't change my .babelrc file so I was left alone trying to understand what I really need.

When I opened it, I saw this:

So here we are left with this package.json:

As I went through all plugin documentation pages I discovered that I don't need any of them except three.

Once I changed that, the application was loading and everything looked fine until I hit a strange error:

"export 'timezone' was not found in 'Config/config'

And this is shown in 60+ files. Something that worked before isn't anymore.

So let's check what this config file is all about:

import _ from "lodash";

const config = [...] // a lot of configuration

module.exports = config

So this code doesn't seem to work anymore. After playing around with export default for 2 hours I realized one really important thing:

The curly brackets in import {} are different than the destructuring {} used for example in const { timezone } = config

🤯🤯🤯🤯🤯

I'm not sure if a babel package or simple configuration is missing to allow the behavior before. It looks like in babel 6 + plugins using module.exports allowed after compilation to use named imports.

If anyone has a tip, please comment below 😃