Começando do zero com o modelo Feliz, eu o fiz rodar com npm start
e depois renomeei HelloWorld
React Component em App.fs
para HelloWorlds
.
Como resultado, o Fable compila bem sem nenhum aviso, mas o React reclama no tempo de execução (nada é renderizado):
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at createFiberFromTypeAndProps (react-dom.development.js?61bb:25058)
at createFiberFromElement (react-dom.development.js?61bb:25086)
at reconcileSingleElement (react-dom.development.js?61bb:14052)
at reconcileChildFibers (react-dom.development.js?61bb:14112)
at reconcileChildren (react-dom.development.js?61bb:16997)
at updateHostRoot (react-dom.development.js?61bb:17599)
at beginWork (react-dom.development.js?61bb:19077)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994)
at invokeGuardedCallback (react-dom.development.js?61bb:4056)
Parece que é algum tipo de problema de cache - não tenho certeza se no próprio fable ou no plugin feliz. Depois de limpar o diretório .fable
funciona bem
Oi @theimowski , também encontrei isso recentemente. Vou precisar investigar, mas talvez @alfonsogarciacaro saiba mais sobre isso. Você também pode tentar usar o Fable v3.1.10 mais recente? o modelo está em 3.1.5
Parece um problema de fábula
Você pode tentar com 3.1.11? Isso provavelmente está relacionado a https://github.com/fable-compiler/Fable/issues/2413
Confirmei que o problema foi corrigido na v3.1.11, então @theimowski você também pode tentar?
Ele ainda não funciona totalmente como esperado na Fable 3.1.11.
Tentando investigar isso um pouco mais:
HelloWorld
-> HelloWorlds
mas apenas em 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.
Há um erro de compilação do FSHARP, mas o webpack compila e trata o erro como um aviso, o WDS atualiza a página e você pode ver o erro React no assunto renderizado na tela
Altere HelloWorld
-> HelloWorlds
em Main.fs
: compilação bem-sucedida, mas o React falha e o erro é registrado no console dev
Atualize a página - funciona bem depois
Isso pode ser algum tipo de problema de condição de corrida, no modelo Feliz se você renomear os dois arquivos ao mesmo tempo, geralmente funcionará bem, porém em um projeto um pouco maior, ao renomear o componente posso ver o seguinte comportamento nos logs (observe o aviso no meio):
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 Acho que isso pode realmente ser um caso extremo para o plug-in de atualização rápida, onde ele deve acionar uma atualização de página completa ao alterar o arquivo de ponto de entrada.
Eu preciso confirmar a teoria em algum momento: o problema não ocorrerá quando o componente referenciado não estiver no arquivo de ponto de entrada. Portanto, se você tiver App.fs -> Middle.fs -> Main.fs (ponto de entrada) e alterar apenas App.fs ou Middle.fs
Você também pode experimentar isso?
@theimowski eu postei o problema em react -refresh#330
A atualização de reação ocorre ao usar o webpack mais recente, então voltei para o webpack v4 até que o problema fosse resolvido e publiquei um modelo Feliz funcionando (agora com mais componentes de exemplo) a partir da v3.6
Obrigado - sim, de fato, usando o novo modelo feliz, o problema de atualização desapareceu.
Você não acha que seria melhor se o erro de compilação do F# falhasse na atualização do webpack? Ou é algo difícil de conseguir?
De volta com o Fable 2.* e o servidor webpack dev, quando havia um erro de compilação do F#, a atualização não era acionada.
Você não acha que seria melhor se o erro de compilação do F# falhasse na atualização do webpack? Ou é algo difícil de conseguir?
Não é impossível: provavelmente requer a emissão de código JS que _intencionalmente_ tem alguns erros de sintaxe para quebrar o que o webpack está fazendo, mas duvido que alguém queira isso (especialmente @alfonsogarciacaro) 😉
Eu acho que a situação atual está boa porque quando o webpack está emitindo um aviso, o Fable está emitindo um erro que é uma prioridade mais alta para o desenvolvedor corrigir. Depois que o erro Fable (compilar) é corrigido, o aviso do webpack também desaparece. Estou esquecendo de algo?
Minha preferência pessoal seria que uma etapa com falha resultasse na não execução das etapas a seguir - caso contrário, você poderá observar coisas sendo atualizadas em seu navegador e se enganar dizendo que está tudo bem, enquanto seu código F# não está compilando.
Mas o react-refresh mostrará uma página de erro em vermelho com uma mensagem de erro no navegador, mesmo que o terminal mostre um aviso de webpack
Entendo - certo, nesse caso está tudo bem.
O único problema é o que você descreveu em https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330