Feliz: Reactコンポーネントの名前を変更した後のエラー：キャッチされないエラー：要素タイプが無効です：文字列が必要です

こんにちは@theimowski私は最近これにも遭遇しました。 私はそれを調べる必要がありますが、おそらく@alfonsogarciacaroはそれについてもっと知っています。 最新のFablev3.1.10を使用してみることもできますか？ テンプレートは3.1.5にあります

寓話の問題のようです

3.1.11で試していただけますか？ これはおそらくhttps://github.com/fable-compiler/Fable/issues/2413に関連しています

この問題はv3.1.11で修正されていることを確認したので、 @ theimowskiも試してみてください。

Fable3.1.11ではまだ完全には機能しません。

これをもう少し調査しようとしています：

1. HelloWorld -> HelloWorldsを変更しますが、 App.fsのみを変更します。

Compiling src/App.fsproj...
F# compilation finished in 17ms

Fable compilation finished in 31ms
/Users/theimowski/sandbox/feliz/rename/src/Main.fs(9,1): (12,2) error FSHARP: A unique overload for method 'render' could not be determined based on type information prior to this program point. A type annotation may be needed.

Known types of arguments: 'a * Browser.Types.HTMLElement

Candidates:
 - static member ReactDOM.render : element:(unit -> Fable.React.ReactElement) * container:Browser.Types.HTMLElement -> 'a0
 - static member ReactDOM.render : element:Fable.React.ReactElement * container:Browser.Types.HTMLElement -> 'a (code 41)
/Users/theimowski/sandbox/feliz/rename/src/Main.fs(10,9): (10,19) error FSHARP: The value, constructor, namespace or type 'HelloWorld' is not defined. Maybe you want one of the following:
   HelloWorlds (code 39)
Watching src
ℹ ｢wdm｣: Compiling...
⚠ ｢wdm｣: assets by status 3.64 MiB [cached] 1 asset
assets by path *.js 71.9 KiB
  asset app.js 66.3 KiB [emitted] (name: app)
  asset app.cf083007398aca78c7c4.hot-update.js 5.54 KiB [emitted] [immutable] [hmr] (name: app)
asset app.cf083007398aca78c7c4.hot-update.json 27 bytes [emitted] [immutable] [hmr]
Entrypoint app 3.71 MiB = vendors.js 3.64 MiB app.js 66.3 KiB app.cf083007398aca78c7c4.hot-update.js 5.54 KiB
cached modules 1.38 MiB [cached] 74 modules
runtime modules 29.3 KiB 13 modules
./src/App.fs.js 2.75 KiB [built] [code generated]

WARNING in ./src/Main.fs.js 8:35-45
export 'HelloWorld' (imported as 'HelloWorld') was not found in './App.fs.js' (possible exports: HelloWorlds)

webpack 5.14.0 compiled with 1 warning in 139 ms
ℹ ｢wdm｣: Compiled with warnings.

FSHARPコンパイルエラーがありますが、webpackはエラーをコンパイルして警告として扱い、WDSはページを更新し、画面に表示された件名にReactエラーを表示できます。

1. $＃$ Main.fs $＃$のHelloWorld -> HelloWorldsを変更：コンパイルは成功しましたが、Reactは失敗し、エラーは開発コンソールに記録されます

2. ページを更新します-後で正常に動作します

これはある種の競合状態の問題である可能性があります。Felizテンプレートで両方のファイルの名前を同時に変更すると、通常は正常に機能しますが、少し大きいプロジェクトでは、コンポーネントの名前を変更すると、ログに次の動作が表示されます（注真ん中の警告）：

Compiling src/Client/Client.fsproj...
F# compilation finished in 67ms
Compiled src/Client/App.fsℹ ｢wdm｣: Compiling...
⚠ ｢wdm｣: Hash: 615d2643d48416b2ff41
Version: webpack 4.43.0
Time: 456ms
Built at: 03/17/2021 9:30:04 PM
                                 Asset       Size  Chunks                               Chunk Names
