Compiled with problems

[Alexva397]

Hello, I am trying to implement basic usage of the SDK in a react app. I used THIS that square published to youtube as a guide. when I install my dependencies
yarn add react-square-web-payments-sdk @square/web-sdk
and attempt to use the library like so:

function App() {
  return (
    <div className="App">
      <SquarePaymentsForm
        applicationId='xxxx'
        locationId='xxxx'
        cardTokenizeResponseReceived={(token) => {
          console.log(token);
        }}
      >
        <CreditCardInput/>
      </SquarePaymentsForm>
    </div>
  );
}

export default App;

I receive the following errors:

Any help would be greatly appreciated!

Thanks
Alex V

[danestves]

Hi @Alexva397 can you make a reproduction of the error here 👉 https://next.new/, so we can give you more support about it reading the code

[Alexva397]

Not in the react app, which is what my final implementation will be in. Is this required?

[danestves]

If you are using next is required to use it, but I see that you are using a plain create-react-app that I think is not supporting esm modules, can you run npm install react-square-web-payments-sdk@canary and try with that version?

[Alexva397]

Sorry for the late response, Unfortunately the same issue, with a slightly different error message.

[johnbona]

@Alexva397 I too encountered the same issue (it's Webpack 5) and created a PR for it: square/web-sdk#67

[Alexva397]

Thanks for the help! @johnbona @danestves