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. HelloWorld 변경 -> HelloWorlds in 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로 롤백하고 v3.6에서 작동하는 Feliz 템플릿(이제 더 많은 예제 구성 요소 포함)을 게시했습니다.

감사합니다. 예, 실제로 새로운 feliz 템플릿을 사용하면 새로 고침 문제가 해결되었습니다.
F# 컴파일 오류가 웹팩 새로 고침에 실패했다면 더 좋지 않았을까? 아니면 달성하기 어려운 일입니까?
Fable 2.* 및 webpack dev 서버로 돌아가서 F# 컴파일 오류가 발생하면 새로 고침이 트리거되지 않습니다.

F# 컴파일 오류가 웹팩 새로 고침에 실패했다면 더 좋지 않았을까? 아니면 달성하기 어려운 일입니까?

불가능한 것은 아닙니다: 아마도 _의도적으로_ 웹팩이 하는 일을 깨뜨리기 위해 일부 구문 오류가 있는 JS 코드를 내보내야 할 것입니다.

현재 상황은 괜찮다고 생각합니다. 웹팩이 경고를 내보내고 있을 때 Fable이 오류를 내보내고 있기 때문에 개발자가 해결해야 하는 우선 순위가 더 높기 때문입니다. Fable(컴파일) 오류가 수정되면 웹팩 경고도 사라집니다. 내가 뭔가를 놓치고 있습니까?

내 개인적인 취향은 실패한 단계로 인해 다음 단계가 실행되지 않는 것입니다. 그렇지 않으면 브라우저에서 새로고침되는 내용을 볼 수 있고 F# 코드가 실제로 컴파일되지 않는 동안 모든 것이 정상이라고 속일 수 있습니다.

그러나 react-refresh는 터미널에 웹팩 경고가 표시되더라도 브라우저에 오류 메시지와 함께 빨간색 오류 페이지를 표시합니다.

알겠습니다. 그렇다면 괜찮습니다.
유일한 문제는 https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330 에서 설명한 것입니다.