app.e781f5f7185376d5a0d3.hot-update.js    9.4 KiB     app  [emitted] [immutable] [hmr]  app
                                app.js   4.69 MiB     app  [emitted]                    app
  e781f5f7185376d5a0d3.hot-update.json   45 bytes          [emitted] [immutable] [hmr]
                            index.html  670 bytes          [emitted]
 + 1 hidden asset
Entrypoint app = vendors~app.js app.js app.e781f5f7185376d5a0d3.hot-update.js
[./src/Client/App.fs.js] 1.32 KiB {app} [built]
    + 382 hidden modules

WARNING in ./src/Client/App.fs.js 28:21-32
"export 'HelloWorlds' was not found in './Index.fs.js'
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       4 modules
ℹ ｢wdm｣: Compiled with warnings.

Fable compilation finished in 1635ms
Compiled src/Client/Index.fsWatching src
ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 837f9683f0ac04dcc729
Version: webpack 4.43.0
Time: 820ms
Built at: 03/17/2021 9:30:06 PM
                                 Asset       Size  Chunks                               Chunk Names
  615d2643d48416b2ff41.hot-update.json   45 bytes          [emitted] [immutable] [hmr]
app.615d2643d48416b2ff41.hot-update.js    141 KiB     app  [emitted] [immutable] [hmr]  app
                                app.js   4.69 MiB     app  [emitted]                    app
                            index.html  670 bytes          [emitted]
 + 1 hidden asset
Entrypoint app = vendors~app.js app.js app.615d2643d48416b2ff41.hot-update.js
[./src/Client/Index.fs.js] 29.5 KiB {app} [built]
    + 382 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       4 modules
ℹ ｢wdm｣: Compiled successfully.

@theimowskiこれは、実際には、エントリポイントファイルを変更したときにページ全体の更新をトリガーする必要があるfast-refreshプラグインのエッジケースである可能性があると思います。

いつか理論を確認する必要があります。参照されているコンポーネントがエントリポイントファイルにない場合、問題は発生しません。 したがって、App.fs-> Middle.fs-> Main.fs（エントリポイント）があり、App.fsまたはMiddle.fsのみを変更する場合

これも試してみませんか？

@theimowski私はreact-refresh＃330で問題をクロスポストしました

最新のwebpackを使用するとreact-refreshが発生するため、問題が解決するまでwebpack v4にロールバックし、v3.6の時点で動作するFelizテンプレート（現在はより多くのサンプルコンポーネントを含む）を公開しました

ありがとう-はい、確かに新しいfelizテンプレートを使用すると、更新の問題はなくなりました。
F＃コンパイルエラーがwebpackの更新に失敗した方がいいと思いませんか？ それとも達成するのが難しいことですか？
Fable 2. *とwebpackdev serverに戻ると、F＃コンパイルエラーが発生した場合、更新はトリガーされませんでした。

F＃コンパイルエラーがwebpackの更新に失敗した方がいいと思いませんか？ それとも達成するのが難しいことですか？

それは不可能ではありません：おそらく、webpackが実行していることを壊すために_意図的に_いくつかの構文エラーがあるJSコードを発行する必要がありますが、誰もがそれを望んでいるとは思えません（特に@alfonsogarciacaro）😉

webpackが警告を発しているとき、Fableは開発者が修正する優先度の高いエラーを発しているので、現在の状況は問題ないと思います。 Fable（コンパイル）エラーが修正されると、webpackの警告も消えます。 私は何かが足りないのですか？

私の個人的な好みは、失敗したステップによって次のステップが実行されないことです。そうしないと、ブラウザーで更新が行われ、F＃コードが実際にコンパイルされていないのに、すべてが正常であることに騙される可能性があります。

ただし、react-refreshは、端末にWebpackの警告が表示されている場合でも、ブラウザにエラーメッセージを含むエラーページを赤で表示します。

なるほど、そうですね、その場合は問題ありません。
唯一の問題は、 https：//github.com/pmmmwh/react-refresh-webpack-plugin/issues/330で説明した内容です。