@baldurh 이것은 매우 드문 경우입니다. Now와 같은 플랫폼을 사용할 때는 Next.js 앱이있는 폴더 만 배포됩니다. 그렇지 않으면 모든 외부 모듈에 대해 먼저 알아야하므로 그렇게하는 것이 좋습니다. 두 가지 더 나은 대안은 다음과 같습니다.

• 모든 것을 단일 Next.js 앱으로 이동
• lerna 또는 개인 npm 패키지 또는 이와 유사한 사용

@lfades 답장 주셔서 감사합니다. 이러한 옵션 중 어느 것도 사용할 수 없으며 Now 또는 이와 유사한 것에 배포하지 않습니다. 처음에는 실 작업 공간을 사용했지만 bazel을 통합했는데 실 작업 공간의 심볼릭 링크 특성과 ​​잘 어울리지 않습니다. Npm 패키지는 우리가 원하는만큼 빨리 공유 모듈을 개발할 수 없음을 의미합니다. 오버 헤드가 너무 많습니다.

@baldurh 중첩 된 NextJs 앱을 예로 들었 기 때문에

@isaachinman 우리는 없습니다. 아직 다른 이유로 9.x로 업그레이드하지 못했기 때문에 조사하지 않았습니다. 누구든지 이것에 영향을 미치는 코드가 어디에 있는지 알고 있습니까? 문제를 더 잘 이해하고 싶습니다.

아직이 문제를 파헤칠 시간이 없었지만 누군가 재현이 필요한 경우 다음과 같이 복제해야합니다. cd 를 examples/simple 에 복제하고 NextJs 버전을> = 9.0.6으로 업그레이드합니다.

현재 9.0.3에 있으므로 기술적 으로 패치의 주요 변경 사항입니다.

최근에 비슷한 오류가 발생하여 9.0.5 (및 React 16.8.x)로 다운 그레이드해야했습니다. 나는 Next의 MDX 사용에 대해 내가 본 문제를 좁혔지만 그 이상의 구체적인 세부 사항은 없습니다.

Next & next-i18next를 기반으로 한 꽤 큰 프로젝트로 같은 문제를 파헤 쳤습니다.

이 오류는 세 가지 이유로 발생할 수 있음을 알았습니다.

1. 잘못 정렬 된 react 및 react-dom 버전-내 앱에 적용되지 않음
2. 2 개 버전의 react-dom 가져 오기-내 앱에 적용되지 않음
3. React 후크의 부적절한 사용-후크를 사용하지 않지만 일부 라이브러리는 사용하며 다른 모든 사용자에게 작동하는 것처럼 보입니다.

이상한 점은 프로덕션 빌드 에서만 발생한다는 것입니다.

@timneutkens @Timer 에 태그를 달아 주셔서 죄송 합니다만 여러분의 의견을 듣고 싶습니다. 이 문제를 해결할 수 있다고 생각하십니까? 우리 모두가 몇 가지 해결 방법을 구현해야합니까? 이것은 현재 우리에게 매우 큰 차단제입니다. 감사.

별칭이 react 이지만 react-dom 아닌 것 같습니다. 시도해 볼 수 있습니까?

@ 타이머 감사합니다. 시도했지만 효과가 없었습니다

react 및 react-dom 종속성을 한 수준 위로 이동하여 재현 에서 방금이 문제를 해결할 수있었습니다. 누군가 시도해보고 싶다면 변경 사항을 밀어 넣었습니다. 나는 실제 프로젝트에서 그것을 시도하지 않았지만 그것이 우리에게 효과가 있기를 희망합니다. 아마도 이것은 @isaachinman , @jaredcwhite 및 @felixmosh 의 문제를 해결할 수 있습니까?

@Timer 우리 프로젝트에서이 작업을 수행했지만 react 를 프로젝트의 node_modules 폴더에 설치하는 다른 종속성이 없는지 확인해야했습니다. 우리의 경우에는 스토리 북과 관련이있었습니다 ( yarn why react 는 많은 도움이되었습니다 😄). 어쨌든 스토리 북을 별도의 프로젝트로 옮길 계획 이었기 때문에이 솔루션이 우리의 경우에 효과가있을 것이라고 생각합니다.

아 예. 부적절하게 게시 된 node_module 패키지로 인해이 문제가 발생합니다 (피어 종속성 대신 react(-dom|) 대한 종속성 포함).

