React-stripe-elements: Syntax Error

[Dasyel]

Summary

I'm following the steps in your README to setup Stripe elements in my React app but it won't compile.

./node_modules/react-stripe-elements/src/components/Element.js
SyntaxError: <mypath>/node_modules/react-stripe-elements/src/components/Element.js: Unexpected token, expected "," (5:13)

  3 | import PropTypes from 'prop-types';
  4 | import isEqual from '../utils/isEqual';
 >5 | import {type ElementContext, elementContextTypes} from './Elements';
    |              ^
  6 | 
  7 | type Props = {
  8 |   id?: string,

Obviously I'm missing some dependency or I'm on a wrong version of React. So it seems the guide in your README is not complete with all required steps. What am I missing here?

[atty-stripe]

Can you share what your code looks like (specifically, where you are importing components from react-stripe-elements)? Also, does your build tool attempt to compile files within node_modules?

This looks like an issue with your build tool attempting to do so, and being unable to parse the type ElementContext import, which is for the Flow type system used internally by this project.

[Dasyel]

I've set my project up with create-react-app. I didn't change any of the advanced stuff around building. I've also not had this problem with any other library yet. But it sounds very likely that it's trying to compile the node_modules.
I will look into if that's what's going on and if so how to turn it off.

[atty-stripe]

Ok! If you can create a repo with instructions on a simple reproduction, happy to help debug.

[Dasyel]

Ah I figured it out. Stupid mistake. My IDE added an import
import injectStripe from "react-stripe-elements/src";
instead of
import injectStripe from "react-stripe-elements";

Sorry for wasting your time there.