모듈을 찾을 수 없음: 오류:'react-dom/client'를 확인할 수 없습니다.

모듈을 찾을 수 없음: 오류:'react-dom/client'를 확인할 수 없습니다.

아래 패키지와 함께 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

지원서를 컴파일하는 데 문제가 있는 이유를 알려주세요.

나에게 효과가 있었던 최종 솔루션은 단순히 React 18을 변경하는 것이었습니다.index.js다음 주소로 파일을 제출합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

종속성에 이전 버전의 "react" 및 "react-dom"이 여전히 있습니다.해결 방법:

1. 다음 두 행을 삭제합니다.

    "react": "^17.0.1",
    "react-dom": "^17.0.1",

2. 대체 항목:

    "react": "^18.1.0",
    "react-dom": "^18.1.0",

3. "node_module" 폴더를 삭제합니다.
4. 하다npm install그러면 문제가 해결되고 앱이 반응하도록 업데이트될 것입니다.

React 및 react-dom을 다운그레이드해야 할 수 있습니다.다음은index.js:

반응 17 예:

import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";

const root = document.getElementById("root");
render(<App />, root);

리액션 18의 예:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

요약하면 React 17(내 버전은 17.0.2)을 사용하는 경우 index.js는 다음과 같아야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
 document.getElementById('root')
);

React 18을 사용하는 경우 index.js 파일은 다음과 같습니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>
);

리액트 18 프로젝트를 리액트 17 프로젝트로 다운그레이드 했을 때 문제가 있었습니다.나는 사용했다.

npm install react@17 react-dom@17

타이프 스크립트 프로젝트의 경우,

npm install react@17 @types/react@17 react-dom@17 @types/react-dom@17

이 문제를 해결하기 위한 간단한 해결책은 먼저 리액트 버전을 업데이트하는 것입니다.React 18의 index.js를 변경합니다.

프로젝트의 루트 디렉터리에서 터미널을 열고 다음 명령을 실행하십시오.

npm install react-dom@syslog react@syslog

React 18을 설치한 후에도 여전히 오류가 발생할 경우 index.js 파일을 다음과 같이 변경해야 합니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

좋아! 일단은 이렇게 했어.React ^16.14.0에서 이 문제가 발생하였습니다.index.js 파일의 "react-dom/client"에서 "import ReactDOM"에서 "client"를 삭제했습니다.저도 댓글 달았어요

    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(
    <React.StrictMode>
    <App />
    </React.StrictMode>
    );

그것은 거기에 있었고 사용되었습니다.

  ReactDOM.render(
    <App />,
  document.getElementById("root")
);

대신.또, 코멘트 아웃

import reportWebVitals from "./reportWebVitals"; and reportWebVitals();

또한 이 작업을 수행하면 코드가 성공적으로 컴파일됩니다.**

나도 비슷한 문제가 있었는데 그걸 더해서 해결했어.

 "noImplicitAny": false

tsconfig.json에서

리액트 버전 18.1(타이프 스크립트 포함)의 경우 이 방법이 적합합니다.

    import React from "react";
    import { createRoot } from "react-dom/client";
    import reportWebVitals from "./reportWebVitals";
    import App from "./App";
    const root = createRoot(
        document.getElementById("root") as HTMLElement
    );
    root.render(
       <React.StrictMode>
          <App />
       </React.StrictMode>
    );
    reportWebVitals();

나의 문제는 패키지도 업그레이드되지 않는 유형이었다.@type imports를 새로 업데이트해야 했습니다.react그리고.react-dom패키지.

yarn add @types/react @types/react-dom

언급URL : https://stackoverflow.com/questions/71913692/module-not-found-error-cant-resolve-react-dom-client