react 및 react-dom 종속성을 한 수준 위로 이동하여 재현 에서 방금이 문제를 해결할 수있었습니다. 누군가 시도해보고 싶다면 변경 사항을 밀어 넣었습니다. 나는 실제 프로젝트에서 그것을 시도하지 않았지만 그것이 우리에게 효과가 있기를 희망합니다. 아마도 이것은 @isaachinman , @jaredcwhite 및 @felixmosh 의 문제를 해결할 수 있습니까?

이 저장소에서 수행 한 변경 사항에 대해 자세히 설명해 주시겠습니까?

npm ls react 또는 npm ls react-dom 목록에 다음 앱만 있습니다.

@felixmosh 죄송합니다. 어제 푸시가 실패한 것 같습니다. 이제 변경 사항이 있습니다 😅 react 및 react-dom 을 (를) app 폴더에서 루트 폴더로 이동 했으므로 이제 둘 다에서 yarn/npm install 작업을 수행해야합니다. app 폴더와 루트 폴더를 확인한 후 app 를 실행합니다. 이것이 충분히 명확하기를 바랍니다.

프로덕션에서이 작업을 수행하려면 빌드 시스템을 약간 변경해야하므로이 솔루션은 여전히 ​​우리에게 약간의 번거 로움입니다 .😝

설명 고맙습니다. 다음 팀이 문제를 해결할 때까지 기다릴 것입니다. 내 모노 리포지토리의 루트에 반응 deps를 두는 것이 약간 이상하게 들립니다.

@felixmosh 그래, 나는 당신에게 동의합니다. 그러나 원사 작업 공간과 같은 것을 사용하면 도구가 정확히 수행하는 작업입니다. 두 개 이상의 프로젝트에 동일한 종속성이있는 경우 종속성을 루트에 게양합니다. 모든 프로젝트에서 동일한 버전의 종속성을 갖도록 보장하기 때문에 좋습니다. 하지만 그런 도구가 없다면 직접 관리해야하는데 이는 참으로 다소 어색합니다. 최선의 해결책은 Next.js 팀이 우리 모두를 위해이 문제를 해결하는 것이라는 데 동의합니다 😇🙏🏻

동일한 문제가 발생하고 react 및 react-dom 한 수준 위로 가져와 루트에서 서버를 실행하는 것이 현재 9.1.5에서 작동하는 유일한 해결 방법입니다. 이 문제 이전에 해당 링크를 찾았으므로 참조를 위해 https://github.com/facebook/react/issues/13991 및 https://github.com/facebook/react/issues/15315#issuecomment -479802153을 연결합니다.

안녕하세요이 문제에 대한 업데이트가 있습니까? 우리는 monorepo를 가지고 있으며이 정확한 문제가 발생합니다.

같은 문제를 만나십시오.
v9.0.5는 rootFolder 외부에서 가져온 구성 요소에 대한 후크와 잘 작동합니다.

9.0.6부터 9.1.6-canary.5까지 동일한 문제가 있습니다.

이 문제는 서버 측에서만 발생합니다. SSR이 비활성화 된 경우 (예 : dynamic을 통해 외부 구성 요소로드) 모든 버전이> = 9.0.6 인 경우 예상대로 작동합니다.

@nodkz 반응 패키지 해결 문제이므로 노드에서만 발생합니다.

@Timer 이 문제는 약 6 개 버전의 "다음"이정표로 이동하여 최신 버전으로 업데이트 할 수 없습니다.

나는 하루 종일 숙박 시설에 시간을 낭비했으며 그 원인이 무엇인지 모르고 해결 방법을 시도했습니다 (작동하지 않음).

방향을 조사하는 데 도움이 필요하십니까?
그것에 대해 직감이 있습니까?
프로덕션 빌드에서만 발생하는 이유는 무엇입니까?
이와 관련이있을 수있는 9.0.5 에서 9.0.6 로 변경된 사항은 무엇입니까?

고맙습니다 🙏🏼

문제를 찾은 것 같아요 !!!
나는 그것이 두 가지의 조합이라고 생각합니다.

1. node_modules에 대한 심볼릭 링크 사용
2. i18next / react-i18next 은 (는) 서버 번들의 외부가 아닙니다 !!
   
   제 경우에는 프로덕션 빌드에서 폭발 할 때 i18next useTranslation hook ...

그래서 나는 왜 서버 번들 안에 노드 모듈이 있는지에 대한 이유를 조사했습니다 (서버 번들에 대한 모범 사례는 그것들을 외부로 만드는 것입니다).

나는 (왜?), 재미있는 부분이다 그 다음 다음 lib 디렉토리에 대한 몇 가지 예외가 본 이 정규식은 모든 libs와 잡는다 그게 끝 next/dist/ 로, i18next & react-i18next 않습니다 !!

