Feliz: Kesalahan setelah mengganti nama React Component: Uncaught Error: Jenis elemen tidak valid: mengharapkan string

Hai @theimowski Saya baru-baru ini juga mengalami ini. Saya perlu memeriksanya tetapi mungkin @alfonsogarciacaro tahu lebih banyak tentangnya. Bisakah Anda juga mencoba menggunakan Fable v3.1.10 terbaru? templatenya ada di 3.1.5

Sepertinya masalah Fabel

Bisakah Anda mencoba dengan 3.1.11? Ini mungkin terkait dengan https://github.com/fable-compiler/Fable/issues/2413

Saya telah mengonfirmasi bahwa masalah telah diperbaiki pada v3.1.11 jadi @theimowski dapatkah Anda juga mencobanya?

Masih belum sepenuhnya berfungsi seperti yang diharapkan pada Fable 3.1.11.

Mencoba menyelidiki ini sedikit lebih jauh:

1. Ubah HelloWorld -> HelloWorlds tetapi hanya di 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.

Ada kesalahan kompilasi FSHARP, tetapi webpack mengkompilasi dan memperlakukan kesalahan sebagai peringatan, WDS menyegarkan halaman dan Anda dapat melihat kesalahan Bereaksi pada subjek yang ditampilkan di layar

1. Ubah HelloWorld -> HelloWorlds di Main.fs : kompilasi berhasil, tetapi React gagal dan kesalahan dicatat ke konsol dev

2. Segarkan halaman - berfungsi dengan baik setelahnya

Ini mungkin semacam masalah kondisi balapan, pada templat Feliz jika Anda mengganti nama di kedua file secara bersamaan, biasanya akan berfungsi dengan baik, namun pada proyek yang sedikit lebih besar, ketika mengganti nama komponen saya dapat melihat perilaku berikut di log (catatan peringatan di tengah):

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 Saya pikir ini mungkin benar-benar kasus tepi untuk plugin penyegaran cepat di mana ia harus memicu penyegaran halaman penuh setelah mengubah file titik masuk.

Saya perlu mengkonfirmasi teori kapan-kapan: masalah tidak akan terjadi ketika komponen yang direferensikan tidak ada dalam file titik masuk. Jadi jika Anda memiliki App.fs -> Middle.fs -> Main.fs (titik masuk) dan Anda hanya mengubah App.fs atau Middle.fs

Bisakah Anda juga mencoba ini?

@theimowski Saya telah memposting silang masalah ini di react-refresh#330

React-refresh terjadi saat menggunakan webpack terbaru jadi saya memutar kembali ke webpack v4 hingga masalah teratasi dan menerbitkan template Feliz yang berfungsi (sekarang dengan lebih banyak komponen contoh) pada v3.6

Terima kasih - ya memang menggunakan template feliz baru masalah penyegaran hilang.
Tidakkah menurut Anda akan lebih baik jika kesalahan kompilasi F# gagal menyegarkan webpack? Atau sesuatu yang sulit untuk dicapai?
Kembali dengan Fable 2.* dan server dev webpack, ketika ada kesalahan kompilasi F#, penyegaran tidak akan dipicu.

Tidakkah menurut Anda akan lebih baik jika kesalahan kompilasi F# gagal menyegarkan webpack? Atau sesuatu yang sulit untuk dicapai?

Bukan tidak mungkin: mungkin perlu memancarkan kode JS yang _secara sengaja_ memiliki beberapa kesalahan sintaks untuk memecahkan apa yang dilakukan webpack tapi saya ragu ada yang menginginkan itu (terutama @alfonsogarciacaro)

Saya pikir situasi saat ini baik-baik saja karena ketika webpack mengeluarkan peringatan, Fable mengeluarkan kesalahan yang merupakan prioritas lebih tinggi untuk diperbaiki oleh pengembang. Setelah kesalahan Fable (kompilasi) diperbaiki, peringatan webpack juga hilang. Apakah saya melewatkan sesuatu?

Preferensi pribadi saya adalah bahwa langkah yang gagal menghasilkan tidak menjalankan langkah-langkah yang mengikuti - jika tidak, Anda mungkin mengamati hal-hal yang menyegarkan di browser Anda dan Anda mungkin tertipu bahwa semuanya baik-baik saja, sementara kode F# Anda sebenarnya tidak dikompilasi.

Tetapi react-refresh akan menampilkan halaman kesalahan berwarna merah dengan pesan kesalahan pada browser meskipun terminal menampilkan peringatan webpack

Saya melihat - benar, dalam hal ini tidak apa-apa.
Satu-satunya masalah adalah apa yang Anda jelaskan di https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330