我正在使用react与以下软件包:
{
"name": "demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^13.5.0",
"h3-js": "^3.7.2",
"leaflet": "^1.7.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-leaflet": "3.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我的index.js
如下所示:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
我的App.js
如下所示:
import React from "react";
import { render } from "react-dom";
import LeafletMap from "./Map";
class App extends React.Component {
state = { resolution: 8, kRing: 0 };
constructor(props) {
super(props);
this.state = { resolution: 8, kRing: 0 };
}
render() {
return (
<div>
<LeafletMap
resolution={this.state.resolution}
kRing={this.state.kRing}
/>
Resolution:
<input
type="number"
min={0}
max={15}
onChange={this.onChangeResolution}
defaultValue={8}
/>
<br />
K Rings:
<input
type="number"
min={0}
max={100}
onChange={this.onChangeKRings}
defaultValue={0}
/>
</div>
);
}
onChangeResolution = (e) => {
this.setState({ resolution: Number.parseInt(e.target.value) });
};
onChangeKRings = (e) => {
this.setState({ kRing: Number.parseInt(e.target.value) });
};
}
export default App;
当我使用npm run start
运行我的应用时,我收到以下错误:
Compiled with problems:X
ERROR in ./src/index.js 5:0-40
Module not found: Error: Can't resolve 'react-dom/client' in '/home/Desktop/Code/demo_app/src'
我重新安装了所有软件包,它也列在npm list
:
> npm list
demo_app@0.1.0 /home/Desktop/Code/demo_app
├── @testing-library/jest-dom@5.16.4
├── @testing-library/react@13.0.1
├── @testing-library/user-event@13.5.0
├── h3-js@3.7.2
├── leaflet@1.7.1
├── react-dom@17.0.1
├── react-leaflet@3.0.2
├── react-scripts@5.0.1
├── react@17.0.1
└── web-vitals@2.1.4
有什么建议,为什么我有问题编译我的申请?
9条答案
按热度按时间vc6uscn91#
对我有效的最终解决方案是将React 18
index.js
文件更改为以下内容:64jmpszr2#
您的依赖项中仍然有旧版本的“react”和“react-dom”。
1.删除以下两行:
1.将其改为:
1.删除“节点模块”文件夹
npm install
这应该可以解决您的问题,并更新您的应用以响应18k10s72fa3#
您可能需要降级React和react-dom,下面是
index.js
:React17示例:
React18示例:
e5nqia274#
总之,如果您使用的是React 17(我的版本是17.0.2),您的index.js必须如下所示:
如果您使用的是React 18,则index.js文件应如下所示
我面临的问题,当我降级我的React18项目React17项目。我用,
对于 typescript 项目,
pgx2nnw85#
一个简单的解决方案是首先更新react版本。为React 18更改index.js。
在项目的根目录中打开终端,然后运行以下命令:
npm安装react-dom@最新react@最新
安装React 18后,如果您仍然遇到错误,您必须将index.js文件更改为如下所述:
rkkpypqq6#
好的!首先这是我所做的。我在React ^16.14.0上遇到了这个问题。我从index.js文件中的“react-dom/client”中删除了“client”。我还注解掉了
它就在那里
而不是。另外,注解掉
完成此操作后,您的代码应能成功编译。**
zujrkrfu7#
我遇到过类似的问题,我通过添加以下内容解决了它
在tsconfig.json上
ztmd8pv58#
对于react版本18.1(带有typescript),这对我来说很有效
k75qkfdt9#
我的问题是types包也没有升级,我不得不为新的
react
和react-dom
包更新@type导入。