따라서 이것을 변경하면 :

res.match(/next[/\\]dist[/\\]/) 

으로

res.match(/[/\\]next[/\\]dist[/\\]/) 

서버 번들은 next 이외의 모든 라이브러리를 제외하고 next/dist 끝나는 문제를 해결했습니다!

저에게 주요 문제는 요청이 해결되는 새로운 방법입니다 : https://github.com/zeit/next.js/blob/canary/packages/next/build/webpack-config.ts#L446

프로젝트 루트 외부에 구성 요소가 있으므로 요청 해결시 오류가 발생하여 react 가 서버 청크에 번들로 제공됩니다. 그래서 서버에서 Invalid hook call 오류가 발생합니다.

연결 한 식의 @baldurh context 는 webpack에서 제공하며 컴파일 루트 (프로젝트 디렉터리)와 다릅니다.
항상 요구 사항을 발행하는 파일의 디렉토리입니다.

권리. 지금은 우리를 위해 작동하도록 패치했습니다. 결국 상위 디렉터리 수준에서 종속성이 공유되도록 코드의 구조를 변경할 것이라고 생각합니다. 그러나 react 가 외부 폴더 (루트 외부)에서 사용 가능하더라도 여전히 오류가 발생합니다.

연결된 패키지를 사용하려고하는데 동일한 문제가 발생합니다. 슬프게도 https://github.com/facebook/react/issues/13991 의 수정 사항은 작동하지 않습니다 🙁

yarn link 심볼릭 링크 된 구성 요소 라이브러리에서도 동일한 문제가 발생합니다. 이것은 v9.0.6-canary.4 까지 잘 작동했고 지금은 다른 댓글 작성자와 같은 위치에 있으며이 이후로 업그레이드 할 수 없습니다 ..이 PR에 대한 변경 사항을 정확하게 지적했습니다. https://github.com/zeit /next.js/pull/8739

내 구성 요소 라이브러리는 react , react-dom 및 styled-components 합니다. 이에 대한 구성은 다음과 같습니다.

• 패키지를 devDependencies로 추가하고 peerDependencies에 포함했습니다.
• 내 웹팩 구성에 패키지를 외부로 추가했습니다.
• 내 다음 구성에서 이러한 패키지에 해결 별칭을 추가했습니다.
• 다음 트랜스 파일 모듈로 컴포넌트 라이브러리 모듈을 트랜스 파일했습니다.

최신 정보

이 모듈을 서버 외부에 포함시켜이 문제를 해결할 수있었습니다. 이 댓글에 @HosseinAgha 덕분에 https://github.com/martpie/next-transpile-modules/issues/50#issuecomment -558318688

if (isServer) {
  config.externals = [
    'react',
    'react-dom',
    'styled-components',
    ...config.externals
  ]
}

똑같은 문제가 발생하고 있으며 지금까지 해결 방법 중 어느 것도 효과가 없었습니다.

내 패키지는 게시하고 설치하면 작동합니다 (그리고 next.config.js에서 resolve.alias 사용).

그러나 yarn link @mypackage 를 통해 연결된 패키지로 개발 빌드를 실행하면 항상 잘못된 후크 오류가 발생합니다.

또한 node_modules/dist/build/wepack-config.js 를 수정하고 https://github.com/zeit/next.js/pull/8739에 추가 된 줄을 주석으로 처리하여 작동시킬 수있었습니다.

baseRes 및 res를 기록하면 내가 보는 것은 if 조건이 다음과 같이 트리거된다는 것입니다.

• /myApp/node_modules/react/index.js! == /myApp/node_modules/myPackage/node_modules/react/index.js
• 내 이해에서 파일 / 버전이 100 % 동일하더라도 경로가 동일하지 않으면 트리거됩니다.

최신 정보:

우리는 패키지를 yarn 작업 공간을 사용하도록 변환하여 문제를 해결했습니다 (레포에 단일 패키지 만 포함되어 있음에도 불구하고).
코드를 ./src에서 ./package/our-package-name/src로 이동하고 yarn 작업 공간을 설정했습니다 => https://classic.yarnpkg.com/en/docs/workspaces/

이것은 최상위 ./node_modules 폴더에 대한 공통 종속성을 끌어 올리고 ./package/our-package-name/node_modules가 거의 비어있는 상태로 유지되므로 문제를 해결합니다.

