Feliz: خطأ بعد إعادة تسمية مكون React: خطأ غير معلوم: نوع العنصر غير صالح: توقع وجود سلسلة

مرحبًا theimowski لقد واجهت هذا مؤخرًا أيضًا. سأحتاج إلى النظر في الأمر ولكن ربما يعرف alfonsogarciacaro المزيد عنها. هل يمكنك أيضًا تجربة استخدام أحدث إصدار من Fable v3.1.10؟ القالب في 3.1.5

يبدو وكأنه قضية خرافة

هل يمكنك المحاولة مع 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 وتم تسجيل الخطأ في وحدة تحكم dev

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 لقد نشرت المشكلة على رد التحديث رقم 330

يحدث رد الفعل-التحديث عند استخدام حزمة الويب الأحدث لذا عدت إلى webpack v4 حتى يتم حل المشكلة ونشرت قالب Feliz (الآن مع المزيد من أمثلة المكونات) اعتبارًا من v3.6

شكرًا - نعم بالفعل باستخدام قالب feliz الجديد ، اختفت مشكلة التحديث.
ألا تعتقد أنه سيكون من الأفضل إذا فشل خطأ التحويل F # في تحديث حزمة الويب؟ أم أنه شيء يصعب تحقيقه؟
مرة أخرى مع Fable 2. * وخادم webpack dev ، عندما كان هناك خطأ في التحويل البرمجي F # ، لن يتم تشغيل التحديث.

ألا تعتقد أنه سيكون من الأفضل إذا فشل خطأ التحويل F # في تحديث حزمة الويب؟ أم أنه شيء يصعب تحقيقه؟

هذا ليس مستحيلًا: ربما يتطلب إصدار كود JS _ عن قصد _ به بعض الأخطاء النحوية لكسر ما يفعله webpack ولكني أشك في أن أي شخص يريد ذلك (خاصةalfonsogarciacaro) 😉

أعتقد أن الوضع الحالي على ما يرام لأنه عندما تصدر حزمة الويب تحذيرًا ، فإن Fable يصدر خطأ يمثل أولوية أعلى للمطور لإصلاحه. بمجرد إصلاح خطأ Fable (التحويل البرمجي) ، يختفي تحذير webpack أيضًا. هل فاتني شيء؟

أفضلي الشخصي هو أن تؤدي الخطوة الفاشلة إلى عدم تنفيذ الخطوات التالية - وإلا فقد تلاحظ تحديث الأشياء في متصفحك وقد تنخدع بأن كل شيء على ما يرام ، في حين أن كود F # الخاص بك لا يتم تجميعه في الواقع.

لكن تحديث رد الفعل سيُظهر لك صفحة خطأ باللون الأحمر مع رسالة خطأ على المتصفح حتى إذا أظهر الجهاز تحذير حزمة الويب

أرى - صحيح ، في هذه الحالة لا بأس.
المشكلة الوحيدة إذن هي ما وصفته في https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/330