CODEWITHSUNDEEP
reactjsdependencies
Han
Han

Reputation: 628

ReferenceError: React is not defined even if I have installed dependencies

The error comes out when I added Contact Form by using 'EmailJS'. I can see the dependencies on Package.json look fine, but it says not defined.

    "react": "^17.0.2",
    "react-dom": "^17.0.2",

I changed the importing format as following as advised,

import React from 'react';
import ReactDOM from 'react-dom';

also re-installed it, But, still the error is not fixed.

ReferenceError: React is not defined
    at Object.children (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\index.js:3460:62)
    at BaseAccordion.render (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\index.js:3595:23)
    at processChild (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
    at resolve (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at Object.renderPage (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\render.js:54:854)
    at Function.getInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\_document.js:791:19)
    at Function.getInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\.next\server\pages\_document.js:1373:85)
    at loadGetInitialProps (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\lib\utils.js:5:101)
    at renderToHTML (C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\render.js:54:1145)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\next-server.js:112:97
    at async C:\Users\Han\Desktop\andamilo\24-shopifystorehelp\node_modules\next\dist\next-server\server\next-server.js:105:142

anyone can advise what I am missing here?

Upvotes: 7

Views: 13483

Answers (1)

Ashwin Chandran
Ashwin Chandran

Reputation: 351

first check if you are using babel and react 17. Add "runtime" : "automatic" to the config.

 {
 "presets": ["@babel/preset-env", ["@babel/preset-react", {
    "runtime": "automatic"
 }]]

}

if not, check the files that actually change when you add contact form. Mostly in config files like babel or webpack.

if using webpack and got a config like this in webpack.config.json

externals: {
'react': 'React'
},

remove it

If all else fails, remember react is not being bundled instead might be calling window.react so just add

import React from 'react';
import ReactDOM from 'react-dom';
window.React = React

Upvotes: 14

Related Questions