이제 우리가 패키지를 연결하면 다음 버전이 더 이상 반응의 두 번째 버전을 가져 오지 않고 (패키지 node_modules 폴더에 존재하지 않기 때문에) 모든 것이 정상적으로 작동합니다.

나도 같은 문제가있어. ¬¬ '

우리는 일반적으로 행동 강령에 위배되므로 욕설을 접습니다.

죄송합니다.이 버그로 화가났습니다. 사실 저는 Next.JS를 너무 많이 좋아합니다. 그러나이 문제는 지루하기 때문에 사용할 수 없습니다.

외부 로컬 패키지 및 next-transpile-modules 작업 할 때이 문제가 발생합니다.

최신 버전의 Next.js를 고수하고 싶기 때문에 근본 원인을 찾으면 Next.js에 패치를 제출하려고합니다.

[email protected] 을 설치 한 후에도 동일한 문제가 발생합니다.
내 종속성은 [email protected] , [email protected] , [email protected] 및 물론 다른 많은 libs입니다 (그러나 next-i18next를 설치하기 전에 모든 것이 작동했습니다). 누군가가 해결 방법을 가지고 있다면 대단 할 수 있습니다 : +1 :

이 문제를 게시 해 주셔서 감사합니다. 또한 디자인 시스템 (반응 구성 요소 라이브러리) 패키지를 심볼릭 링크하는 데 문제가있었습니다. 또한 https://github.com/martpie/next-transpile-modules를 사용하여 트랜스 파일하고

여기에 제안 된 수정 사항이 우리에게 효과적이었습니다.

• 라이브러리를 node_modules 폴더에 심볼릭 링크합니다 ( npm link 대신 자체 유틸리티를 사용했지만 기본적으로 동일해야 함).
• next.config.js 다음과 같은 내용을 추가합니다.

// next.config.js
const nextConfig = {
    webpack: (config, options) => {
        // modify the `config` here

        if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }
        config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

        return config;
    },
};
// more plugins etc...

구성이 필요하지 않은 대체 해결 방법

• 패키지에서 node_modules 를 제외한 모든 것을 Symlink하십시오. 나는 이것을 위해 내 자신의 유틸리티를 만들었고 아마도 github에 게시 할 수 있습니다.

그러나 이것이 NextJS에서 수정 된 것을 보는 것이 좋을 것입니다. 나는 왜 내 NextJS가 아닌 모든 프로젝트에서 webpack 별칭이 작동하는지 이해하기 위해 많은 시간을 보냈습니다.

추신. 이것이 프로덕션 빌드에 어떤 영향을 미칠지 모르겠지만 개발 중에 만 사용합니다.

if (options.isServer) {
            config.externals = ["react", ...config.externals];
        }

react 은 (는) 이미 외부 서버 측입니다.

config.resolve.alias["react"] = path.resolve(__dirname, ".\\node_modules\\react");

이것은 문제를 해결하지 못할 것입니다.

앞서 말했듯이이 문제는 react 에 의존하는 종속성과 관련이 있지만 peerDependency 에 react 가 있어야합니다 (필요한 경우 react-dom).

뿡 빵뀨

음, 항상 그런 것은 아닙니다. 나는 확실히 반응과 반응을 피어 의존성으로 가지고 있습니다. 예를 들어 라이브러리를 nextjs 프로젝트에 심볼릭 링크하면 문제가 계속 발생합니다. 그러면 라이브러리 내에 node_modules 폴더가 생깁니다 (적어도 해당 라이브러리 폴더에서 npm i 또는 npm link 를 실행 한 경우).

react가이 라이브러리 폴더에서 해결되면 node_modules 폴더에있는 것으로 해결되고 문제를 일으키는 react의 이중 사본이 생성됩니다. 내 lib 내에서 node_modules 폴더를 삭제하거나 npm link 이외의 것을 사용하여 설치하면 yes ofc가 작동합니다 (피어 종속성 또는 정확히 동일한 반응 버전을 사용하는 경우).

따라서 개발 중에이 문제를 해결하려면 별칭 반응을 통해 모든 사람이 동일한 버전을 사용하도록해야합니다. 여기에 언급 된 문제로 인해 config.externals ... 부분 (적어도 저에게는)을 추가하지 않고는 현재 NextJS 버전에서 효과가 없습니다. 아마도 여기에 언급 된 일부 변경 사항 때문에 여기에서 언급 한 것처럼 # 8739?

