Razzle: नोड_में लोड css कुछ मामलों में सर्वर पर विफल रहता है

क्या आपने @ ravikp7 का समाधान खोजने का प्रबंधन किया था?

@Eman , नहीं, थोड़ी देर में नहीं देखा है

मैं अभी भी यह पता लगाने की कोशिश कर रहा हूं।

हम CRA से दो चरणों में Razzle पर चले गए हैं:

1. हमारे सीआरए ऐप को माइग्रेट करें, जैसे, कोई एसएसआर और कोई अतिरिक्त फ़ज़ नहीं। यूनिट टेस्ट और e2e टेस्ट को हरा बनाएं।
2. SSR सक्षम करें - यह वह चरण है जो हम वर्तमान में हैं

मुझे बाहरी लाइब्रेरी से CSS फ़ाइल लोड करने में समस्या है जो बदले में बाहरी लाइब्रेरी से संदर्भित है:

• मुख्य परियोजना में पुस्तकालय X से घटक x.js शामिल हैं
• घटक x.js पुस्तकालय Y से y.css की आवश्यकता है। लाइब्रेरी एक्स 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 पर टिप्पणी करने की कोशिश की है और फ़ाइल को मुख्य परियोजना में सीधे शामिल किया है, यह काम करता है। मैं अभी पता नहीं लगा सकता कि समस्या कहाँ है।

वही त्रुटि हुई। क्या किसी ने समाधान पाया?

अगर यह अभी भी एक मुद्दा है तो क्या कोई सरल उदाहरण दे सकता है?

क्या किसी ने कोई हल खोजा?

हम इस मुद्दे को पुन: पेश नहीं कर सकते। क्या आप एक सरल उदाहरण बना सकते हैं या हमें अपनी सटीक प्रक्रिया और विन्यास दिखा सकते हैं। यदि यह कई लोगों के लिए एक समस्या है तो हम इसे ठीक करना चाहते हैं

मैं एक रेपो बनाने और यहाँ पोस्ट करने की कोशिश करूँगा। मैं एक (निजी) सीआरए ऐप को माइग्रेट कर रहा था लेकिन तब मुझे इस मुद्दे का सामना करना पड़ा। मोडली नामक पैकेज को संकलित करने की कोशिश करते समय यह विफल हो गया, शायद इसलिए कि पैकेज आंतरिक रूप से एक सीएसएस फ़ाइल आयात करता है। मैंने * razzle.config.js में से किसी एक मुद्दे के सुझाव के बाद config.externals को हटाकर इसे हल किया।

@fivethreeo अरे, मैंने एक छोटा प्रोजेक्ट बनाया है जो बग को पुन: पेश करता है। यहां देखें: https://github.com/fa7ad/razzle-bug-test

प्रजनन करने कि प्रक्रिया:

• क्लोन रेपो और निर्भरता स्थापित करें
• yarn start
• http: // localhost : 3000 पर जाएं

उदाहरण 3.1.0 का उपयोग करता है, अब 3.1.2 है जो इस मुद्दे को ठीक कर सकता है।

पर अपडेट किया गया कोलाहलपूर्ण 3.1.3 , अब भी वही समस्या आ 😞

पुनश्च मैं रेपो को भी अपडेट करता हूं, कृपया फिर से देखें

@ fa7ad ने पाया कि क्यों :) https://github.com/upmostly/modali/issues/34

@ ravikp7 मुझे लगता है कि आपका मुद्दा कुछ ऐसा हो सकता है जिसे हमने हाल ही में तय किया है।

मैं इस मुद्दे को भी अनुभव कर रहा हूं। मैंने एक नंगे हड्डियों का रेपो बनाया, जो इस मुद्दे को दिखाता है: https://github.com/christiannaths/razzle-css-example

नोड v12.18.3
चकाचौंध 3.1.6

यह वह परिवर्तन है जो सर्वर संकलन को तोड़ता है (ग्राहक ठीक संकलन करने के लिए लगता है) https://github.com/christiannaths/razzle-css-example/commit/123e73fb31123f1615a96e3e0567d887c7094ea

मैंने हर मुद्दे के माध्यम से पढ़ा है जो मैं यहां पा सकता हूं जो इस से संबंधित लग रहा था, और अगर मैं ईमानदार हो रहा हूं, तो मुझे 100% यकीन नहीं है कि शायद मैं एसएसआर वेबपैक / प्रतिक्रिया ऐप्स के संबंध में कुछ याद कर रहा हूं - शायद यह वास्तव में काम करने वाला नहीं है ??

