× Error: Invalid hook call.

[dylannirvana]

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]

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]

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.

[josephrexme]

@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]

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

[josephrexme]

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]

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

[hinsencamp]

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

[schematical]

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.