단지 추가 유사한 문제는 나에게 무슨 일이 일어나고 있지만 (잠재적으로) 때문에 (# 10162에 설명 된대로) 재료-UI 라이브러리로, 지금은 내 임시 수정했다 npm run clean 내 preserve 와 dev 스크립트 :
https://github.com/zeit/next.js/issues/10162#issuecomment -612501431

@timneutkens 이러한 종속성이 자신의 deps (deps 대 peer-dep)를 나열하는 방법과 관련하여 실제 문제가 있음을 이해하지만이를 더 영구적으로 해결하기 위해 자체 앱에서 무엇을 할 수 있는지 알 수 있습니까?

@ ryan-0 특별한 설정이 있습니까? 재료 Ui가 피어 dep로 반응하지 않으면 놀랄 것입니까? 아주 오래된 반응 버전이나 심볼릭 링크를 사용합니까?

특별한 설정이 없습니다 .. 심볼릭 링크 및 반응 없음 16.13.1 -> 문제를 공정하게 만들 수있는 다른 deps가 있지만 적어도 그 재현에 따르면 material-ui / core와 관련이있을 수 있습니다. (우리도 사용) :
https://github.com/zeit/next.js/issues/10162

@ ryan-0 material-ui 폴더 안에 반응이있는 node_modules 폴더가 있습니까?

또한 npm 중복 제거를 실행 한 후 작동이 시작됩니까?

아니요 중첩 된 노드 폴더가있는 것처럼 보이지 않기 때문에 버그가 발생하는 방식에 대해 혼란 스럽습니다. npm dedupe 작동하지 않았습니다. :(

이상하게도 resolve.alias 은 프로젝트 루트 외부의 패키지에 영향을 미치지 않는 것 같습니다.

내 next.config.js 파일은 다음과 같습니다.

const path = require('path')

module.exports = {
  webpack: config => {
    const { alias } = config.resolve || {}
    alias.react$ = path.resolve('node_modules/react')
    alias['react-dom$'] = path.resolve('node_modules/react-dom')

    config.resolve = {
      ...config.resolve,
      alias,
    }

    return config
  }
}

Lerna monorepo에있는 로컬 패키지에 yarn link 사용하고 있습니다. node_modules 에는 react 복사본이 포함되어 있지 않지만 monorepo 루트 에는 포함되어 있습니다. resolve.alias 를 사용하는 한 차이가있을 것으로 예상하지 않지만, 불행히도 그렇지 않습니다. monorepo 루트에서 react 복사본을 제거한 후 대신 Cannot find module 'react' 오류가 발생합니다.

누군가 이것에 대한 좋은 해결책을 찾았습니까?

내 '소비자'프로젝트에 추가하기 위해 next-transpile-modules 을 사용하는 링크 된 다음 라이브러리가 있습니다. 문서에 언급 된대로 react 별칭을 next.config.json 했지만 충분하지 않았습니다. React에 대한 중복 종속성 오류가 여전히 발생합니다.

@mweststrate의 relative-deps 를 사용해 볼 수 있습니다.

누군가 이것에 대한 좋은 해결책을 찾았습니까?

내 '소비자'프로젝트에 추가하기 위해 next-transpile-modules 을 사용하는 링크 된 다음 라이브러리가 있습니다. 문서에 언급 된대로 react 별칭을 next.config.json 했지만 충분하지 않았습니다. React에 대한 중복 종속성 오류가 여전히 발생합니다.

예, 위의 게시물을 참조하십시오. 샘플에 config.externals 부분을 추가해야합니다. 그러면 별칭이 다시 작동하기 시작합니다.

@johot 귀하의 솔루션을 시도했지만 저에게 효과적이지 않았습니다. 이상한 오류가 발생하기 시작했지만 주로 솔루션을 시도한 후 cannot destructure property 'query' of 'Object(...)(...)' as it is null 입니다. 이 경우 널로서 본 목적은 인 useRouter 에서 next/router .

@aleclarson 팁 주셔서 감사합니다. 다음 설정에서 작동하지 않으면 시도해 보겠습니다. 현재 사용하고 있습니까?

next-transpile-modules 및 Yarn을 사용하는 경우 솔루션은 매우 간단합니다. https://github.com/martpie/next-transpile-modules#i -have-trouble-with-duplicated-dependencies-or-the -잘못된 후크 통화 오류 반응

npm 사용하는 경우 여전히 해결책을 찾고 있습니다 .c

좋아, 그래서 최종 해결책은 yarn link 에서 yalc 로 마이그레이션하는 것이 었습니다. 파일 변경 사항을 감시하고 파일을 dist 폴더에 복사 한 다음 변경 사항을 yalc 저장소에 푸시하는 gulp 작업이 있습니다.

내 '소비자'에서 tsconfig.json 를 수정하여 다음과 같은 경로를 해결했습니다.

 "paths": {
      "~/*": ["/src/*"],
      "my-library/*": ["./node_modules/my-library/dist/*"]
    },

그리고 next.config.js 에 다음을 추가했습니다.

 experimental: {
      jsconfigPaths: true, // enables it for both jsconfig.json and tsconfig.json
    }

따라서 다음은 tsconfig.json paths 기반으로 경로를 해결할 수 있습니다. 여기에 더 많은 정보가

간단히 말해서 yalc + next-transpile-modules 하면 로컬 개발 설정이 많이 향상되었습니다. 중복 종속성 및 이상한 오류가 없습니다. 직접 사용하여 모듈 추가의 동작 yarn add 하고와 모듈을 연결 yalc 거의 동일합니다.

styled-components 에 의존하는 로컬로 연결된 라이브러리를 사용하는 경우 다음을 참조하십시오. https://styled-components.com/docs/faqs#linking -in-an-ssr-scenario

server/index.js :

const moduleAlias = require('module-alias');
moduleAlias.addAlias('styled-components', path.join(__dirname, '../node_modules/styled-components'));

그러나 next.config.js 다음을 추가해야합니다.

config.resolve.alias['react'] = path.resolve(__dirname, './node_modules', 'react');
config.resolve.alias['react-dom'] = path.resolve(__dirname, './node_modules', 'react-dom');
config.resolve.alias['prop-types'] = path.resolve(__dirname, './node_modules', 'prop-types');
config.resolve.alias['styled-components'] = path.resolve(__dirname, './node_modules', 'styled-components');

도움이 되었기를 바랍니다.

테스트 대상 :

다음 : 9.3.5
반응 : 16.13.1
스타일 구성 요소 : 5.1.0

여러분, 간단한 수정은 다음을 수행하여 react, next 및 react-dom의 글로벌 버전을 제거합니다.
npm remove -g react next react-dom

여러분, 간단한 수정은 다음을 수행하여 react, next 및 react-dom의 글로벌 버전을 제거합니다.

npm remove -g react next react-dom

나는 당신을 위해 일한 것이 기쁘지만이 스레드의 많은 사람들이 이러한 종속성을 전 세계적으로 설치했는지 의심합니다.

웹뿐만 아니라!
반응 16.9
반응 네이티브 0.62
Android에서 실행
아마도 역사상 가장 작은 재생산 자일까요?

import React, { Component, useState } from 'react';
import {
  AppRegistry,
} from 'react-native';

function hooker() {
  const [count, setCount] = useState(0)
}

class ClassA extends Component {
  constructor(props) {
    super(props)
    //hooker();  //Invalid hook call Error
  }
  componentDidMount(){
    //hooker();  //Invalid hook call Error
  }
  render() {
    hooker();  //Invalid hook call Error
    return (      
      null   
    );
  }
} 
export default function App(props) {
  //hooker();  //No problem
  return (
    <ClassA/>
  );
};

AppRegistry.registerComponent('default', () => App);

나는 또한이 문제에 직면하여 yarn 대신 npm (npm 사용시 작동하지 않음)을 사용하고 https://github.com/vercel/next.js/를 사용하여 싸웠습니다.

이것에 대한 해결책이 있습니까?

버전 9.4.4에서 완전히 고착되었습니다.

아래의 개인 경로에 대해 HOC에서 발생하는 문제입니다. 나는 또한 withRouter 사용을 시도했지만 대신 래핑 된 구성 요소에 동일한 오류가 발생합니다.

import { useRouter } from 'next/router'

function withPrivateRoute(WrappedComponent) {
const router = useRouter();                    //**** ERROR IS THROWN HERE *******
class WPR extends React.Component {
    componentDidMount(){
        console.log('wrappeed', WrappedComponent);
        // const { router } = this.props;
        const intendedRoute = router.pathname;
        // const isAdmin = !!cookies.get('isAdmin');
        // const isAuthenticated = !!cookies.get('username');
        const isAuthenticated = false;
        const isAdmin = false;
        if (!isAuthenticated) {
            router.push({
                pathname: '/login',
                query: { from: intendedRoute },
            });
        }
        if (
            isAuthenticated &&
            router.pathname.includes('admin') &&
            !isAdmin
        ) {
            router.push('/');
        }
    }

    render() {
        return ({ ...props }) => <WrappedComponent {...props} />;
    }
}
return WPR;
 }

  export default withPrivateRoute;

동일한 문제가 발생하여 이전 지점 (이 문제가 없다고 가정)으로 돌아가서 최신 코드 파일을 파일별로 추가하고 문제가

import { useToasts, AppearanceTypes } from 'react-toast-notifications';

export const showToast = (message: string, appearance: AppearanceTypes) => {
    const { addToast } = useToasts();
    addToast(message, {
        appearance,
    });
};

토스트 서비스를 사용하고 있었는데 모든 요청에 ​​오류가 발생하면 showToast 팝업이 표시되지만 이제이 오류로 인해이 서비스를 사용하지 않을 것 같습니다.

@arcanis의 PR https://github.com/vercel/next.js/pull/8739 와 관련이 있음을 확인할 수 있습니다.
언급 된 PR이 병합 된 이유를 제거하는 Rush 및 pnpm 과 함께 monorepo 설정을 사용하고 있습니다. 또한 https://github.com/vercel/next.js/issues/9022#issuecomment -610255555에서 만든 @timneutkens 의 요점이 적용되지 않으며 다음과 같은 구조를 가지고 있습니다.

  dependencies: next, react, react-dom, library
library
  devDependencies: react, react-dom (for tests)
  peerDependencies: react, react-dom

library.devDependencies.(react|react-dom) 는 website.dependencies(react|react-dom) 와 정확히 동일한 파일을 가리키는 심볼릭 링크입니다. 그러나 https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/lib/resolve-request.ts#L16 에서 사용되는 [email protected] 처럼 보입니다. 심볼릭 링크를 보존하여 기본 Node.js 동작.

결과는 다음과 같습니다.

1. library 에서 코드를 트랜스 파일 하기위한
2. resolve.symlinks = true 내부의 웹팩 구성에서 next.config.js
3. 로부터 요청 된 외관 조작 library 으로부터 요청하기 library/node_modules (제대로 해결 모듈을 서버 측 빌드)
4. https://github.com/vercel/next.js/blob/f98e38c9b634b85e6679e7b5f953a9d98074cfc3/packages/next/build/webpack-config.ts#L601 줄 주석 처리

이것은 의도 한대로 작동하지만, Next.js가 Apple 과 같은 중요한 웹 사이트를 지원하고 있다는 점을 감안할 때, 그 큰 프로젝트에서 공유 코드를 관리하는 데 자주 사용되는 모노 레포에 대한 더 나은 지원을 기대할 수 있습니까?

나는 이것들을 가지고 놀았고 HOC를 사용할 때 오류가 발생하지만 구성 요소를 래퍼로 사용하면 제대로 작동한다는 것을 알았습니다.

누군가 관심이 있다면 이것을 재현 할 수있는 repo가 ​​있습니다 : next-components-hooks-error

HOC 테스트-오류 발생

components/withPrivateRoute.js -> 상위 구성 요소

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
const withPrivateRoute = WrappedComponent => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return ({ ...props }) => !loading && <WrappedComponent test={test} {...props}/>;
};

export default withPrivateRoute;

pages/hoc.js -> 작동하지 않음 (HOC 사용 페이지)

import React from 'react';
import withPrivateRoute from '../components/withPrivateRoute';

const HocTest = () => <p>Authorization HOC Test!</p>;

export default withPrivateRoute(HocTest);

래퍼 구성 요소 테스트

components/AuthLayout.js -> 구성 요소 (래퍼)

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';

const AuthLayout = ({ children }) => {

    const router = useRouter();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const user = localStorage.getItem('user');
        console.log(user);

        if (!user) {
            router.push('/login');
        } else {
            setLoading(false);
        }

    }, []);

    return !loading && (
        <React.Fragment>
            {children}
        </React.Fragment>
    );
};

