Feliz: Erreur après avoir renommé le composant React : erreur non interceptée : le type d'élément n'est pas valide : une chaîne attendue

Salut @theimowski J'ai récemment rencontré cela aussi. Je vais devoir me renseigner, mais peut-être que @alfonsogarciacaro en sait plus. Pouvez-vous également essayer d'utiliser la dernière version de Fable v3.1.10 ? le modèle est à 3.1.5

Ressemble à un problème de Fable

Pouvez-vous s'il vous plaît essayer avec 3.1.11? Ceci est probablement lié à https://github.com/fable-compiler/Fable/issues/2413

J'ai confirmé que le problème est résolu à partir de la v3.1.11, donc @theimowski pouvez-vous également essayer ?

Cela ne fonctionne toujours pas complètement comme prévu dans Fable 3.1.11.

Essayer d'enquêter un peu plus loin:

1. Changer HelloWorld -> HelloWorlds mais seulement dans 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.

Il y a une erreur de compilation FSHARP, mais webpack compile et traite l'erreur comme un avertissement, WDS actualise la page et vous pouvez voir l'erreur React dans le sujet rendu à l'écran

1. Changer HelloWorld -> HelloWorlds dans Main.fs : compilation réussie, mais React échoue et l'erreur est consignée dans la console de développement

2. Rafraîchir la page - fonctionne bien ensuite

Cela peut être une sorte de problème de condition de concurrence, sur le modèle Feliz si vous renommez dans les deux fichiers en même temps, cela fonctionnera généralement bien, mais sur un projet légèrement plus grand, lorsque vous renommez le composant, je peux voir le comportement suivant dans les journaux (note l'avertissement au milieu):

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 Je pense que cela pourrait en fait être un cas limite pour le plugin d'actualisation rapide où il devrait déclencher une actualisation complète de la page lors de la modification du fichier de point d'entrée.

Je dois parfois confirmer la théorie : le problème ne se produira pas lorsque le composant référencé ne se trouve pas dans le fichier de point d'entrée. Donc, si vous avez App.fs -> Middle.fs -> Main.fs (point d'entrée) et que vous ne modifiez que App.fs ou Middle.fs

Pouvez-vous également essayer cela?

@theimowski J'ai posté le problème sur react-refresh # 330

L'actualisation de la réaction se produit lors de l'utilisation du dernier webpack, donc je suis revenu au webpack v4 jusqu'à ce que le problème soit résolu et publié un modèle Feliz fonctionnel (maintenant avec plus d'exemples de composants) à partir de la v3.6

Merci - oui, en effet, en utilisant le nouveau modèle feliz, le problème de rafraîchissement a disparu.
Ne pensez-vous pas que ce serait mieux si l'erreur de compilation F # échouait lors de l'actualisation du webpack? Ou est-ce quelque chose de difficile à réaliser ?
De retour avec Fable 2.* et le serveur de développement webpack, lorsqu'il y avait une erreur de compilation F#, l'actualisation n'était pas déclenchée.

Ne pensez-vous pas que ce serait mieux si l'erreur de compilation F # échouait lors de l'actualisation du webpack? Ou est-ce quelque chose de difficile à réaliser ?

Ce n'est pas impossible : il faut probablement émettre du code JS qui contient _intentionnellement_ des erreurs de syntaxe pour casser ce que fait Webpack, mais je doute que quelqu'un veuille cela (surtout @alfonsogarciacaro) 😉

Je pense que la situation actuelle est correcte car lorsque Webpack émet un avertissement, Fable émet une erreur qui est une priorité plus élevée pour le développeur à corriger. Une fois l'erreur Fable (compilation) corrigée, l'avertissement webpack disparaît également. Est-ce que je manque quelque chose?

Ma préférence personnelle serait qu'une étape défaillante entraîne la non-exécution des étapes qui suivent - sinon vous pourriez observer des choses se rafraîchir dans votre navigateur et vous pourriez vous faire berner que tout va bien, alors que votre code F # ne compile pas.

Mais react-refresh vous montrera une page d'erreur en rouge avec un message d'erreur sur le navigateur même si le terminal affiche un avertissement webpack

Je vois - d'accord, dans ce cas, ça va.
Le seul problème est alors ce que vous avez décrit dans https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330