Feliz: Error después de cambiar el nombre del componente React: error no detectado: el tipo de elemento no es válido: se esperaba una cadena

Hola @theimowski Recientemente me encontré con esto también. Tendré que investigarlo, pero tal vez @alfonsogarciacaro sepa más al respecto. ¿Puedes intentar usar la última versión de Fable v3.1.10? la plantilla está en 3.1.5

Parece un problema de Fable.

¿Puedes probar con 3.1.11? Esto probablemente esté relacionado con https://github.com/fable-compiler/Fable/issues/2413

Confirmé que el problema se solucionó a partir de la v3.1.11, así que @theimowski , ¿puedes intentarlo también?

Todavía no funciona como se esperaba en Fable 3.1.11.

Tratando de investigar esto un poco más:

1. Cambiar HelloWorld -> HelloWorlds pero solo en 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.

Hay un error de compilación de FSHARP, pero el paquete web compila y trata el error como una advertencia, WDS actualiza la página y puede ver el error de reacción en el asunto representado en la pantalla.

1. Cambie HelloWorld -> HelloWorlds en Main.fs : compilación exitosa, pero React falla y el error se registra en la consola de desarrollo

2. Actualizar la página - funciona bien después

Esto podría ser algún tipo de problema de condición de carrera, en la plantilla Feliz si cambia el nombre en ambos archivos al mismo tiempo, generalmente funcionará bien, sin embargo, en un proyecto un poco más grande, al cambiar el nombre del componente puedo ver el siguiente comportamiento en los registros (nota la advertencia en el medio):

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 Creo que esto podría ser un caso límite para el complemento de actualización rápida en el que debería activar una actualización de página completa al cambiar el archivo de punto de entrada.

Necesito confirmar la teoría en algún momento: el problema no ocurrirá cuando el componente al que se hace referencia no esté en el archivo del punto de entrada. Entonces, si tiene App.fs -> Middle.fs -> Main.fs (punto de entrada) y solo cambia App.fs o Middle.fs

¿Puedes probar esto también?

@theimowski He cruzado el problema en react-refresh#330

La actualización de reacción ocurre cuando se usa el paquete web más reciente, así que volví al paquete web v4 hasta que se resolvió el problema y publiqué una plantilla Feliz funcional (ahora con más componentes de ejemplo) a partir de la v3.6

Gracias, sí, de hecho, al usar la nueva plantilla feliz, el problema de actualización desapareció.
¿No crees que sería mejor si el error de compilación de F# fallara en la actualización del paquete web? ¿O es algo difícil de lograr?
De vuelta con Fable 2.* y el servidor de desarrollo webpack, cuando había un error de compilación de F#, la actualización no se activaba.

¿No crees que sería mejor si el error de compilación de F# fallara en la actualización del paquete web? ¿O es algo difícil de lograr?

No es imposible: probablemente requiere emitir código JS que _intencionalmente_ tiene algunos errores de sintaxis para romper lo que está haciendo el paquete web, pero dudo que alguien quiera eso (especialmente @alfonsogarciacaro) 😉

Creo que la situación actual está bien porque cuando el paquete web emite una advertencia, Fable emite un error que es una prioridad más alta para que el desarrollador lo solucione. Una vez que se corrige el error de Fable (compilación), la advertencia del paquete web también desaparece. ¿Me estoy perdiendo de algo?

Mi preferencia personal sería que un paso fallido resulte en no ejecutar los pasos que siguen; de lo contrario, es posible que observe cosas que se actualizan en su navegador y que se engañe pensando que todo está bien, mientras que su código F# en realidad no se está compilando.

Pero react-refresh le mostrará una página de error en rojo con un mensaje de error en el navegador incluso si la terminal muestra una advertencia de paquete web

Ya veo - correcto, en ese caso está bien.
Entonces, el único problema es lo que describiste en https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330