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

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

당연한 질문이라는 것을 믿을 수 없지만 콘솔 로그에 오류가 여전히 표시됩니다.

콘솔에서는 디렉토리에서 모듈을 찾을 수 없다고 합니다만, 오타가 없는지 10번 이상 확인했습니다.어쨌든, 여기 컴포넌트 코드가 있습니다.

root에 헤더를 렌더링하고 싶다.

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'));

이 이 이상 ./src/components/header/header(「폴더」) 「폴더」폴더.폴더(folder(폴더)

그러나 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상대 경로를 기반으로 합니다.

. ★★★★★★★★★★★★★★★★★」.. 할 때 쓰는 것과 .terminalcd ..mv ~/file .file이치노

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

ㅇㅇㅇㅇㅇㅇ는App.js에 src/ when "directory"(디렉토리(디렉토리))header.js에 src/components에게.import 수 있다import Header from './components/header'현재 디렉토리에서 헤더 파일을 포함하는 컴포넌트 폴더를 찾으십시오.

이제 ,, 이, 약의 header.js , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , .import서서 from from 에서 온 것card이렇게 할 거예요. import Card from '../containers/card'현재 디렉토리에서 카드 파일이 있는 폴더 이름 컨테이너를 찾습니다.

★★★★★★에 대해서import React, { Component } from 'react' 이 문구는 '어느 때 보다'로 이 아닙니다../ ★★★★★★★★★★★★★★★★★」../ ★★★★★★★★★★★★★★★★★」/는 ' 검색'을합니다.node_modules까지의 react검출되었습니다.자세한 내용은 여기를 참조하십시오.

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

NODE_PATH=./src

또에 더하다.env합니다.

package-lock.json 파일을 삭제하고 실행.

npm install

자세한 내용은 이쪽

저 같은 경우에는 에러 메시지가

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

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

을 바꾸면 ★★★★★★★★★★★★★★★★★★★★★★.body.jsx to 로.body.js문제를 해결하다!문제를 해결하세요!

So I added this code in 그래서 이 코드를 추가했습니다.webpack.config.js결을 해결하다jsx as ~하듯이js

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

그리고 빌드 오류는 사라집니다!

가 추 추가NODE_PATH경의 환경 변수로서.env, "이러다"를 으로 대체됩니다."baseUrl": "./src" , 에, 에, 에.compilerOptionsjsconfig.json ★★★★★★★★★★★★★★★★★」tsconfig.json.

언급

헤더의 이중 사용인 것 같아요.저도 비슷한 걸 해봤는데 문제가 생겼어요.내 컴포넌트 파일을 다른 파일과 일치시키기 위해 대문자로 표시했더니 작동했어요.

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

그래야 한다

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

리액트 앱에서 모듈 가져오기를 처리할 수 있는 더 좋은 방법이 있습니다.다음 사항을 고려해 주십시오.

jsconfig.json기본 폴더에 파일을 저장합니다.「 」패키지.조손URL Import를 선택합니다.

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

은 전화하는 ../../대신 간단하게 할 수 있습니다.

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

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

이쪽이 더 깔끔하다.

그러나 같은 디렉토리의 파일을 Import 하는 경우는, 다음의 조작도 가능합니다.

import logo from './logo.svg'

파일 확장자를 붙여서 해결했다.

import MyComponent from "src/components/MyComponent";

로.

import MyComponent from "src/components/MyComponent.tsx";

저도 비슷한 문제가 있었어요.

원인:

import HomeComponent from "components/HomeComponent";

솔루션:

import HomeComponent from "./components/HomeComponent";

./컴포넌트 이전입니다.의 @Kwan의 는 @Zac Kwan의 수 .import

앱 폴더에서 'npm install'을 실행해 볼 수 있습니다.이것은 문제를 해결할 수도 있습니다.그것은 나에게 효과가 있었다.

새로운 리액트 앱을 만들 때도 같은 문제에 직면했고, https://github.com/facebook/create-react-app/issues/2534의 모든 옵션을 시도해봤지만 소용이 없었습니다.나는 새 앱의 포트를 바꿔야 했고, 그리고 나서 작동했다.기본적으로 앱은 포트 3000을 사용합니다.포트는 패키지로 8001로 변경했습니다.json은 다음과 같습니다.

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

Import 헤더를 '.src/components/header/header'에서 '.src/components/header'로 변경해야 합니다.

'../src/컴포넌트/header/header'에서 헤더를 Import

지 얼마 안 된 create-react-app typescript가 있는지 합니다.tsconfig.json자동으로 생성되었습니다.CRA 문서에서는 그렇게 해야 한다고 되어 있습니다만, 현재 생성되지 않은 버그가 있는 것 같습니다.

경우,tsconfig.json몇 가지 방법으로 직접 만들 수 있습니다.

• 인터넷 또는 다른 리포트에서 복사
• npx tsc --init
• npx create-react-app my-ts-proj --template typescript합니다.

.src ★★★★★★★★★★★★★★★★★」public그 폴더들에서 나와야 합니다.이 '하고 'hello-react'라고 합니다.cd hello-react

저도 같은 문제에 직면해 있었고 해결했어요.,그러면자신의자신이있다라는것을알아보세요.index.js은 에 있습니다.src폴더, 가져올 파일을 포함하는 폴더도 src 폴더 내에 있어야 합니다.

, 가 " " " 밖에 "src안에 놓기만 하면 됩니다.src이 에 있는 입니다.src이치노

'하다'를 사용해서 수입을 할수 있을 거예요../components/header/header 경우) (이 경우)

