Trying to make it work with babel-preset-env

Babel-env let you determine the plugins and polyfills you need based on your targeted browser, which is really cool https://github.com/babel/babel/tree/master/experimental/babel-preset-env

But I’m having a hard time trying to make it work with universal-import.

If I use a conventional .babelrc file like this, it works perfectly:

{ 
  "presets": ["es2015", "react", "stage-2"], 
  "plugins": [["emotion", { "inline": true }], "universal-import"], 
  "env": { 
    "development": { 
      "plugins": ["react-hot-loader/babel"] 
    } 
  } 
} 

But when I switch to babel-env, universal-import fails to transpile the imports:

This is my current .babelrc:

{
  "env": {
    "devClient": {
      "presets": [
        ["env", {
          "targets": { "browsers": ["android >= 4.4", "ios_saf > 9", "and_chr >= 56"] },
          "useBuiltIns": "usage"
        }],
        "react"
      ],
      "plugins": [["emotion", { "inline": true }], "universal-import", "react-hot-loader/babel"],
    },
    "devServer": {
      "presets": [
        ["env", {
          "targets": { "node": "current" }
        }],
        "react"
      ],
      "plugins": [["emotion", { "inline": true }], "universal-import"],
    }
  }
}

Any idea?

[luisherranz]

also, I see you’re using emotion–have you tried their extractStatic feature? Would love to see an article about using extracStatic and this setup’s capability to split stylesheets.

Yes. I am migrating a project from nextjs and styled-components to react-universal and emotion 😃

My first step is to use emotion in inline mode and once everything is working try the switch to extractStatic to see if there’s an improvement in performance. As you can see in our babel-env conf, we are not worried about IE11, although I dislike having to use css variables for dynamic styles, instead of javascript variables.

[faceyspacey]

it was. but you can’t really develop these modern babel-based apps without at least stage 2.