Razzle: تحميل css في node_modules تفشل على الخادم في بعض الحالات

هل تمكنت من إيجاد حل @ ravikp7 ؟

Ekman لا ، لم يتم البحث عنها منذ فترة

ما زلت أحاول معرفة هذا.

لقد انتقلنا من CRA إلى Razzle في خطوتين:

1. قم بترحيل تطبيق CRA الخاص بنا كما هو ، بدون SSR ولا ضباب إضافي. اجعل اختبارات الوحدة واختبار e2e باللون الأخضر.
2. تمكين SSR - هذه هي الخطوة التي نحن بصددها حاليًا

لدي مشاكل في تحميل ملف CSS من مكتبة خارجية والتي بدورها تمت الإشارة إليها من مكتبة خارجية:

• يتضمن المشروع الرئيسي المكون x.js من المكتبة X.
• يتطلب المكون x.js y.css من المكتبة Y. لا تقوم Library X بتجميع y.css ، إنها تشير إليها فقط.

يتم تجميع المشروع الرئيسي بشكل جيد بعد الخطوة 1. ولكن عندما نحاول تمكين SSR ، فإنه ينفجر مع هذا الخطأ:

> razzle start

 WAIT  Compiling...

Using .babelrc defined in your app root
Using .babelrc defined in your app root

√ Client
  Compiled successfully in 7.13s

√ Server
  Compiled successfully in 1.95s

(node:15016) UnhandledPromiseRejectionWarning: C:\main-project\node_modules\react-dates\lib\css\_datepicker.css:1
.PresetDateRangePicker_panel {
^

SyntaxError: Unexpected token '.'
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\main-project\node_modules\@company\libraryY\dist\cjs\index.js:29:1)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
(node:15016) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:15016) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

لقد حاولنا التعليق على y.css في المكتبة X وقمنا بتضمين الملف مباشرة في المشروع الرئيسي ، وهو يعمل. لا يمكنني معرفة أين تكمن المشكلة.

حصلت على نفس الخطأ. هل وجد أحد الحل؟

إذا استمرت هذه المشكلة ، فهل يمكن لشخص ما أن يضرب بمثال بسيط؟

هل وجد أي شخص حلا؟

لا يمكننا إعادة إنتاج هذه المشكلة. هل يمكنك تقديم مثال بسيط أو إظهار الإجراء والتكوين الدقيق الخاصين بنا. إذا كانت هذه مشكلة للعديد من الأشخاص ، فنحن نريد بشدة حلها 😃

سأحاول إنشاء الريبو والنشر هنا. كنت أقوم بترحيل تطبيق CRA (خاص) ولكن بعد ذلك واجهت هذه المشكلة. لقد فشلت أثناء محاولة تجميع حزمة تسمى modali ، ربما لأن هذه الحزمة تستورد ملف css داخليًا. لقد قمت بحلها عن طريق إزالة config.externals في razzle.config.js باتباع اقتراح من إحدى المشكلات.

fivethreeo مرحبًا ، لقد أنشأت مشروعًا صغيرًا يعيد إنتاج الخطأ. ألق نظرة هنا: https://github.com/fa7ad/razzle-bug-test.

خطوات التكاثر:

• استنساخ الريبو وتثبيت التبعيات
• yarn start
• انتقل إلى http: // localhost : 3000

يستخدم المثال razzle 3.1.0 ، وهناك الآن 3.1.2 قد يصلح هذه المشكلة.

تم تحديث razzle إلى 3.1.3 ، ولا تزال تواجه نفس المشكلة 😞

ملاحظة. أقوم بتحديث الريبو أيضًا ، يرجى التحقق مرة أخرى

@ fa7ad اكتشف السبب :) https://github.com/upmostly/modali/issues/34

@ ravikp7 أعتقد أن مشكلتك ربما كانت شيئًا قمنا

أواجه هذه المشكلة أيضًا. لقد قمت بعمل ريبو بسيط يوضح هذه المشكلة: https://github.com/christiannaths/razzle-css-example

عقدة v12.18.3
razzle 3.1.6

هذا هو التغيير الذي يكسر تجميع الخادم (يبدو أن العميل يجمع بشكل جيد) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3ef0567d887c7094ea

لقد قرأت من خلال كل مشكلة يمكن أن أجدها هنا والتي بدت مرتبطة بهذا ، وإذا كنت صادقًا ، فأنا لست متأكدًا بنسبة 100٪ مما إذا كنت قد أفتقد شيئًا ما فيما يتعلق بتطبيقات حزمة ويب SSR / رد الفعل - ربما هذا ألا يفترض في الواقع أن تعمل ؟؟

