search

ConvertKit / convertkit-react

React-based library to easily plug ConvertKit forms to your React applications
46 stars 4 forks source link

× Error: Invalid hook call. #5

Open dylannirvana opened 3 years ago

dylannirvana commented 3 years ago

Trying to bring Convertkit form into a React application. Directly using the JavaScript embed provided by CK <script async data-uid="e9274113f5" src="https://astounding-creator-7935.ck.page/e9274113f5/index.js"></script> does not work as-is in React. Using convertkit-react, the connection is made but the template is not being brought in. I am getting: Error: Invalid hook call.

The example usage does not show the code in relation to the render() function.

This is the standalone form https://astounding-creator-7935.ck.page/e9274113f5 


import Container from 'react-bootstrap/Container'
import ConvertKitForm from 'convertkit-react'

const MY_FORM_ID = 2248904
class Convertkit extends React.Component {   

      render() {  
        const config = {
            formId: MY_FORM_ID,
            template: 'cocoa',
            // emailPlaceholder: 'Enter an email address',
            // submitText: 'Sign up',
          }

          return (
                <Container className="section">
                    <p>Yo</p>
                    <ConvertKitForm {...config} />

                </Container>                                  
        )
    }
}

export default Convertkit;```
dylannirvana commented 3 years ago

Simplified version below still gets ERROR: invalid hook call


import ConvertKitForm from 'convertkit-react'

function Convertkit() {
    const MY_FORM_ID = 2248904
    const config = {
        formId: MY_FORM_ID,
        template: 'cocoa',
        // emailPlaceholder: 'Enter an email address',
        // submitText: 'Sign up',
      }

      return (
        <ConvertKitForm {...config} />
      )
  }

export default Convertkit;```
rug1 commented 3 years ago

I'm getting the same problem...the link to the react docs in the error message makes me think that it's either this library has listed the dependency incorrectly which then breaks our dependency tree or the library is using hooks incorrectly. Would be great to get a fix in for this. My project is using react v17.

Screenshot 2021-05-08 at 20 21 45
josephrexme commented 3 years ago

@perrycipolloni I'm sorry convertkit-react does not support versions of React that do not support hooks. You didn't specify what version you are using but I'm assuming that from your need to use it in a class, it's probably an older version of React you have. Let me know if I'm wrong with that assumption.

@rug1 I might need a little more clarity on your setup. Could it be that you have different versions of React and ReactDOM? This package relies on your installed version of React and has no other dependencies.

josephrexme commented 3 years ago

I'll close this for now as I'm unable to reproduce on recent versions of React

josephrexme commented 3 years ago

Was able to reproduce this Today and noticed that using a different patch version from the one the library uses (17.0.2) still causes the error for React 17 users. Will work on a fix soon

sharmaed commented 3 years ago

Curious, do we have an update for this error? Or good work around in the meantime?

hinsencamp commented 1 year ago

Issue still exists. @josephrexme any plans to fix this?

schematical commented 10 months ago

I am getting this issue with the following:


    "react": "^18.2.0",
    "react-cookie": "^4.0.3",
    "react-dom": "^18.2.0",
    "react-ga4": "^2.0.0",
    "react-https-redirect": "^1.1.0",
    "react-owl-carousel": "^2.3.1",
    "react-router-component": "^0.39.1",
    "react-router-dom": "^6.21.0",
    "react-scripts": "^5.0.1",
Also this only happens when I add a `theme` option.