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

Program / 글쓴이

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

콘솔은 디렉토리에서 모듈을 찾을 수 없다고하는데 적어도 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