browserify 가져 오기가 작동하지 않는 React.js

React.js를 배우고 있으며 내 firt 구성 요소를 렌더링 할 수 없습니다. 내 프로젝트는 다음과 같습니다browserify 가져 오기가 작동하지 않는 React.js

이

javascript 
    | 
    --components 
    | | 
    | ---- searchbar.jsx 
    | 
    |  
    --app.jsx

searchbar.jsx :

export default class SearchBar extends React.Component { 
    //some code 

    render(){ 
     //some code 
    } 
}

app.jsx은 다음과 같습니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { SearchBar } from './components/searchbar.jsx'; 

ReactDOM.render(

     <App /> 
     , 
    document.getElementById('content') 
); 

class App extends React.Component { 



    render() { 
     <div> 
      <SearchBar placeHolder='search bar text'/> 
     </div> 
    } 
}

컴파일하고 포장하면 오류가 없습니다. 나는 그것을 실행할 때, 나는 다음과 같은 오류가 점점 오전 : 나는 app.jsx의 모든 코드를 넣어 모든 것이 ..해야하고 검색 막대가 표시되고있는대로 작동 후 더 가져 오기를 사용하지하지만 난 넣을

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. 
    printWarning 
    warning 
    createElement 
    1../components/searchbar.jsx

다른 파일의 구성 요소. 어떻게해야합니까?

출처

2017-01-21 Jakub

SearchBar에 모듈 당신은 또한 import SearchBar

에 import { SearchBar }을 변경해야합니다

기본값이 아닌 명명 된 수출 (중괄호로 둘러싸에 의해 명명 된 수출을 필요로 중괄호)를 수출, 당신의 선언을 이동해야합니다 응용 프로그램 파일의 시작 부분으로, 그것을 사용하기 전에 선언해야합니다

출처

2017-01-21 14:05:49

아니 도움이되지 않았습니다. 나는 여전히 동일한 오류가 발생하고 있음을 확신하며 다시 컴파일하고 다시 포장했습니다. 내가 gulp 파일에서 watchify를 사용합니다. – Jakub

'ReactDOM.render'와 함께 사용되기 전에 가져 오기 직후에'App' 클래스 선언을 옮겨보십시오. 내가'클래스'선언을'var' 선언처럼 들키지 않는다는 것에서 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Hoisting –

아, 고맙습니다. 고맙습니다. – Jakub

browserify 가져 오기가 작동하지 않는 React.js

답변

관련 문제