5

問題の説明:

  • 私は現在、というパッケージを作成していますeformless

  • CRAを使用sandboxして、パッケージをリンクしたというディレクトリを作成しました。

  • テストしようとしているリンクされたパッケージでサンドボックス反応アプリを起動しようとすると、次のエラーが発生し続けます。

    // inside my 'sandbox' App.tsx
import React from 'react'
import { useField } from 'eformless'

const App = () => {
  const [test, handleChange] = useField('testing')
  return (
    <input type="text" value={test.value} onChange={handleChange} />
  )
}

エラー: 無効なフック呼び出しです。フックは、関数コンポーネントの本体内でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。

  1. React とレンダラー (React DOM など) のバージョンが一致していない可能性があります。
  2. フックのルールに違反している可能性があります
  3. 同じアプリに複数の React のコピーがある可能性があります。この問題をデバッグして修正する方法についてのヒントについては、stackoverflow ToS により変更されたリンクを参照してください。

問題が発生する場所:

この問題は、React からインポートされたフックを使用するカスタム フックを作成した私のライブラリを指しているようです。
私のコードからの問題のある抜粋は次のとおりです。

export const useField = <T>(
  input: T
  ...checkFunctions: Array<(...args: unknown[]) => unknown>
): [FieldType<T>, FieldHandlerFunction<T>, FieldHandlerFunction<T>] => {
  const [value, setValue] = useState(input)
  const [name, setName] = useState('')
  // Issue seems to be here ^
}

私のセットアップはかなり正常で、他のプロジェクトでは正常に動作しているようです:

  • 最初に、ライブラリをバンドルしましたrollup -c
  • eformlessライブラリフォルダー内にリンクを作成しましたnpm link
  • sandboxそして、私のフォルダー内にシンボリックリンクを作成しましたnpm link eformless

私が試したこと：

私は当然、エラーメッセージにあるリンクを介して問題を解決しようとしました. ここで述べたように、これは独自のライブラリをリンクするときに問題になるようです

この問題は、npm リンクまたは同等のものを使用するときにも発生する可能性があります。その場合、バンドラーは 2 つの React を「見る」可能性があります。1 つはアプリケーション フォルダーにあり、もう 1 つはライブラリ フォルダーにあります。myapp と mylib が兄弟フォルダーであると仮定すると、考えられる修正の 1 つは、mylib から npm link ../myapp/node_modules/react を実行することです。これにより、ライブラリはアプリケーションの React コピーを使用するようになります。

フォルダーで実行しnpm link ../sandbox/node_modules/reactましたがeformless、ノードサーバーを閉じて再コンパイルした後でも、これは役に立たないようです。

いずれにせよ、runnign は単一バージョンの react しか表示せず、カスタム フック内でトップレベルで使用されnpm ls reactていることを考えると、それは有効であるはずなので、本当に混乱しているように思えます。useState

問題の再現

両方のリポジトリは公開されています

4

3 に答える 3