search

formspree / formspree-js

The fastest way to hook up a React form
https://formspree.io/javascript
MIT License
63 stars 12 forks source link

Error compiling with @formspree/react #27

Closed hnhegde closed 1 year ago

hnhegde commented 1 year ago

Is there an existing issue for this?

Formspree React Version

2.4.1

Formspree Core Version

2.8.1

Current Behavior

npm start throws this error at compile stage:

Failed to compile.

/node_modules/@formspree/react/dist/index.mjs
Can't import the named export 'CardElement' from non EcmaScript module (only default export is available)

Expected Behavior

Compile successfully.

Steps To Reproduce

  1. npm i @formspree/core --save-dev
  2. npm i @formspree/react
  3. npm start will throw the error mentioned.

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

joepreludian commented 1 year ago

hello @hnhegde. How are you? I faced the same problem, but I was looking here and I solved the problem. Would you mind to drop the version of your npm?

Mine was 16.x and react was 17.0.2. After upgrading the node to the latest stable version it worked for me. 18.x.

Please let me know if it worked for you.

hnhegde commented 1 year ago

Ah...I downgraded react to 17 and npm to 16 and it worked for me! Sorry, I missed updating this ticket.

On Thu, Apr 13, 2023 at 8:13 AM Jonhnatha Trigueiro < @.***> wrote:

hello @hnhegde https://github.com/hnhegde. How are you? I faced the same problem, but I was looking here and I solved the problem. Would you mind to drop the version of your npm?

Mine was 16.x and react was 17.0.2. After upgrading the node to the latest stable version it worked for me. 18.x.

Please let me know if it worked for you.

— Reply to this email directly, view it on GitHub https://github.com/formspree/formspree-js/issues/27#issuecomment-1506250478, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABF3SHNBFN6S4VMEUYCC3CLXA5R43ANCNFSM6AAAAAAVQWUJYM . You are receiving this because you were mentioned.Message ID: @.***>

-- Best Regards, Harsha N Hegde

colevscode commented 1 year ago

Hi sorry about the delay on this. I'm trying to reproduce. Are you using a react framework, like nextjs? What does the npm start script do?

hnhegde commented 1 year ago

I am using standard create-react-app and the OOB npm start script.

-- Best Regards, Harsha N Hegde

On Fri, Apr 14, 2023, 00:14 Cole @.***> wrote:

Hi sorry about the delay on this. I'm trying to reproduce. Are you using a react framework, like nextjs? What does the npm start script do?

— Reply to this email directly, view it on GitHub https://github.com/formspree/formspree-js/issues/27#issuecomment-1507454486, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABF3SHPPNUICTD7PGPQHTJTXBBCSTANCNFSM6AAAAAAVQWUJYM . You are receiving this because you were mentioned.Message ID: @.***>

bhongy commented 1 year ago

@hnhegde can you share a snippet of the relevant code?

From the error, I suspect you're using CardElement.

I tried with React 18 and could not reproduce. Below is my setup:

Resolved versions of Stripe depedencies through @formspree/react

<FormspreeProvider stripePK="pk_test_...">
    <form>
      <CardElement />
      <button>Pay</button>
    </form>
</FormspreeProvider>

Also tried in codesandbox with CRA and couldn't repro. https://codesandbox.io/s/formspree-js-testing-gqzq99

hnhegde commented 1 year ago

I am not using CardElement in this component. I have it elsewhere though. My form is exactly as in: https://help.formspree.io/hc/en-us/articles/360053108134-Build-a-Contact-Form-with-React

On Thu, Apr 13, 2023 at 8:13 AM Jonhnatha Trigueiro < @.***> wrote:

hello @hnhegde https://github.com/hnhegde. How are you? I faced the same problem, but I was looking here and I solved the problem. Would you mind to drop the version of your npm?

Mine was 16.x and react was 17.0.2. After upgrading the node to the latest stable version it worked for me. 18.x.

Please let me know if it worked for you.

— Reply to this email directly, view it on GitHub https://github.com/formspree/formspree-js/issues/27#issuecomment-1506250478, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABF3SHNBFN6S4VMEUYCC3CLXA5R43ANCNFSM6AAAAAAVQWUJYM . You are receiving this because you were mentioned.Message ID: @.***>

-- Best Regards, Harsha N Hegde

bhongy commented 1 year ago

Thank you! I couldn't repro with that example code either. I'll close this issue, since it doesn't seem to be widespread. We can reopen if we have more information about how to reproduce it.

Thanks for reporting it, @hnhegde!