export default AuthLayout;

pages/wrapper.js -> 래퍼 구성 요소를 사용하는 페이지, 작동합니다.

import React from 'react';
import AuthLayout from '../components/AuthLayout';

const WrapperTest = () => (
    <AuthLayout>
        <p>Authorization Wrapper Test!</p>
    </AuthLayout>
);

export default WrapperTest;

@Timer 에 진전이 있습니까?

https://github.com/vercel/next.js/issues/9022#issuecomment -609969178을 솔루션으로 사용하여 문제를 해결했습니다.
내 문제는 내 라이브러리 리포지토리를 사용하고 yarn link 내 앱 리포지토리와 함께 사용하는 것입니다.
예
package.json

{
  "dependencies": {
    "next": "9.5.1",
    "myUILibrary": "git+ssh://[email protected]/MyRepo/library-web-ui.git#master",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

yarn link myUILibrary 도 react 설치된 내 로컬 체크 아웃 MyRepo/library-web-ui 로 보냅니다.

솔루션을 게시 해 주신 @johot 에게 감사드립니다.

5 🌟 3 점 만점 (예! 모든 별과 그 이상!)

Rush + PNPM monorepo에서 @ wasd171 과 동일한 경험을 확인할 수 있습니다. 중간에 ~9.4.4 만 사용하겠습니다.

Rush + PNPM과 똑같은 문제가 있습니다 👍

이 문제를 일으키는 매우 어리석은 오류가 발생했습니다.

import React, { useState } from 'React';

대신 R의 어린애들입니다 사람들을 대피의 r에 어린애들입니다 사람들을 대피를해야한다 :

import React, { useState } from 'react';

예. 9.5.x 볼 수 있습니다.- 9.4.4 다운 그레이드하는 작업- next-site 로도 재현 할 수 있습니다.

9.5.2에서이 오류를 수정할 수 없습니다. 그러나 모든 것이 트릭없이 9.5.3에서 완벽하게 작동합니다.

pnpm을 사용하지 않습니다.

너무 빨리 말 했어요. 9.5.3에서도 작동한다고 생각하지 않습니다.

지금은 9.5.3에서 안정적으로 작동합니다. 🤷 더 이상 무슨 일이 일어나고 있는지 모르겠습니다.

9.5.3이 나를 위해 작동하지 않습니다-동일한 오류. Rush + NPM을 사용하고 있습니다. 알려진 해결 방법이 있습니까? (btw는 더 이상 9.0.6이 아니기 때문에 제목을 업데이트 할 수 있습니다)

참고로, 내 조직이 npm 에서 yarn 로 이동하기로 결정한 이유 중 하나였습니다. (불행히도) 훨씬 더 잘 재생됩니다. 그 움직임은 성가 시지만 우리는 지금 매우 행복합니다.

후크가있는 트랜스 파일 된 모듈도 나에게 적합하지 않습니다.

그건 그렇고, next-transpile-modules 및 npm 사용할 때이 문제를 경험하는 사람에게 문제와 잠재적 솔루션을 설명하는 FAQ 섹션을 작성했습니다. https://www.npmjs.com/package/ 다음 transpile-modules # i- 중복 된 종속성 또는 유효하지 않은 후크 호출 오류로 인해 문제가 발생했습니다.

프로젝트 루트에 원사의 버전 해상도를 수동으로 추가하여이 문제를 해결했습니다. 따라서 모든 반응 종속성을 루트 package.json 로 이동하는 대신 다음 줄을 추가했습니다.

  "resolutions": {
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }

참조 : https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

제 경우에는 로컬 빌드가 작동하는 반면 Vercel의 빌드는 Invalid hook call 오류를보고했다는 점에 주목할 가치가 있습니다.

Next 10의 캐치 올 페이지로 _app.js 에서 비슷한 문제를 실험했습니다.

야,

제 경우에는 npm link 를 통해 링크 된 모듈을 트랜스 파일했습니다.

React와 같은 종속성은 여러 인스턴스를 다운로드했기 때문에 일반 종속성 대신 peerDependencies 로 포함되어야합니다. 따라서 잘못된 후크 오류가 발생하는 경우 다음 단계를 시도하십시오.

1. 타사 모듈을 기본 프로젝트의 종속성으로 포함합니다.
2. npm install 를 실행하여 모든 모듈을 설치하십시오.
3. 터미널 / 콘솔을 열고 모듈로 이동 한 다음 sudo npm link 를 실행합니다.
4. 메인 프로젝트로 돌아가 npm link @example/project 실행합니다. Visual Studio Code를 사용하는 경우 node_modules 내부의 모듈 이름 근처에 작은 화살표 아이콘이 표시됩니다.
5. npm run dev 실행하십시오.

다시 말하지만, @ example / project에 일반 종속성 대신 React를 peerDependency로 포함해야합니다.

도움이 되었기를 바랍니다.

내부에 next.js 프로젝트가있는 monorepo가 ​​있습니다. storybook 설치 후 잘못된 후크 호출로 동일한 문제가 발생했습니다. @aengl 의 제안에 따라 문제가 해결되었습니다. resolutions 을 루트 수준 package.json .

"resolutions": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
}

그래도 더 많은 클라이언트와 패키지를 추가하면 이것이 좋은 솔루션이 될지 확실하지 않습니다.