Feliz: 重命名 React 组件后出错：未捕获错误：元素类型无效：预期为字符串

嗨@theimowski我最近也遇到了这个问题。 我需要调查一下，但也许@alfonsogarciacaro 对此了解更多。 您也可以尝试使用最新的 Fable v3.1.10 吗？ 模板位于 3.1.5

看起来像一个寓言问题

你能试试 3.1.11 吗？ 这可能与https://github.com/fable-compiler/Fable/issues/2413有关

我已经确认这个问题从 v3.1.11 开始得到解决，所以@theimowski你也可以试试吗？

它仍然不能完全按照 Fable 3.1.11 中的预期工作。

试图进一步调查这一点：

1. 更改HelloWorld -> HelloWorlds但仅限于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.

有一个 FSHARP 编译错误，但 webpack 编译并将错误视为警告，WDS 刷新页面，您可以在屏幕上看到主题中呈现的 React 错误

1. 在Main.fs中更改HelloWorld -> HelloWorlds #$ ：编译成功，但是 React 失败并且错误被记录到开发控制台

2. 刷新页面 - 之后工作正常

这可能是某种竞争条件问题，在 Feliz 模板上，如果您同时在两个文件中重命名，它通常可以正常工作，但是在稍大的项目中，重命名组件时，我可以在日志中看到以下行为（注意中间的警告）：

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我认为这实际上可能是快速刷新插件的一个边缘情况，它应该在更改入口点文件时触发整页刷新。

我需要在某个时候确认这个理论：当引用的组件不在入口点文件中时，问题不会发生。 因此，如果您有 App.fs -> Middle.fs -> Main.fs （入口点）并且您只更改 App.fs 或 Middle.fs

你也可以试试这个吗？

@theimowski我已经在react-refresh#330上交叉发布了这个问题

react-refresh 发生在使用最新的 webpack 时，所以我回滚到 webpack v4 直到问题得到解决并发布了一个工作的 Feliz 模板（现在有更多示例组件） v3.6

谢谢 - 是的，确实使用新的 feliz 模板刷新问题消失了。
你不觉得如果 F# 编译错误导致 webpack 刷新失败会更好吗？ 还是很难实现？
回到 Fable 2.* 和 webpack 开发服务器，当出现 F# 编译错误时，不会触发刷新。

你不觉得如果 F# 编译错误导致 webpack 刷新失败会更好吗？ 还是很难实现？

这并非不可能：可能需要发出 _intentionally_ 有一些语法错误的 JS 代码来破坏 webpack 正在做的事情，但我怀疑有人想要这样做（尤其是 @alfonsogarciacaro）😉

我认为目前的情况很好，因为当 webpack 发出警告时，Fable 会发出错误，这是开发人员修复的更高优先级。 一旦 Fable (compile) 错误被修复，webpack 警告也会消失。 我错过了什么吗？

我个人的偏好是，失败的步骤会导致不执行后续步骤 - 否则您可能会在浏览器中看到刷新的内容，并且您可能会误以为一切都很好，而您的 F# 代码实际上并未编译。

但是即使终端显示 webpack 警告，react-refresh 也会在浏览器上以红色显示错误页面并显示错误消息

我明白了——对，在那种情况下没关系。
那么唯一的问题是您在https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330中描述的内容