Feliz: Fehler nach dem Umbenennen der React-Komponente: Nicht erfasster Fehler: Elementtyp ist ungültig: Es wurde ein String erwartet

Hallo @theimowski , das habe ich auch vor kurzem erlebt. Ich muss mich darum kümmern, aber vielleicht weiß @alfonsogarciacaro mehr darüber. Können Sie auch versuchen, das neueste Fable v3.1.10 zu verwenden? die Vorlage ist bei 3.1.5

Sieht aus wie ein Fable-Problem

Können Sie es bitte mit 3.1.11 versuchen? Dies hängt wahrscheinlich mit https://github.com/fable-compiler/Fable/issues/2413 zusammen

Ich habe bestätigt, dass das Problem ab v3.1.11 behoben ist, also @theimowski , kannst du es auch versuchen?

Es funktioniert immer noch nicht vollständig wie erwartet in Fable 3.1.11.

Versuch das mal etwas genauer zu untersuchen:

1. Ändern Sie HelloWorld -> HelloWorlds , aber nur in 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.

Es liegt ein FSHARP-Kompilierungsfehler vor, aber Webpack kompiliert und behandelt den Fehler als Warnung, WDS aktualisiert die Seite und Sie können den React-Fehler im Betreff auf dem Bildschirm sehen

1. Ändern Sie HelloWorld -> HelloWorlds in Main.fs : Kompilierung erfolgreich, aber React schlägt fehl und der Fehler wird in der Entwicklungskonsole protokolliert

2. Aktualisieren Sie die Seite - funktioniert danach einwandfrei

Dies könnte eine Art Race-Condition-Problem sein, wenn Sie in der Feliz-Vorlage beide Dateien gleichzeitig umbenennen, funktioniert es normalerweise gut, aber bei einem etwas größeren Projekt kann ich beim Umbenennen der Komponente das folgende Verhalten in den Protokollen sehen (Hinweis die Warnung in der Mitte):

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 Ich denke, dies könnte tatsächlich ein Grenzfall für das Fast-Refresh-Plugin sein, bei dem es beim Ändern der Einstiegspunktdatei eine vollständige Seitenaktualisierung auslösen sollte.

Ich muss die Theorie irgendwann bestätigen: Das Problem tritt nicht auf, wenn sich die referenzierte Komponente nicht in der Einstiegspunktdatei befindet. Wenn Sie also App.fs -> Middle.fs -> Main.fs (Einstiegspunkt) haben und nur App.fs oder Middle.fs ändern

Kannst du das auch ausprobieren?

@theimowski Ich habe das Problem auf React -Refresh#330 gepostet

Die Reaktionsaktualisierung tritt auf, wenn das neueste Webpack verwendet wird, daher habe ich ein Rollback auf Webpack v4 durchgeführt, bis das Problem behoben ist, und eine funktionierende Feliz-Vorlage (jetzt mit mehr Beispielkomponenten) ab v3.6 veröffentlicht

Danke - ja, mit der neuen Feliz-Vorlage ist das Aktualisierungsproblem tatsächlich verschwunden.
Denken Sie nicht, dass es besser wäre, wenn der F#-Kompilierungsfehler die Aktualisierung des Webpacks fehlschlägt? Oder ist es etwas schwer zu erreichen?
Zurück mit Fable 2.* und dem Webpack-Entwicklungsserver wurde die Aktualisierung nicht ausgelöst, wenn ein F#-Kompilierungsfehler auftrat.

Denken Sie nicht, dass es besser wäre, wenn der F#-Kompilierungsfehler die Aktualisierung des Webpacks fehlschlägt? Oder ist es etwas schwer zu erreichen?

Es ist nicht unmöglich: Wahrscheinlich muss JS-Code ausgegeben werden, der _absichtlich_ einige Syntaxfehler enthält, um das zu unterbrechen, was Webpack tut, aber ich bezweifle, dass das jemand will (insbesondere @alfonsogarciacaro) 😉

Ich denke, die aktuelle Situation ist in Ordnung, denn wenn Webpack eine Warnung ausgibt, gibt Fable einen Fehler aus, dessen Behebung für den Entwickler eine höhere Priorität hat. Sobald der Fable-(Compile-)Fehler behoben ist, verschwindet auch die Webpack-Warnung. Übersehe ich etwas?

Meine persönliche Präferenz wäre, dass ein fehlgeschlagener Schritt dazu führt, dass die folgenden Schritte nicht ausgeführt werden. Andernfalls könnten Sie feststellen, dass sich Dinge in Ihrem Browser aktualisieren, und Sie könnten sich täuschen lassen, dass alles in Ordnung ist, während Ihr F#-Code tatsächlich nicht kompiliert wird.

React-Refresh zeigt Ihnen jedoch eine Fehlerseite in Rot mit einer Fehlermeldung im Browser, selbst wenn das Terminal eine Webpack-Warnung anzeigt

Ich verstehe - richtig, in diesem Fall ist es in Ordnung.
Das einzige Problem ist dann das, was Sie in https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330 beschrieben haben