ReferenceError：即使我安装了依赖项，React 也未定义

Question

当我使用“EmailJS”添加联系表单时出现错误。我可以看到 Package.json 上的依赖关系看起来很好，但它说未定义。

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

我按照建议更改了导入格式，

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

也重新安装了，但是错误仍然没有解决。

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

任何人都可以告诉我这里缺少什么吗？

Answer 1

首先检查您是否正在使用 babel 并做出反应 17. 将 "runtime" : "automatic" 添加到配置中。

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

}

如果没有，请检查添加联系表单时实际更改的文件。主要在 babel 或 webpack 等配置文件中。

如果使用 webpack 并在 webpack.config.json 中得到这样的配置

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

去掉它

如果一切都失败了，记住反应没有被捆绑，而是可能正在调用，window.react所以只需添加

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