OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Error: "React.jsx: type is invalid -- expected a string or a class/function but got: object" when implementing reCAPTCHA in a React Remix app

  • Thread starter Thread starter desroy maxwell
  • Start date Start date
D

desroy maxwell

Guest
I'm working on integrating Google reCAPTCHA into my React Remix application, but I'm encountering an error that I can't seem to resolve. The error message I'm getting is:

Code:
import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

export default function MyComponent() {
  const handleRecaptchaChange = (value) => {
    setRecaptchaValue(value);  };

  return (
    <>
      <ReCAPTCHA 
        sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY} 
        onChange={handleRecaptchaChange} 
      />
    </>
  );
}

package.json
{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remix": "^1.0.0",
    "react-google-recaptcha": "^2.1.0"
  }
}

Using the .env variable prevents the app from loading, and I get the same error. However, when I try hardcoding the sitekey, it throws the same error but as a warning. I haven't been able to find any solution when searching online. My .env variable I also correctly labeled. Thanks in advance for any solution to thus issue.

Tried moving the recaptcha to its own component the importing. still throwing the same error. tried import { ReCAPTCHA } from 'react-google-recaptcha'; as to import ReCAPTCHA from 'react-google-recaptcha'; this prevented the app from loading.

<p>I'm working on integrating Google reCAPTCHA into my React Remix application, but I'm encountering an error that I can't seem to resolve. The error message I'm getting is:</p>
<pre><code>import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

export default function MyComponent() {
const handleRecaptchaChange = (value) => {
setRecaptchaValue(value); };

return (
<>
<ReCAPTCHA
sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
onChange={handleRecaptchaChange}
/>
</>
);
}

package.json
{
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2",
"remix": "^1.0.0",
"react-google-recaptcha": "^2.1.0"
}
}
</code></pre>
<p>Using the .env variable prevents the app from loading, and I get the same error. However, when I try hardcoding the sitekey, it throws the same error but as a warning. I haven't been able to find any solution when searching online. My .env variable I also correctly labeled. Thanks in advance for any solution to thus issue.</p>
<p>Tried moving the recaptcha to its own component the importing. still throwing the same error. tried import { ReCAPTCHA } from 'react-google-recaptcha'; as to import ReCAPTCHA from 'react-google-recaptcha'; this prevented the app from loading.</p>
 

Latest posts

Top