은 맞췄는데, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.npm startWindows Linux Hyper 최((최(최최 。파일을 다른 폴더로 이동해도 npm start는 이러한 변경 사항을 인식하지 않습니다.프로세스를 후 npm을 실행해야 .npm start이제 파일을 볼 수 있습니다.

ReactDOM.render(<Header/>, document.getElementById('header')); 타타에 export default Headerjsheader.manager.manager로 하다

컴포넌트 자동 Import로 인해 이 문제가 발생했지만 유형이나 웹 팩 구성 문제는 없었습니다.

앱 루트 디렉토리에 대한 상대적인 Import를 파일에 대한 상대적인 Import로 변경한 수정 내용:

import MyComponent from "src/components/MyComponent";

로.

import MyComponent from "../components/MyComponent";

최단 경로를 통해 Visual Studio Code 자동 가져오기에서 이 정보를 얻는 경우 상대적으로 가져오도록 변경할 수 있습니다.여기를 클릭해 주세요.

메뉴 파일 → 기본 설정 → 설정 → 사용자 설정,

"typescript.preferences.importModuleSpecifier": "relative"

여기에서는 (./) src가 필요 없습니다.

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

.js 파일 내에 .tsx 파일을 Import하고 있을 수 있습니다.javascript 소스에서 작업하는 경우 확장자가 .tsx가 아닌 .js 또는 .jsx인지 확인합니다.

컴포넌트 파일의 이름을 변경하면 VS 코드가 다음 코드 행을 추가합니다.

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

그래서 다음 부분을 제거해서 수정했습니다../node_modules/

import React, { Component } from "react";

건배!

도움이 될 것 같은데..

오류를 주의 깊게 읽으십시오.//src/App.js 모듈을 찾을 수 없습니다.'/home/wisman/Desktop/React_Components/github-portfolio/src'에서 '.src/구성 요소/header/header'를 확인할 수 없습니다.

App.js에서 ./header/header 대신 ./src/components/header/header를 씁니다.

정상적으로 동작하지 않는 경우는, 헤더 파일명을 변경해 주세요.

Import 스테이트먼트를 확인합니다.세미콜론으로 끝나야 합니다.하나라도 놓치면 이 오류가 발생합니다.

또한 다음 Import 문이 컴포넌트에 추가되었는지 확인합니다.

'worker_threads'에서 {threadId} Import;

이 경우 해당 라인을 제거합니다.저는 좋아요.

언급URL : https://stackoverflow.com/questions/44439205/cant-resolve-module-not-found-in-react-js