जब मैं console.log एक कस्टम में webpack config razzle.config.js फ़ाइल, मैं देख सकता है कि के लिए सीएसएस-लोडर web और node अलग हैं, हालांकि मैं ' मी वास्तव में यकीन नहीं है कि वे क्यों होंगे। मैं यह नहीं बता सकता कि स्थानीय सीएसएस फ़ाइल आयात करने और node_modules एक से आयात करने के बीच क्या अंतर होगा ...

इस मुद्दे पर एक स्पष्ट जवाब बड़े पैमाने पर सराहना की जाएगी issue

रीसेट-सीएसएस / रीसेट करें। क्लिक करें

तुरंत जवाब के लिए धन्यवाद। हाँ, वहाँ एक lightbulb क्षण का एक सा, इसके लिए धन्यवाद।

क्या मैं यह सोचने में गलत हूं कि यह अभी भी आदर्श नहीं है? कई पैकेज इस प्रकार की जानकारी को उनके रीडमी में उजागर नहीं करते हैं, इसलिए मैं अपने उदाहरण रेपो से काम करने की बहुत उम्मीद करता हूं। अन्यथा मुझे प्रत्येक पैकेज के स्रोत में गोता लगाना होगा और यह पता लगाना होगा कि उन्हें विभिन्न सीएसएस फाइलें कैसे चाहिए, जो मुझे चाहिए।

अर्थात,

• node_modules/reset-css/rest.css
• node_modules/typeface-amiri/index.css
• आदि

प्रश्न में पैकेज दोनों अपने package.json.main प्रविष्टि में अपनी संबंधित सीएसएस फ़ाइलों को परिभाषित करते हैं, इसलिए मुझे लगता है कि मैं इन आयातों (सीएसएस फ़ाइलों को सीधे पथ के बिना) काम करने की उम्मीद करूंगा।

मुझे लगता है कि मुख्य एक रास्ता एकjs मॉड्यूल होना चाहिए। शैली मैं निश्चित नहीं हूं। तो उनके index.js में एक रीसेट होना चाहिए

हाँ, यह समझ में आता है। लेकिन ईमानदारी से, मैं अभी भी उलझन में हूं। मेरे द्वारा दिए गए उदाहरण _hardly_ एकमात्र पैकेज हैं जो इस तरह से काम करते हैं; इस तरह की चीज़ जंगल में हर जगह पाई जाती है, और यह सभी कई अन्य प्रणालियों में डिफ़ॉल्ट रूप से काम करती है (Next.js, create-react-app, reaction-static)।

मुझे लगता है कि इस मुद्दे का दिल समाधानों द्वारा हल नहीं किया गया है या परिवर्तन करने के लिए 3-पार्टी पैकेजों को पूछ रहा है। एक बुनियादी सवाल है जो अभी भी बना हुआ है।

1. यह क्लाइंट पर क्यों काम करता है और सर्वर पर नहीं?

अगर आपको लगता है कि यह बदलाव का उम्मीदवार है, तो मुझे इस पर काम करने में खुशी होगी।

यदि आप एक समाधान पा सकते हैं तो मैं इसके लिए हूँ :)

अच्छा ठीक है। चूंकि आप संकेत देते हैं कि यह वास्तव में अवांछित व्यवहार है, तो क्या आप इस मुद्दे को फिर से खोलने पर विचार करेंगे ताकि इसे बेहतर तरीके से ट्रैक किया जा सके (और यहां आने वाले अन्य लोगों को यह समझने में मदद मिल सके कि यह वास्तव में एक मुद्दा है)?

मुद्दा यह है कि मुख्य क्षेत्रों के लिए कन्वेंशन हैं, लेकिन हमेशा जंगली में पालन नहीं किया जाता है।

मुझे लगता है कि nitexternals में देखो :)

कूल, हाँ, वेबपैक कॉन्फिग में मेरे संक्षिप्त रूप में ऐसा लग रहा था कि वह गायब था। मैं जितनी जल्दी हो सके इसे थोड़ा खेलूंगा

मुझे लगता है कि नोड-एक्सटर्नल वह है जो यह पैदा कर रहा है क्योंकि यह केवल सीधे अनुमति देता है।

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)

ऐसा इसलिए होता है क्योंकि पैकेज बाहरी सर्वर साइड है। मैं यह दिखाने के लिए एक डॉक्टर अपडेट करूंगा कि इसे कैसे ठीक किया जाए।

3.4.2 और डॉक्स में निश्चित

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

@fivethreeo त्वरित प्रतिक्रिया के लिए बहुत बहुत धन्यवाद और समाधान यू दिन बचाया !!! बहुत अच्छा काम करता है !!