can't import a component which uses '@emotion/core`

When I directly use @emotion/core in a component. It works fine. But whenever I want to reuse that component (which uses @emotion/core) I am getting a parcel error process is not defined

Here is my babelrc

{
  "plugins": [
    "@babel/plugin-transform-modules-commonjs",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    ["@babel/plugin-proposal-optional-chaining", {}, "chain"],
    ["@babel/plugin-transform-runtime", { "regenerator": true }],
    ["emotion"],

    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "src": "./src"
        }
      }
    ]
  ],
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

and this is my Spinner component

import React from "react";
import { css } from "@emotion/core";
import BeatLoader from "react-spinners/BeatLoader";

const override = css`
  display: block;
  margin: 0 auto;
  text-align: center;
`;

const Spinner = () => {
  return <BeatLoader css={override} size={15} color="#38a169" />;
};

export default Spinner;

problem is, I can't import this spinner component to another component!