عندما console.log التكوين webpack في العرف razzle.config.js الملف، أستطيع أن أرى أن المغلق لوادر ل web و node مختلفة، على الرغم من أنني " م حقًا لست متأكدًا من سبب ذلك. لا يمكنني معرفة الفرق بين استيراد ملف css محلي واستيراد ملف من node_modules ...

إن الإجابة الواضحة على هذه القضية ستكون موضع تقدير كبير 😕

جرب reset-css / reset.css

شكرا على الرد السريع. نعم ، لحظة من اللمبة هناك ، شكرًا لك على ذلك.

هل أنا مخطئ في اعتقادي أن هذا لا يزال غير مثالي بالرغم من ذلك؟ لا تعرض العديد من الحزم هذا النوع من المعلومات في ملفهم التمهيدي ، لذلك أتوقع أن يعمل نموذج الريبو الخاص بي. بخلاف ذلك ، يتعين عليّ الغوص في مصدر كل حزمة ومعرفة المكان الذي يحتفظون فيه بملفات CSS المختلفة التي أحتاجها.

بمعنى آخر،

• node_modules/reset-css/rest.css
• node_modules/typeface-amiri/index.css
• إلخ

تحدد الحزمان المعنيتان ملفات css الخاصة بهما في إدخالهما package.json.main ، لذلك أعتقد أنني أتوقع أن تعمل هذه الواردات (بدون المسار مباشرة إلى ملفات css).

أعتقد أن main يجب أن تكون مسارًا وحدة Cjs. أسلوب لست متأكدا منه. لذلك يجب أن يكون لملف index.js الخاص بهم إعادة تعيين

نعم ، هذا منطقي. لكن بصراحة ، ما زلت في حيرة من أمري. الأمثلة التي قدمتها هي - بالكاد - الحزم الوحيدة التي تعمل بهذه الطريقة ؛ تم العثور على هذا النوع من الأشياء في البرية في كل مكان ، وكلها تعمل بشكل افتراضي في العديد من الأنظمة الأخرى (next.js ، create-response-app ، رد فعل ثابت).

أعتقد أن جوهر هذه المشكلة لم يتم حله من خلال الحلول البديلة أو مطالبة حزم الجهات الخارجية بإجراء تغييرات. هناك سؤال جوهري لا يزال قائما.

1. لماذا يعمل هذا على العميل وليس على الخادم؟

إذا كنت تشعر أن هذا مرشح للتغيير ، فسأكون أكثر من سعيد للعمل عليه.

إذا تمكنت من إيجاد حل ، فأنا أؤيده تمامًا :)

حسنا رائع. نظرًا لأنك تلمح إلى أن هذا سلوك غير مرغوب فيه بالفعل ، فهل ستفكر في إعادة فتح هذه المشكلة حتى يمكن تتبعها بشكل أفضل (ومساعدة الأشخاص الآخرين القادمين إلى هنا على فهم أنها مشكلة حقًا)؟

المشكلة هي أن هناك اتفاقيات للحقول الرئيسية ، ولكن لا يتم اتباعها دائمًا في البرية.

انظر إلى العقد الخارجية على ما أعتقد :)

رائع ، نعم ، في نظرة موجزة على تهيئة webpack ، بدا أن هذا كان مفقودًا. سوف ألعب معها قليلاً بأسرع ما يمكن

أعتقد أن node-externals هو سبب ذلك لأنه يسمح فقط بتنسيق cs.

https://github.com/jaredpalmer/razzle/pull/1370

https://github.com/vercel/next.js/blob/canary/packages/next/build/webpack-config.ts#L512

ثابت في ديف

ما زلت أتلقى خطأ أنا أستخدم razzle v3.3.13. ما هي التغييرات المطلوبة في ملف razzle.config.js؟

√ Client
  Compiled successfully in 46.33s

√ Server
  Compiled successfully in 46.04s

G:\razzle-webapp\node_modules\react-images-upload\index.css:1
.fileUploader {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (G:\Webelight\adamsea-web-Fix-mansi-mar-10-add-razzle\node_modules\react-images-upload\compiled.js:17:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)

يحدث هذا لأن الحزمة هي exteralized جانب الخادم. سأقوم بتحديث مستند لتوضيح كيفية إصلاح ذلك.

ثابت في razzle 3.4.2 والمستندات

https://razzlejs.org/getting-started#common -issues
https://razzle-git-canary-jared.vercel.app/getting-started#common -issues

fivethreeo شكرًا جزيلاً لك على الاستجابة السريعة والحل ، لقد وفرت اليوم !!! يعمل بشكل جيد !!