Deno React प्रोजेक्ट में react_dom_development अपरिभाषित है

Acorn 2020-05-26 11:27.

मैं डेनो को आज़माना चाहता था, इसलिए मैंने एक साधारण सिंगल-पेज रिएक्ट ऐप बनाने का फैसला किया। लेकिन, जब मैं CDN से ReactDOM में खींचने की कोशिश करता हूं, तो मुझे एक कंसोल त्रुटि मिलती है react_dom_development_js_2 is undefined:।

मुझे लगता है कि यह क्या चल रहा है यह ReactDOM CDN को हल नहीं कर सकता है, लेकिन मैं इसे अपने ब्राउज़र से पहुंचा सकता हूं? मैंने इसे बदलने की भी कोशिश की कि ब्राउज़र इसे किसमें हल करता है (https://unpkg.com/[email protected]/umd/react-dom.development.js), लेकिन मैं अभी भी उसी त्रुटि के साथ समाप्त होता हूं। शायद मैं deno bundleगलत का उपयोग कर रहा हूँ ?

index.jsx

import { React } from "https://unpkg.com/react@16/umd/react.development.js";
import { ReactDOM } from "https://unpkg.com/react-dom@16/umd/react-dom.development.js";

ReactDOM.render(<p>Hello</p>, document.findElementById("app"));

index.html

<html>
  <head>
    <title>Test with Deno</title>
  </head>
  <body>

    <div id="app"></div>
    <script src="index.bundle.js"></script>
  </body>
</html>

मैं deno bundle index.jsx index.bundle.jsअपना बंडल बनाने के लिए दौड़ता हूं,

index.bundle.js

// Copyright 2018-2020 the Deno authors. All rights reserved. MIT license.

// This is a specialised implementation of a System module loader.

// @ts-nocheck
/* eslint-disable */
let System, __instantiateAsync, __instantiate;

(() => {
  const r = new Map();

  System = {
    register(id, d, f) {
      r.set(id, { d, f, exp: {} });
    },
  };

  async function dI(mid, src) {
    let id = mid.replace(/\.\w+$/i, "");
    if (id.includes("./")) {
      const [o, ...ia] = id.split("/").reverse(),
        [, ...sa] = src.split("/").reverse(),
        oa = [o];
      let s = 0,
        i;
      while ((i = ia.shift())) {
        if (i === "..") s++;
        else if (i === ".") break;
        else oa.push(i);
      }
      if (s < sa.length) oa.push(...sa.slice(s));
      id = oa.reverse().join("/");
    }
    return r.has(id) ? gExpA(id) : import(mid);
  }

  function gC(id, main) {
    return {
      id,
      import: (m) => dI(m, id),
      meta: { url: id, main },
    };
  }

  function gE(exp) {
    return (id, v) => {
      v = typeof id === "string" ? { [id]: v } : id;
      for (const [id, value] of Object.entries(v)) {
        Object.defineProperty(exp, id, {
          value,
          writable: true,
          enumerable: true,
        });
      }
    };
  }

  function rF(main) {
    for (const [id, m] of r.entries()) {
      const { f, exp } = m;
      const { execute: e, setters: s } = f(gE(exp), gC(id, id === main));
      delete m.f;
      m.e = e;
      m.s = s;
    }
  }

  async function gExpA(id) {
    if (!r.has(id)) return;
    const m = r.get(id);
    if (m.s) {
      const { d, e, s } = m;
      delete m.s;
      delete m.e;
      for (let i = 0; i < s.length; i++) s[i](await gExpA(d[i]));
      const r = e();
      if (r) await r;
    }
    return m.exp;
  }

  function gExp(id) {
    if (!r.has(id)) return;
    const m = r.get(id);
    if (m.s) {
      const { d, e, s } = m;
      delete m.s;
      delete m.e;
      for (let i = 0; i < s.length; i++) s[i](gExp(d[i]));
      e();
    }
    return m.exp;
  }

  __instantiateAsync = async (m) => {
    System = __instantiateAsync = __instantiate = undefined;
    rF(m);
    return gExpA(m);
  };

  __instantiate = (m) => {
    System = __instantiateAsync = __instantiate = undefined;
    rF(m);
    return gExp(m);
  };
})();

System.register(
  "index",
  [
    "https://unpkg.com/react@16/umd/react.development.js",
    "https://unpkg.com/react-dom@16/umd/react-dom.development.js",
  ],
  function (exports_1, context_1) {
    "use strict";
    var react_development_js_1, react_dom_development_js_1;
    var __moduleName = context_1 && context_1.id;
    return {
      setters: [
        function (react_development_js_1_1) {
          react_development_js_1 = react_development_js_1_1;
        },
        function (react_dom_development_js_1_1) {
          react_dom_development_js_1 = react_dom_development_js_1_1;
        },
      ],
      execute: function () {
        react_dom_development_js_1.ReactDOM.render(
          react_development_js_1.React.createElement("p", null, "Hello"),
          document.findElementById("app"),
        );
      },
    };
  },
);

__instantiate("index");

javascript reactjs deno

2 answers

Zachary Haber 2020-05-31 10:03.

यहाँ समस्या सामान्य रिएक्ट और ReactDOM पैकेजों के सामान्य जेएसएस पैकेज के रूप में लिखे जाने के कारण है।

डिफ़ॉल्ट रूप से Deno को ES मॉड्यूल (ESM) का उपयोग करते हुए लिखे जाने वाले सभी मॉड्यूल की आवश्यकता होती है। https://github.com/pikapkg/reactरिएक्ट और रिएक्टम का एक निर्माण है जो ईएसएम का उपयोग करता है, इसलिए उन्हें डेनो में आयात किया जाना चाहिए। सीडीएन के साथ लिंक

डेबो में एक मानक पुस्तकालय मॉड्यूल है जो आपको सामान्य जेएसएस मॉड्यूल का उपयोग करने देता है, हालांकि आपको विशेष रूप से उनके साथ सावधानी बरतने की आवश्यकता होगी यदि उन्हें नोड कार्यक्षमता की आवश्यकता होती है: https://deno.land/std/node#commonjs-module-loading

Josh Dando 2020-05-31 09:43.

टाइपस्क्रिप्ट HTML से आयात की अनुमति नहीं देता है या जो फ़ाइल एक्सटेंशन में समाप्त होता है। तो अभी के लिए आप उन्हें उपयोग करने की उपेक्षा कर सकते हैं // @ts-ignoreजो काम करने के लिए अनुमति देगा।

डीनो के लिए एक दृश्य स्टूडियो कोड एक्सटेंशन है, लेकिन लेखन के समय यह थोड़ा अस्थिर लगता है। यदि और इसके सही ढंग से काम करने पर आप अपने प्रोजेक्ट के मूल में एक सेटिंग्स फ़ोल्डर को परिभाषित करके प्रति प्रोजेक्ट के आधार पर काम करने के लिए डेको को कॉन्फ़िगर करने में सक्षम होंगे .vscode/settings.json।

{
  "deno.enable": true
}

Japanese French Thai Russian Vietnamese Korean Turkish Polish Hindi

MORE COOL STUFF

जाना दुग्गर: प्यार के बारे में उसने जो कुछ कहा है और 'एक' को खोजने के लिए उसकी 5 साल की अवधि

जाना दुग्गर प्यार की तलाश के बारे में खुलकर बात करती रही हैं। यहां वह सब कुछ है जो उसने विषय और शादी के लिए पांच साल की अवधि के बारे में कहा है।

2023-06-12.

सैम ह्यूगन को ठीक-ठीक पता है कि वह 'आउटलैंडर' सेट से क्या लेंगे - 'जब मैं उन्हें पहनता हूं तो मुझे ऐसा लगता है जैसे मैं जेमी हूं'

'आउटलैंडर' स्टार सैम ह्यूगन ने हाल ही में खुलासा किया कि वह सेट से जेमी फ्रेजर को याद करने के लिए क्या लेंगे, जिस भूमिका ने उन्हें स्टार बनाया था।

2023-06-12.

फैब फोर इनसाइडर के अनुसार, शुरुआती बीटल्स गाना बैंड के 'सबसे रोमांचक प्रदर्शनों' में से एक था।

'शी लव्स यू' एक घंटे में लिखा गया, एक दिन में रिकॉर्ड किया गया और यह द बीटल्स का उनके करियर का सर्वश्रेष्ठ प्रदर्शन वाला गाना था।

2023-06-11.

डॉली पार्टन ने अपनी 'अमान्य' दादी की मदद की, जब अन्य पोते-पोतियों में से कोई भी ऐसा नहीं करता था—वह उसके साथ मज़ाक भी करती थी

डॉली पार्टन और उनकी दादी बेसी के बीच एक विशेष रिश्ता था। दादी पार्टन बहुत बीमार थीं, लेकिन उसने डॉली को उनके साथ मज़ाक करने से नहीं रोका।

2023-06-11.

विश्व की सबसे कठोर लकड़ी कौन सी है?

आप सोच सकते हैं कि ओक या हिकॉरी कठोर होती है, लेकिन जब दुनिया की सबसे कठोर लकड़ी की बात आती है, तो वे उसके आसपास भी नहीं फटकतीं।

2025-10-29.

समुद्र की गहराई में छिपे 10 सबसे डरावने समुद्री जीव

समुद्र खूबसूरती से भरपूर है, लेकिन इसमें धरती के कुछ सबसे डरावने समुद्री जीव भी छिपे हैं। इनमें से कई जीव समुद्र की सतह से बहुत नीचे, गहरे समुद्र की अंधेरी, उच्च दबाव वाली दुनिया में छिपे रहते हैं।

2025-10-29.

Minecraft में 10 सर्वश्रेष्ठ तलवार जादू

अगर आप दुश्मन भीड़ से लड़ रहे हैं या PvP परिदृश्यों के लिए तैयारी कर रहे हैं, तो Minecraft में उपलब्ध सर्वोत्तम तलवारों के जादू को जानना आपको एक बड़ी बढ़त दिला सकता है। तलवारों पर जादू करने से आप ज़्यादा नुकसान पहुँचा सकते हैं, भीड़ पर पड़ने वाले प्रभाव को बढ़ा सकते हैं और अपनी तलवार की टिकाऊपन बढ़ा सकते हैं।

2025-10-29.

13 समाजवादी देश जो एक-दूसरे से बिल्कुल अलग दिखते हैं

जब लोग समाजवादी देशों की बात करते हैं, तो अक्सर उनकी कल्पना पूर्ण सरकारी नियंत्रण और निजी स्वामित्व के अभाव की होती है। लेकिन व्यवहार में, समाजवादी अर्थव्यवस्थाएँ व्यापक रूप से भिन्न होती हैं।

2025-10-29.

द बियर रिकैप: क्या मार्कस शिकागो का सबसे दयालु, सबसे कोमल, सबसे ईमानदार आदमी है?

'चिल्ड्रन' में एक बड़े नाम की कैमियो और कुछ विनाशकारी खबरें सामने आईं

2024-07-03 19:12.

क्या आप 9,800 डॉलर में इस सात-सीटर 2008 टोयोटा RAV4 में इसे पैक करेंगे?

दावा किया जाता है कि यह RAV4 उत्कृष्ट स्थिति में है और म्यूजिकल चेयर के खेल के लिए तैयार है।

2024-07-03 19:04.

ह्यूस्टन की गर्मी के दौरान अमेज़न डिलीवरी वैन में भीषण विस्फोट

ड्रोन फुटेज में अग्निशमन कर्मियों को आग बुझाने के लिए संघर्ष करते हुए देखा गया।

2024-07-03 19:04.

मार्वल का ब्लैक पैंथर शो अब तक का सबसे महत्वपूर्ण एनिमेटेड शो होगा

आइज़ ऑफ वकांडा सीधे तौर पर MCU से जुड़ा हुआ है, साथ ही इसमें एक्स-मेन '97, व्हाट इफ..., डेयरडेविल, आदि पर अपडेट भी शामिल हैं।

2024-07-03 19:03.

जॉन क्लीज़ की पत्नी कौन हैं? जेनिफर वेड के बारे में सब कुछ जानें

जॉन क्लीज़ ने 2012 में अपनी पत्नी जेनिफर वेड से विवाह किया। जॉन क्लीज़ की पत्नी जेनिफर वेड के बारे में जानने योग्य सब कुछ यहां है।

2024-06-16.

पैटन ओसवाल्ट की पत्नी कौन है? मेरेडिथ सेलेन्गर के बारे में सब कुछ

पैटन ओसवाल्ट ने 2017 में अपनी पत्नी, साथी अभिनेत्री मेरेडिथ सालेंगर से शादी की। यहां पैटन ओसवाल्ट की पत्नी मेरेडिथ सालेंगर के बारे में जानने योग्य सब कुछ है।

2024-06-16.

माइकल सी. हॉल की पत्नी कौन है? मॉर्गन मैकग्रेगर के बारे में सब कुछ

माइकल सी. हॉल की शादी 2016 से उनकी पत्नी मॉर्गन मैकग्रेगर से हुई है। माइकल सी. हॉल की पत्नी के बारे में जानने के लिए यहां सब कुछ है।

2023-12-31.

जॉन ओलिवर की पत्नी कौन है? केट नोर्ले के बारे में सब कुछ

जॉन ओलिवर और उनकी पत्नी केट नोर्ले की शादी 2011 से हुई है। जॉन ओलिवर की पत्नी के बारे में जानने के लिए यहां सब कुछ है।

2023-10-23.

सर्वनाम सुपर डरावने हैं

यह मुझ पर अचानक प्रहार करता है जैसा कि यह अक्सर करता है यह फिर से बीच का रास्ता है <नहीं, वह नहीं जो प्रशांत में आप मैरून हैं, जो कार्निवल में है> हर हेडलाइन जोर से… ..

अपने लेखन कौशल में सुधार करने के 3 सिद्ध तरीके

ऐसा करने में आपकी मदद करने के लिए लेखन के लाभ, और रणनीतियाँ

2022 में, GPT-3 के जारी होने के साथ, लेखन कौशल कम महत्वपूर्ण होता जा रहा है। एआई के साथ, खराब लेखन वाले लोग भी गुणवत्तापूर्ण कर्मचारी तैयार कर सकते हैं।

द स्लो इरोसियन: अनवीलिंग द वे तरीके पीपल वेस्ट अवे अवे करियर

आज की तेज-तर्रार और प्रतिस्पर्धी दुनिया में, किसी का करियर व्यक्तिगत विकास, वित्तीय स्थिरता और समग्र जीवन संतुष्टि में महत्वपूर्ण भूमिका निभाता है। हालांकि, कई लोग खुद को ठहराव और असंतोष के एक अथक चक्र में फंसा हुआ पाते हैं, धीरे-धीरे अपने पेशेवर जीवन को बर्बाद कर रहे हैं।

क्या एक पॉडकास्ट प्रभावशाली बनाता है?

पिछले हफ्ते मैंने एक प्रेस विज्ञप्ति देखी, जिसे PressGazette (एक ब्रिटिश मीडिया समाचार वेबसाइट) के माध्यम से भेजा गया था। लेख ने घोषणा की कि एकास्ट, स्कैंडी पॉडकास्ट होस्टिंग और विज्ञापन कंपनी, पॉडकास्टिंग में "शायद सबसे प्रभावशाली" प्रकाशकों के एक संघ का नेतृत्व करेगी।