v10 or @emotion/core doesn't run without babel-plugin-transform-inline-environment-variables

• emotion version: “@emotion/core”: “^10.0.5”
• react version: ^16.7.0-alpha.2

Relevant code:

import React from "react";

const Login = () => {
  return (
    <section>
      <span
        css={{
          color: "blue"
        }}
      >
        Login
      </span>
    </section>
  );
};

export default Login;

What you did: I followed the documentation and installed emotion and the css prop babel plugin. I then configured .babelrc also as mentioned in documentation. FYI., I am using parcel.js.

1. npm i --save @emotion/core
2. npm i -D @emotion/babel-preset-css-prop
3. .babelrc:

"presets": [
  [
    "@emotion/babel-preset-css-prop",
    {
      "autoLabel": true,
      "labelFormat": "[local]",
      "useBuiltIns": false,
      "throwIfNamespace": true,
      "sourceMap": false
    }
  ]
]

What happened: I get the following error in browser console when I navigate to the login page: process is not defined

Reproduction: What you did section pretty much captures reproduction steps.

Problem description: Looks like v10 needs an explicit installation of babel-plugin-transform-inline-environment-variables which was not needed in previous versions.

Suggested solution: Bundle babel-plugin-transform-inline-environment-variables in babel-plugin-emotion

[louiscenter]

@karol-majewski I had the same issue too. The general feeling I got was that babel-preset-css-prop doesn’t play ball with parcel right now, so I looked into the preset’s source code and adapted it to a fresh .babelrc which I’m now using instead.

{
  "plugins": [
    [
      "transform-inline-environment-variables"
    ],
    [
      "babel-plugin-jsx-pragmatic",
      {"export": "jsx", "module": "@emotion/core", "import": "___EmotionJSX"}
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {"pragma": "___EmotionJSX", "pragmaFrag": "React.Fragment"}
    ],
    [
      "emotion"
    ]
  ]
}

[karol-majewski]

For anyone interested: adding "transform-inline-environment-variables" in the beginning of the list of plugins in .babelrc takes care of the process is not defined error.

However, the @emotion/babel-preset-css-prop preset is still not applying the pragma for me.