<--- Last few GCs --->

[972:000001913A837320]    40900 ms: Mark-sweep 2049.2 (2066.3) -> 2047.3 (2059.3) MB, 2062.9 / 0.1 ms  (+ 179.6 ms in 113 steps since start of marking, biggest step 8.9 ms, walltime since start of marking 2512 ms) (average mu = 0.153, current mu = 0.107) [972:000001913A837320]    42835 ms: Mark-sweep 2048.8 (2059.3) -> 2047.7 (2057.8) MB, 1845.1 / 0.0 
ms  (+ 81.8 ms in 23 steps since start of marking, biggest step 9.0 ms, walltime since start of marking 1935 ms) (average mu = 0.084, current mu = 0.004) al

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00007FF68A20B3BD]
Security context: 0x002c4c9808d1 <JSObject>
    1: _append [000002A11D9F9439] [D:\ReactProjects\plotlytest\myplotlysite\node_modules\@babel\generator\lib\buffer.js:~99] [pc=0000014BCF9DB744](this=0x03160f6401b1 <Buffer map = 000000A495510339>,0x02ab7a1c78c9 <String[#1]:  >,151182,27,0x02ab7a1c01b9 <null>,0x02ab7a1c04b1 <undefined>,0x02ab7a1c06e9 <false>)
    2: append [000002A11D9F9391] [D:\ReactPro...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6895F5EBF napi_wrap+114095
 2: 00007FF6895A0B46 v8::base::CPU::has_sse+66998
 3: 00007FF6895A1946 v8::base::CPU::has_sse+70582
 4: 00007FF689DB6E4E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF689D9EF21 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF689C6B18C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF689C763C0 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF689C72EE4 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF689C686E3 v8::internal::Heap::CollectGarbage+1283
10: 00007FF689C66D54 v8::internal::Heap::AddRetainedMap+2452
11: 00007FF689C8809D v8::internal::Factory::NewFillerObject+61
12: 00007FF6899EE06F v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1295
13: 00007FF68A20B3BD v8::internal::SetupIsolateDelegate::SetupHeap+546637
14: 0000014BCF9DB744
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! myplotlysite@0.1.0 start: `react-scripts start`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the myplotlysite@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

ऊपर मुझे प्राप्त होने वाली त्रुटि है। मैंने इस साइट पर सूचीबद्ध एक के समान एक सुंदर मानक सेट-अप का पालन किया: https://github.com/plotly/react-plotly.js/blob/master/README.md

मैंने एक प्रतिक्रिया ऐप बनाया। जब मैं एक प्रतिक्रिया ऐप बनाता हूं और स्थानीय होस्ट को "एनपीएम स्टार्ट" करता हूं तो यह पूरी तरह से ठीक काम करता है। यह त्रुटि तब होती है जब मैं अगला चरण करता हूं:

"npm install React-plotly.js plotly.js" ऐसा करने के बाद, स्थानीय होस्ट अब काम नहीं करता है और मुझे यह त्रुटि मिलती है।

मैं इसे कैसे ठीक करूं? मैंने अन्य पोस्ट को इसी तरह की त्रुटि के साथ देखने की कोशिश की लेकिन कोई भी जवाब ठीक से काम नहीं कर रहा था। अग्रिम में धन्यवाद।

वैसे, मैं उत्सुक हूं, यह त्रुटि इतने सालों से क्यों मौजूद है? क्या साजिश प्रतिक्रिया या कुछ और के लिए ठीक नहीं है?

6
Johnny Robertson 24 जिंदा 2021, 04:44
चरण 1: उस आदेश को विभाजित करें। npm i react-plotly.js आज़माएं। यदि वह काम नहीं करता है, तो समस्या react-plotly है और आप जानते हैं कि अब समस्या कहां दर्ज करनी है। अगर ऐसा होता है, तो npm i plotly.js आज़माएं। यदि वह भी काम करता है, तो त्रुटि कहां/कब होती है, इसके बारे में अपना विवरण बदलें, लेकिन सबसे महत्वपूर्ण बात यह है कि उपकरण बनाने वाले लोगों से पूछें। जब इन पुस्तकालयों की बात आती है तो वे अधिकारी होते हैं, और कम से कम वे आपको बताएंगे कि यह उनकी समस्या नहीं है (और आमतौर पर, क्यों) इसलिए आपके पास अपनी पोस्ट में डालने के लिए बेहतर विवरण हैं, लेकिन हो सकता है कि वे वास्तव में जानते हैं कि क्या हो रहा है क्योंकि वे अपने कोड को किसी से बेहतर जानते हैं।
 – 
Mike 'Pomax' Kamermans
27 जिंदा 2021, 03:36
अंतिम पंक्ति के आधार पर, समस्या तब होती है जब npm start उन पुस्तकालयों को स्थापित करने के बाद चल रहा होता है, और हो सकता है कि कुछ बैबेल-संबंधित से आ रहा हो। क्या आपका कोड आपके द्वारा शामिल किए गए लिंक के उदाहरण का सिर्फ एक कॉपी-पेस्ट है, और क्या आपका नया ऐप create-react-app के नए संस्करण से है? क्या आप अपना नोड संस्करण भी पोस्ट कर सकते हैं?
 – 
Zac Anger
27 जिंदा 2021, 03:48

1 उत्तर

सबसे बढ़िया उत्तर

रेपो मुद्दों पर नज़र रखने पर इस सटीक समस्या के बारे में कुछ मुद्दे बताए गए हैं, जैसे:

  1. JavaScript हीप आउट ऑफ मेमोरी एरर क्विकस्टार्ट प्लॉट उदाहरण के साथ
  2. उत्पादन निर्माण करते समय जावास्क्रिप्ट स्मृति से बाहर चला जाता है

इन मुद्दों में, हम स्पष्ट रूप से देखते हैं कि यह NodeJS <= 10 मेमोरी आवंटन समस्या के साथ एक समस्या है और इसके कई समाधान हैं:

अपने NodeJS संस्करण को नवीनतम 12.x संस्करण में अपग्रेड करने का प्रयास करें

नोड> = 12 स्वचालित रूप से ढेर के आकार को बढ़ाता है और यह काम करेगा। मेरा सुझाव है कि आप Windows के लिए नोड संस्करण प्रबंधक (nvm) इंस्टॉल करें जो आपको जल्दी और आसानी से इंस्टॉल करने की अनुमति देगा और एकाधिक नोड संस्करण के माध्यम से स्विच करें।

स्क्रिप्ट को रिएक्ट करने के लिए max_old_space_size को मैन्युअल रूप से बढ़ाएं

मेमोरी आकार के साथ इस विकल्प को package.json स्क्रिप्ट में जोड़कर max_old_space_size का उपयोग करके ढेर का आकार बढ़ाएं:

"scripts": {
  ...
  "start": "react-scripts --max_old_space_size=4096 start",
  "build": "react-scripts --max_old_space_size=4096 build",
  ...
}

आंशिक बंडल का इस्तेमाल करें

आंशिक बंडल

v1.15.0 से शुरू होकर, plotly.js कई आंशिक बंडलों के साथ भी शिप करता है:

v1.39.0 से शुरू होकर, प्रत्येक प्लॉटली.जेएस आंशिक बंडल में एक संबंधित npm पैकेज होता है जिसमें कोई निर्भरता नहीं होती है।

v1.50.0 से शुरू होकर, प्रत्येक आंशिक बंडल का छोटा संस्करण भी npm पर एक अलग "dist min" पैकेज में प्रकाशित किया जाता है।

प्लॉटली.जेएस बेसिक

मूल आंशिक बंडल में ट्रेस मॉड्यूल स्कैटर, बार और पाई होते हैं।

आप लाइब्रेरी को plotly.js-basic-dist से लोड कर सकते हैं, जिसे उसने संकलित किया है और बंडल करते समय कम मेमोरी का उपभोग करेगा:

import React from "react";
// import Plot from "react-plotly.js";
import Plotly from "plotly.js-basic-dist";

import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);
7
Christos Lytras 28 जिंदा 2021, 01:32
धन्यवाद, नोड अपडेट करने से काम नहीं चला। लेकिन स्क्रिप्ट में अधिकतम आकार बढ़ाने से काम चल गया। हालांकि मैं उत्सुक हूं, क्या उस पद्धति में कुछ गड़बड़ है? .js-basic-dist जैसे दूसरे की तुलना में। क्या किसी के पास दूसरे की तुलना में सीमित सुविधाएं/प्रदर्शन हैं?
 – 
Johnny Robertson
28 जिंदा 2021, 15:31
1
js-basic-dist के साथ आप बस मूल पुस्तकालय लोड करते हैं और आप अतिरिक्त मॉड्यूल आयात करते हैं क्योंकि आप उनका उपयोग करते हैं क्योंकि सबसे अधिक संभावना है कि आप वह सब कुछ उपयोग नहीं कर रहे हैं जो Plotly पुस्तकालय में है और इसलिए आप बेहतर ढंग से अलग करते हैं कि आप किन सुविधाओं का उपयोग कर रहे हैं। और बस इन्हें स्थापित और उपयोग करें। उदाहरण के लिए plotly.js-basic-dist के लिए दो अलग-अलग मॉड्यूल हैं और plotly.js-basic-dist-min और इसके लिए एक अलग बंडल है एनपीएम में प्रकाशित प्रत्येक मॉड्यूल।
 – 
Christos Lytras
28 जिंदा 2021, 16:18