React 구성 요소를 요구할 수 없습니다.

Question

현재 npm 레지스트리에 개별적으로 저장할 수 있도록 모 놀리 식 React 프로젝트에서 모듈을 추출하는 중입니다. 그러나이를 올바르게 내보내고 가져올 수 없습니다.

const Component = require("./component.js"); 

및 모든 번들 웹팩을 사용 : 압축을 해제하기 전에, 내가 사용하고 있었다. 그것은 잘 작동했다. 그런 다음 구성 요소를 별도의 프로젝트로 옮겼습니다.이 프로젝트는 webpack에 번들되었습니다. 그러나 npm 의존성으로 작동하지는 않습니다. 다음 구성 요소에 대한 기본 코드입니다 :

이

// Some require statements 
... 
var Component = React.createClass({...}); 
module.exports = Component; 

빌드 프로세스가/bundle.js를 구축 할 수있는 번들로 출력하고, package.json은 다음과 같습니다

{ 
    "name": "component", 
    "version": "0.0.2", 
    "description": "...", 
    "main": "build/bundle.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build-dev": "webpack", 
    "build-min": "NODE_ENV=production webpack && uglifyjs ./build/bundle.js -c -m -o ./build/bundle.min.js --source-map ./build/bundle.min.js.map", 
    "prepublish": "npm run build-min" 
    }, 
    "publishConfig": { 
    "registry": "registry" 
    }, 
    "author": "esaron", 
    "license": "UNLICENSED", 
    "dependencies": { 
    ... 
    }, 
    "devDependencies": { 
    ... 
    } 
} 

그리고 나는 그것을 가져 해요 로 :

const Component = require("component"); 

내가 페이지를로드 할 때, I 참조 콘솔에서 다음과 같은 오류 :

bundle.js : 1299 Uncaught Invariant Violation : 요소 유형이 올바르지 않습니다. 문자열 (내장 구성 요소의 경우) 또는 클래스/함수 (복합 구성 요소의 경우)가 있어야하지만 got : object. exports의 렌더링 방법을 확인하십시오.

때 디버깅, 과연, 요구하는 전화는 내가 직접 bundle.js 필요한 경우 내가 같은 결과를 얻을 나에게

구성 요소 = 객체 {}

을주고있다 프로젝트에 복사 한 후, 빌드를 설정하고 올바른 방법으로 게시하지 않아야하고, 잠시 동안 검색 한 후, 내가 잘못하고있는 것을 찾을 수 없었던 것처럼 느껴집니다.

Answer 1

구성 요소가 자체 패키지로 분리되어있을 때 구성 요소를 묶어서는 안됩니다. ES6을 사용하는 경우 사전 게시 단계로 바벨 (Babel)을 사용하여 추출하는 것이 좋지만 번들링 할 필요는 없습니다.

번들 단계가 구성 요소에 어떤 일을하는지 생각해보십시오. 그것은 당신의 진입 점을 통과하고 필요한 모든 의존성을 하나의 파일로 끌어들입니다. 즉, bundle.js 결과가 반응, 반응 -dom 및 구성 요소에서 요구하는 모든 항목을 가져온 것입니다.

주요 응용 프로그램 (구성 요소 패키지가 필요할 것임)에만 번들 단계가 필요합니다. 여기에서는 중첩 된 것을 포함하여 모든 종속성을 해결하고 앱의 bundle.js로 가져와 앱에 반응을 일으키는 것과 같은 라이브러리의 중복 사본을 만들지 않도록합니다.