Feliz: Ошибка после переименования компонента React: Uncaught Error: недопустимый тип элемента: ожидается строка

Привет @theimowski Я тоже недавно столкнулся с этим. Мне нужно будет изучить это, но, возможно, @alfonsogarciacaro знает об этом больше. Вы также можете попробовать использовать последнюю версию Fable v3.1.10? шаблон на 3.1.5

Похоже на проблему с Fable

Не могли бы вы попробовать с 3.1.11? Вероятно, это связано с https://github.com/fable-compiler/Fable/issues/2413.

Я подтвердил, что проблема устранена в версии 3.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. Измените HelloWorld -> HelloWorlds в Main.fs : компиляция прошла успешно, но 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

Обновление реакции происходит при использовании последней версии веб-пакета, поэтому я откатился к веб-пакету v4, пока проблема не будет решена, и не опубликовал рабочий шаблон Feliz (теперь с большим количеством примеров компонентов) с версии 3.6.

Спасибо - да, действительно, с использованием нового шаблона feliz проблема с обновлением исчезла.
Вам не кажется, что было бы лучше, если бы ошибка компиляции F# не помогла обновить веб-пакет? Или это что-то труднодостижимое?
Вернемся к Fable 2.* и серверу разработки webpack, когда возникала ошибка компиляции F#, обновление не запускалось.

Вам не кажется, что было бы лучше, если бы ошибка компиляции F# не помогла обновить веб-пакет? Или это что-то труднодостижимое?

Это не невозможно: вероятно, требуется создать JS-код, который _преднамеренно_ содержит некоторые синтаксические ошибки, чтобы сломать то, что делает веб-пакет, но я сомневаюсь, что кто-то этого хочет (особенно @alfonsogarciacaro) 😉

Я думаю, что текущая ситуация в порядке, потому что, когда веб-пакет выдает предупреждение, Fable выдает ошибку, исправление которой является более приоритетным для разработчика. После исправления ошибки Fable (компиляции) предупреждение веб-пакета также исчезает. Я что-то упускаю?

Лично я предпочитаю, чтобы неудачный шаг приводил к тому, что последующие шаги не выполнялись, иначе вы можете наблюдать обновление информации в своем браузере, и вас могут обмануть, что все в порядке, в то время как ваш код F # на самом деле не компилируется.

Но react-refresh покажет вам страницу ошибки красным цветом с сообщением об ошибке в браузере, даже если терминал показывает предупреждение веб-пакета.

Я вижу - да, в таком случае все в порядке.
Единственная проблема заключается в том, что вы описали в https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330 .