외부 부품 개발 시 리액트 2부 로드 오류를 방지하려면 어떻게 해야 합니까?

외부 부품 개발 시 리액트 2부 로드 오류를 방지하려면 어떻게 해야 합니까?

외부 컴포넌트를 개발 중입니다(예를 들어my-componentnpm link(현재 진행 중이며 변경 사항을 반영하기 위해 패키지가 필요합니다.)

서서 my-component가 있습니다.node_modules/react ★★★★★★★★★★★★★★★★★」node_modules/react-dom그 의존성이 있기 때문입니다.단, peer Dependences이기 때문에 이 패키지를 링크하는 프로젝트에 도입할 생각은 없었습니다.

, 「」를 사용하고 경우는, 「」npm link은 , 을 포함한 합니다.node_modules때가 두 번 됩니다. 즉, 구축 시 패키지가 두 번 포함됩니다node_modules/* 및서에서node_modules/my-component/node_modules/*.

가 사용 중인 을 미치기 합니다.ReactDOM.findDOMNode오류가

Warning: React can't find the root component node for data-reactid value `.0.2.0`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.

무슨 일이 있는지 하는 데 이 될 수 . 는 둘 다 있는 .이 문제는 양쪽이 모두 존재하는 경우에만 발생합니다.node_modules/my-component/node_modules/react ★★★★★★★★★★★★★★★★★」node_modules/my-component/node_modules/react-dom1개만 있으면 에러 메시지는 표시되지 않습니다.

에서는, 「」, 「」가 없기 때문에, 에러는 .node_modules/react-domcontract.discontracts.

외부 컴포넌트와 프로젝트를 어떻게 동시에 개발합니까?

이 문제는 두 가지입니다.

1. 반응 복사본 2개를 로드할 수 없습니다.
2. npm 링크는 심볼 링크를 생성하지만 "symblink"는 심볼 링크를 존중하지 않으며 디렉터리를 탐색하려고 해도 상위 프로젝트의 반응을 찾지 못합니다.

솔루션:

컴포넌트의 react 및 react-dom을 부모 프로젝트의 node_modules 폴더의 react-dom과 링크하기만 하면 됩니다.

컴포넌트 프로젝트로 이동하여 react-dom을 제거한 후

npm link ../myproject/node_modules/react
npm link ../myproject/node_modules/react-dom

해서 고쳤어요.react-dom

alias: {

    react$: require.resolve(path.join(constants.NODE_MODULES_DIR, 'react')),
    'react-dom': require.resolve(path.join(constants.NODE_MODULES_DIR, 'react-dom'))

}

저(@mojodna)보다 똑똑한 사람이 이 솔루션을 고안했습니다.외부 컴포넌트에서 중복된 의존관계를 제거하고 프로젝트의 해당 부서 복사본으로 해결합니다.

1:컴포넌트의 1: 외부 컴포넌트의 의존관계 삭제node_modules

@cleong이 지적한 바와 같이 외부 컴포넌트의 DEP만 제거할 수는 없습니다.node_modules외부 컴포넌트의 의존성에 도달하면 프로젝트의 빌드 스텝이 실패하기 때문입니다.

2단계 : 2단계 추가node_modules로로 합니다.NODE_PATH

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★node_modulesNODE_PATH구성 단계를 실행할 때 환경 변수를 사용합니다.예를 들어 다음과 같습니다.

NODE_PATH=$(pwd)/node_modules/ npm start

서 (어디서)npm start는 외부 컴포넌트를 컴포넌트).「」, 「」)

그 '아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아,아.NODE_PATH스크립트에 할 수 , 스크립트가에 관계없이 할 수 .그것은, 사용의 유무에 관계없이 동작합니다.npm linkanything. (로는 안 되는 건지 (이것들)npmbehavior...)

주의: 기존 답변을 남겨두었습니다.왜냐하면 대화 내용이 있기 때문입니다.이것은 다른 (더 나은) 솔루션이기 때문입니다.

I believe the answer is to specify 제 생각에 답은 다음과 같습니다.react and 그리고.react-dom as ~하듯이peerDependencies in your external component's 외부 컴포넌트의package.json제가 할 수 있는 한, 여기와 여기를 따라갈 수 있는 한npm link should (as of (시점의) 해야 한다npm@3) no longer install )는 인스톨 되지 않습니다.peerDependencies(또는 디바이스 종속성)('어느끼면 안 돼요.

저는 를 더 깊게 인데, 당신은 을 Aaaa로 하고 있다는 되었습니다.peerDependencies을 사용법

「」로 합니다.npm@3:

npm install -g npm@3.0-latest

npm 링크에서 문제가 발생.https://github.com/npm/npm/issues/5875

npm은 링크된 디렉토리를 상위 프로젝트의 하위 디렉토리로 취급하지 않습니다.

npm 링크 대신 시도:

1) 패키지의 상대 경로 의존성을 사용합니다.json

2) 의존관계를 프로젝트 node_modules 디렉토리에 수동으로 포함시킨다.

3) URL 경로 사용

기본적으로 npm 링크를 제외한 모든 링크

저는 ReactJS.net을 사용하고 있으며, 튜토리얼에서 웹 팩을 셋업하여 사용하기 시작했습니다.react-bootstrap이 에러가 나기 시작했을 때도 마찬가지였어요.는 더하는 것을 발견했다.'react-dom': 'ReactDOM'의 리스트에externalswebpack.config.js문제를 해결하면 외부 리스트는 다음과 같습니다.

  externals: {
    // Use external version of React (from CDN for client-side, or
    // bundled with ReactJS.NET for server-side)
      react: 'React',
      'react-dom': 'ReactDOM'

이 오류에 대한 구글의 첫 번째 스택 오버플로 링크인 것 같아서 이 답변이 도움이 될 것 같습니다.

음음에 webpack.config.js: 작업 완료:

resolve: {
    alias: {
        react: path.resolve(__dirname, 'node_modules', 'react')
    }
}

DedupePlugin(여기서 가능한 치료법으로 언급) 하지만 효과가 없었습니다.

또한 흥미로운 점은 의존관계 그래프에서 모듈이 여러 곳에서 발견되었을 때 동일한 문제에 대해 다른 (그리고 더 음흉한) 징후를 발견했다는 것입니다.

중 하나가 의 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.React.PropTypes.instanceOf(SomeType)전달한 유형이 올바르더라도 제약조건은 경고를 발생시킵니다.은 모듈이 in that that는 の in that の that 。node_modules으로 인해 은 이러한 혼란스러웠습니다.duck 타이핑으로 인해 코드는 여전히 작동하지만 콘솔은 이러한 경고로 인해 혼란스러웠습니다.resolve.alias그것들도 침묵시켰죠

YMMV

https://github.com/mweststrate/relative-deps 사용을 강력히 권장합니다.

로컬 체크아웃에서 종속성을 설치하고 링크 제한 없이 동기화를 유지합니다.

그러면 npm 설치와 마찬가지로 로컬라이브러리가 설치되고 의존관계 버전 등이 충족되므로 문제가 해결됩니다.

메인 프로젝트에서 웹 팩을 사용하는 경우 이 솔루션이 작동할 수 있습니다.저 같은 경우에는project-a에는 「」가 필요합니다.project-b. 둘 다 와 반응하다DOM 0.14x

은 는는에 있습니다.project-a/webpack.config.js:

resolve: {
  modulesDirectories: ['node_modules'],
  fallback: path.join(__dirname, 'node_modules')
},
resolveLoader: {
  fallback: path.join(__dirname, 'node_modules')
},

• project-b React DOM 、 React DOM 、 React DOM 、 React DOM 、 이 필요합니다.peerDependenciesproject-b/package.json
• project-a에는 「」가 필요합니다.project-b로 devDependency한 기능을 해야 .)dependency의 in ) ) 。project-a/package.json
• project-b 연결되어 있습니다.project-acd project-a; npm link ../project-b

시 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」npm run build의 범위 내에서project-b 에 project-a

제가 이걸 받고 있었던 이유는 제가 이미 포함시켰기 때문입니다.react ★★★★★★★★★★★★★★★★★」react-domHTML html html html html html html html html html 。

는, 에러, 에러가 했습니다.import ReactDOM from 'react-dom'이치노Import를 해제하면 에러가 해소되어 컴포넌트가 이미 사용 가능하기 때문에 모듈은 정상적으로 동작합니다.

언급URL : https://stackoverflow.com/questions/33157904/how-to-avoid-loaded-two-copies-of-react-error-when-developing-an-external-comp