React.js에서 모듈 (찾을 수 없음)을 해결할 수 없습니다.

내가 명백한 질문을하고 있다는 것을 믿을 수 없지만 콘솔 로그에 여전히 오류가 있습니다.

콘솔은 디렉토리에서 모듈을 찾을 수 없다고하는데 적어도 10 번 이상 오타를 확인했습니다. 어쨌든 여기에 구성 요소 코드가 있습니다.

헤더 를 루트 로 렌더링하고 싶습니다.

import React, { Component } from 'react'
import Header from './src/components/header/header'
import logo from './logo.svg'
import './App.css'

class App extends Component {
  render() {
    return (
      <Header/>
    );
  }
}

export default App;

이것은 Header구성 요소입니다

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import navBar from './src/components/header/navBar'
import './src/css/header.css'

class Header extends Component {
    render() {
        return {
            <div>
             <div id="particles-js"></div>
             <navBar/>
             <Title/>
          </div>
        };
    }
}

ReactDOM.render(<Header/>, document.getElementById('header'));

모듈이이 위치에 있는지 10 번 이상 확인했으며 ./src/components/header/header"header"폴더에 "header.js"가 포함되어 있습니다.)

그러나 React는 여전히 다음 오류를 발생시킵니다.

컴파일하지 못했습니다.

./src/App.js Module not found: Can't resolve './src/components/header/header' in '/home/wiseman/Desktop/React_Components/github-portfolio/src'

npm 테스트 는 같은 것을 말합니다.

우리가 일반적으로 사용하는 방식 import은 상대 경로를 기반으로합니다.

.그리고 ..우리가 탐색하는 데 사용하는 방법과 유사하다 terminal같은 cd ..디렉토리의 외출하고 mv ~/file .를 이동하는 file현재 디렉토리.

my-app/
  node_modules/
  package.json
  src/
    containers/card.js
    components/header.js
    App.js
    index.js

귀하의 경우에는, App.js에있는 src/동안 디렉토리 header.js에 있습니다 src/components. 에 import당신이 할 것입니다 import Header from './components/header'. 이것은 대략 내 현재 디렉토리에서 헤더 파일이 포함 된 구성 요소 폴더를 찾습니다.

이제에서에서 무언가 header.js가 필요 하면이 작업을 수행합니다. . 이것은 내 현재 디렉토리에서 이동하여 카드 파일이있는 폴더 이름 컨테이너를 찾는 것으로 변환됩니다.importcardimport Card from '../containers/card'

에 관해서는 import React, { Component } from 'react',이로 시작하지 않는 ./나 ../또는 /때문에 노드가있는 모듈을 찾고 시작 node_modules까지 특정 순서로 react발견된다. 자세한 내용은 여기에서 읽을 수 있습니다 .

react-create-app을 사용하여 애플리케이션을 생성하는 경우 환경 변수 설정을 잊지 마십시오.

NODE_PATH=./src

또는 .env루트 폴더 에 파일을 추가 하십시오.

NODE_PATH에서 환경 변수로 추가 하는 .env것은 더 이상 사용되지 않으며 다음을 추가하여 대체됩니다."baseUrl": "./src" 에 compilerOptions의 jsconfig.json하거나 tsconfig.json.

참고

package-lock.json 파일 삭제 후 실행

npm install

더 읽어보기

제 경우에는 오류 메시지가

Module not found: Error: Can't resolve '/components/body

모든 것이 올바른 디렉토리에있는 동안.

문제 body.jsx를 body.js해결 하기 위해 이름 을 변경 했습니다 !

그래서 다음 과 같이 webpack.config.js해결하기 위해이 코드를 추가 jsx했습니다.js

 module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.jsx']
  }
};

그리고 빌드 오류가 사라졌습니다!

헤더의 이중 사용이라고 생각합니다. 나는 비슷한 것을 시도했고 또한 문제를 일으켰습니다. 다른 파일과 일치하도록 구성 요소 파일을 대문자로 사용했습니다.

import Header from './src/components/header/header';

해야한다

import Header from './src/components/header/Header';

비슷한 문제가있었습니다.

원인:

import HomeComponent from "components/HomeComponent";

해결책:

import HomeComponent from "./components/HomeComponent";

참고 : ./ 구성 요소 이전입니다. 사용 방법에 대한 위의 @Zac Kwan의 게시물을 읽을 수 있습니다.import

새로운 반응 앱을 만들 때 같은 문제에 직면했고 https://github.com/facebook/create-react-app/issues/2534의 모든 옵션을 시도했지만 도움이되지 않았습니다. 새 앱의 포트를 변경해야했는데 제대로 작동했습니다. 기본적으로 앱은 포트 3000을 사용합니다. 다음과 같이 package.json에서 포트를 8001로 변경했습니다.

  "scripts": {
    "start": "PORT=8001 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

해당 폴더 에 src있거나 public해당 폴더에서 나와야하는 경우 프로젝트 폴더에 있어야합니다. 반응 프로젝트 이름이 'hello-react'라고 가정하면cd hello-react

가져 오기 헤더를 '에서 변경해야합니다 . / src / components / header / header 'to

' .. / src / components / header / header' 에서 헤더 가져 오기

앱 폴더에서 'npm install'실행을 시도 할 수 있습니다. 이것은 또한 문제를 해결할 수 있습니다. 그것은 나를 위해 일했습니다.

나는 같은 문제에 직면했고 그것을 해결했습니다. index.js파일이 src폴더에 있는지 확인한 다음 가져 오는 파일이 무엇인지 확인하십시오. 해당 파일이 포함 된 폴더도 src 폴더 안에 있어야합니다.

즉, 구성 요소 폴더가 폴더 외부에있는 경우 src폴더 src외부의 파일을 src가져 오지 않으므로 편집기 의 폴더 내부로 드래그하기 만하면 됩니다.

그런 다음 ./components/header/header(이 경우)를 사용하여 가져올 수 있습니다.

React App에서 모듈 가져 오기를 처리 할 수있는 더 좋은 방법이 있습니다. 다음을 고려하십시오.

jsconfig.json기본 폴더에 파일을 추가하십시오 . 이는 package.json을 포함하는 동일한 폴더입니다. 다음으로 기본 URL 가져 오기를 정의하십시오.

//jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src"
  }
}

이제 전화하는 ../../대신 쉽게 할 수 있습니다.

import navBar from 'components/header/navBar'
import 'css/header.css'

'components /'는 '../components/'와 다릅니다.

이런 식으로 더 깔끔합니다.

그러나 동일한 디렉토리에서 파일을 가져 오려면 다음을 수행 할 수도 있습니다.

import logo from './logo.svg'

import 문을 확인합니다. 세미콜론으로 끝나야합니다. 누락 된 항목이 있으면이 오류가 발생합니다.

또한 컴포넌트에 다음 import 문이 추가되었는지 확인하십시오.

'worker_threads'에서 {threadId} 가져 오기;

그렇다면 해당 줄을 제거하십시오. 그것은 나를 위해 작동합니다.

제 경우에는 구성 요소 파일의 이름을 바꾸면 VS 코드가 아래 코드 줄을 추가합니다.

import React, { Component } from "./node_modules/react";

그래서 다음을 제거하여 수정했습니다. ./node_modules/

import React, { Component } from "react";

건배!