React-ace: कार्यकर्ता लोड नहीं कर सका

को निर्मित 15 अक्तू॰ 2019 · 21टिप्पणियाँ · स्रोत: securingsincity/react-ace

संकट

कार्यकर्ता लोड नहीं कर सका, JSON सिंटैक्स सत्यापन काम नहीं करता है। मुझे ब्राउज़र कंसोल में Could not load worker चेतावनी दिखाई देती है।

इसके अलावा, मैंने जसन कर्मी को आयात करने की कोशिश की

import "ace-builds/src-noconflict/worker-json";

और त्रुटि मिल गई

TypeError: Cannot read property 'window' of undefined

नमूना कोड समस्या को पुन: उत्पन्न करने के लिए

import React from "react";
import ReactDOM from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/ace";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

let text =
  '{\n  "id": 0,\n  ' +
  '"script": """\n   function add(x, y) {\n      return x + y;\n   }\n   add(1, 2);\n   """' +
  ',\n   "descr": "add two numbers"\n}';

function App() {
  return (
    <div className="App">
      <h1>Code Editor Demo</h1>
      <AceEditor
        mode="json"
        theme="github"
        onChange={(value, stat) => {
          console.log("onChange", value, stat);
        }}
        value={text}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

संदर्भ

कोडैंडबॉक्स https://codesandbox.io/embed/ace-worker-3-vrr68

bug help wanted

स्रोत

sergibondarenko

👍5

सबसे उपयोगी टिप्पणी

आपको या तो वेबपैक-रिज़ॉल्वर को शामिल करना होगा

import "ace-builds/webpack-resolver";

या प्रत्येक मोड के लिए अलग से url कॉन्फ़िगर करें

import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl)

import cssWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-css";
ace.config.setModuleUrl("ace/mode/css_worker", cssWorkerUrl)

दोनों तरीकों के लिए "फाइल-लोडर" की आवश्यकता होती है

अगर इक्का पहले से ही आयात नहीं किया गया है तो प्रतिक्रिया-इक्का ब्रेस को लोड करने की कोशिश करता है, ताकि ऐस-बिल्ड को प्रतिक्रिया-ऐस से पहले आयात करने की आवश्यकता हो।

import "ace-builds";
import AceEditor from "react-ace";

nightwing 17 अक्तू॰ 2019

👍29 🎉2

सभी 21 टिप्पणियाँ

मुझे CSS के लिए कुछ समान अनुभव हो रहा है, ब्राउज़र कंसोल में निम्न त्रुटि हो रही है:

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:9000/settings/landing-page/worker-css.js' failed to load.

जब कार्यकर्ता को सीधे आयात करने का प्रयास किया जाता है

import 'ace-builds/src-noconflict/worker-css';

मेरा निर्माण विफल रहा:

ERROR in ../node_modules/ace-builds/src-noconflict/worker-css.js
Module not found: Error: Can't resolve 'ace/lib/es5-shim' in 'path/to/node_modules/ace-builds/src-noconflict'

jurgisrudaks 17 अक्तू॰ 2019

👍8

आपको या तो वेबपैक-रिज़ॉल्वर को शामिल करना होगा

import "ace-builds/webpack-resolver";

या प्रत्येक मोड के लिए अलग से url कॉन्फ़िगर करें

import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl)

import cssWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-css";
ace.config.setModuleUrl("ace/mode/css_worker", cssWorkerUrl)

दोनों तरीकों के लिए "फाइल-लोडर" की आवश्यकता होती है

import "ace-builds";
import AceEditor from "react-ace";

nightwing 17 अक्तू॰ 2019

👍29 🎉2

@nightwing जो काम करता है लेकिन ace-builds आयात करने से पहले react-ace मेरे लिए फ़ायरफ़ॉक्स में विफल रहता है। मुझे इसके साथ काम करना पड़ा:

import AceEditor from 'react-ace';
import 'ace-builds/webpack-resolver';
// then the mode, theme & extension
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-tomorrow_night';
import 'ace-builds/src-noconflict/ext-searchbox';

लेकिन मैं इसे अपने परीक्षणों के साथ काम करने के लिए नहीं मिला। webpack-resolver आयात लाइन के साथ परीक्षण में विफल रहता है

TypeError: Cannot read property 'setModuleUrl' of undefined

मुझे लगता है मैं कुछ के साथ इक्का की तरह नकली की जरूरत है अनुमान लगा रहा हूँ

global.ace = require('ace-builds/src-min-noconflict/ace');

arjunu 18 अक्तू॰ 2019

👍5

क्या किसी ने इसे create-react-app के साथ काम किया? अगर मैं जोड़ दूं तो मेरा हमेशा के लिए संकलन अटक जाता है:

import 'ace-builds/webpack-resolver';

mattjstar 22 अक्तू॰ 2019

👍27 ❤1

अगर मॉड्यूल को सीधे आयात करने के लिए मैंने useWorker: false सेटओशंस में जोड़कर तय किया। यदि यह एक अच्छा समाधान है, तो README.md मूल उपयोग को अपडेट किया जाना चाहिए जब तक कि मैं कुछ याद नहीं कर रहा हूं।

ghost 24 अक्तू॰ 2019

👍11

@khoomeister, जिसने सभी चेतावनियों से छुटकारा पा लिया, लेकिन क्या आपका प्रदर्शन काफ़ी ख़राब हो गया है (जो कि मेरा कार्यान्वयन हो सकता है)?

(टिप btw के लिए धन्यवाद!)

mattjstar 25 अक्तू॰ 2019

setOptions={{ useWorker: false }}

मेरे लिये कार्य करता है। साभार @khoomeister

sourovroy 27 अक्तू॰ 2019

👍16 🎉7 🚀4

यह मुद्दा अभी भी चल रहा है।
"यूज़वर्क का उपयोग करने से कोई डाउनसाइड होता है? उन श्रमिकों को वास्तव में क्या करना है?"

doneumark 14 नव॰ 2019

मैं एक create-react-app परियोजना का उपयोग कर रहा हूं।

केवल एक चीज जो मुझे करने की ज़रूरत थी, वह यह है कि मुझे अपने App.tsx में इसे जोड़ना है:

import 'ace-builds/webpack-resolver'

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

मुझे अभी तक पता नहीं है कि यह ऊपर अर्जुन की टिप्पणी के अनुसार परीक्षण के साथ काम करने के लिए पर्याप्त अच्छा है या नहीं।

caprica 28 नव॰ 2019

👍2

मेरे बनाने-प्रतिक्रिया-ऐप प्रोजेक्ट में वेबपैक-रिज़ॉल्वर जोड़ने से संकलन समय में भारी वृद्धि होती है, और बिल्ड निर्देशिका में सैकड़ों फाइलें जुड़ती हैं - मैं इक्का-बिल्ड में प्रत्येक मॉड्यूल के लिए एक मान लेता हूं कि यह कॉन्फ़िगर करता है। हालांकि मुझे जो ठीक काम करने की जरूरत है, उसके लिए url को कॉन्फ़िगर करना।

ऐसा लगता है कि यह प्रतिक्रिया-स्क्रिप्ट या ऐस-बिल्ड के साथ एक मुद्दा है, न कि प्रतिक्रिया-इक्का।

youngbob 5 दिस॰ 2019

👍2

अब तक मैं react-ace खुश हूं, सभी कड़ी मेहनत करने वालों के लिए धन्यवाद!

मैं संस्करण 8 में अपग्रेड करने का प्रयास कर रहा था लेकिन worker मुद्दों के कारण मैं असफल रहा, इसलिए अब मैं 7 पर रह रहा हूं।

मैं "react-scripts": "3.2.0" (React App बनाएं) का उपयोग कर रहा हूं

मुझे लोड करने के लिए कार्यकर्ता नहीं मिला, और कंसोल में निम्नलिखित त्रुटियां प्रदर्शित की गईं:

03226918-0f44-4ac8-b073-1abc2ed64713:1 Refused to execute script from 'http://localhost:8000/worker-javascript.js' because its MIME type ('text/html') is not executable.
(anonymous) @ 03226918-0f44-4ac8-b073-1abc2ed64713:1
9297f3cf-c75b-4245-8c37-3ac2a7fed94d:1 Refused to execute script from 'http://localhost:8000/worker-javascript.js' because its MIME type ('text/html') is not executable.
(anonymous) @ 9297f3cf-c75b-4245-8c37-3ac2a7fed94d:1
03226918-0f44-4ac8-b073-1abc2ed64713:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8000/worker-javascript.js' failed to load.
    at blob:http://localhost:8000/03226918-0f44-4ac8-b073-1abc2ed64713:1:1
(anonymous) @ 03226918-0f44-4ac8-b073-1abc2ed64713:1
9297f3cf-c75b-4245-8c37-3ac2a7fed94d:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8000/worker-javascript.js' failed to load.
    at blob:http://localhost:8000/9297f3cf-c75b-4245-8c37-3ac2a7fed94d:1:1
(anonymous) @ 9297f3cf-c75b-4245-8c37-3ac2a7fed94d:1

कार्यकर्ता को अक्षम करना मेरे लिए कोई विकल्प नहीं है। मैंने import 'ace-builds/webpack-resolver'; का उपयोग करके वेबपैक-रिज़ॉल्वर को जोड़ने की कोशिश की, लेकिन मेरा ऐप संकलन नहीं करेगा - संकलन अनिश्चित काल तक लटका हुआ था।

मैंने file-loader और setModuleUrl का उपयोग करके इसे मैन्युअल रूप से जोड़ने का प्रयास किया, लेकिन फिर मुझे ace/lib/es5-shim गायब होने की त्रुटि मिली।

ऐसा लगता है कि यह मुद्दा # 733 # 755 और एजैक्स / ऐस-बिल्ड # 161 से संबंधित है

jan-osch 27 दिस॰ 2019

@ मट्टजस्टार मैं इसके साथ काम कर रहा हूं:

import 'ace-builds'
import 'ace-builds/webpack-resolver'

इसलिए रिसोल्वर से पहले ace-builds आयात करें (AceEditor से किसी भी अन्य चीज़ से संबंधित)

ऊपर @arjunu उत्तर देखें।

imjustd 30 दिस॰ 2019

मैंने जावास्क्रिप्ट-कार्यकर्ता को जोड़ने के लिए अंतिम 3 लाइनें जोड़ीं:

import AceEditor from "react-ace";
import "ace-builds/src-min-noconflict/mode-javascript";
import "ace-builds/src-min-noconflict/theme-tomorrow_night_eighties";
import "ace-builds/src-min-noconflict/ext-language_tools";
import "ace-builds/src-min-noconflict/ext-spellcheck";
import "ace-builds/src-min-noconflict/snippets/javascript";
import 'ace-builds/src-min-noconflict/ext-searchbox';
const ace = require('ace-builds/src-noconflict/ace');
ace.config.set("basePath", "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/");
ace.config.setModuleUrl('ace/mode/javascript_worker', "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/worker-javascript.js");

यदि आप cdn.jsdelivr.net पर निर्भर नहीं रहना चाहते हैं तो आप अपने स्थानीय परिवेश में फ़ाइल कार्यकर्ता- javascript.js को कॉपी / पेस्ट कर सकते हैं।

Holgrabus 8 जन॰ 2020

👍4

आपको या तो वेबपैक-रिज़ॉल्वर को शामिल करना होगा
import "ace-builds/webpack-resolver";
या प्रत्येक मोड के लिए अलग से url कॉन्फ़िगर करें
import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl)
import cssWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-css";
ace.config.setModuleUrl("ace/mode/css_worker", cssWorkerUrl)
दोनों तरीकों के लिए "फाइल-लोडर" की आवश्यकता होती है
अगर इक्का पहले से ही आयात नहीं किया गया है तो प्रतिक्रिया-इक्का ब्रेस को लोड करने की कोशिश करता है, ताकि ऐस-बिल्ड को प्रतिक्रिया-ऐस से पहले आयात करने की आवश्यकता हो।
import "ace-builds";
import AceEditor from "react-ace";

यह पूरी तरह से काम करता है। किसी भी मोड या थीम का उपयोग करने से पहले कार्यकर्ता URL को परिभाषित करें

import "ace-builds"
import ACE from "react-ace/dist/react-ace.min";

import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";
ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
import xmlWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-xml";
ace.config.setModuleUrl("ace/mode/xml_worker", xmlWorkerUrl);
import jsWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-javascript";
ace.config.setModuleUrl("ace/mode/javascript_worker", jsWorkerUrl);

import "ace-builds/src-min-noconflict/mode-typescript";
import "ace-builds/src-min-noconflict/mode-javascript";
import "ace-builds/src-min-noconflict/mode-graphqlschema";
import "ace-builds/src-min-noconflict/mode-json";
import "ace-builds/src-min-noconflict/mode-xml";
import "ace-builds/src-min-noconflict/mode-markdown";
import "ace-builds/src-min-noconflict/mode-html";
import "ace-builds/src-min-noconflict/theme-github";
import "ace-builds/src-min-noconflict/theme-tomorrow";
import "ace-builds/src-min-noconflict/theme-kuroir";
import "ace-builds/src-min-noconflict/ext-searchbox";

यह भी सेट करने की कोई आवश्यकता नहीं है: setOptions={{ useWorker: false }}
https://github.com/securingsincity/react-ace/issues/725#issuecomment -541111118

pranavwani 22 मार्च 2020

क्या होगा यदि मैं एक कस्टम कार्यकर्ता रखना चाहता हूं जो ace-builds/src-.../ फ़ोल्डर में नहीं है?
मुझे मेरे द्वारा किए गए ANTLR पार्सर के साथ इसका उपयोग करने की आवश्यकता है।

MattNot 26 मार्च 2020

मैं पूर्ण [email protected] एकीकरण यहां छोड़ता हूं।

import dynamic from "next/dynamic";

const AceEditor = dynamic(
  async () => {
    const reactAce = await import("react-ace");

    // prevent warning in console about misspelled props name.
    await import("ace-builds/src-min-noconflict/ext-language_tools");

    // import your theme/mode here. <AceEditor mode="javascript" theme="solarized_dark" />
    await import("ace-builds/src-min-noconflict/mode-javascript");
    await import("ace-builds/src-min-noconflict/theme-solarized_dark");

    // as <strong i="7">@Holgrabus</strong> commented you can paste these file into your /public folder.
    // You will have to set basePath and setModuleUrl accordingly.
    let ace = require("ace-builds/src-min-noconflict/ace");
    ace.config.set(
      "basePath",
      "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/"
    );
    ace.config.setModuleUrl(
      "ace/mode/javascript_worker",
      "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/worker-javascript.js"
    );

    return reactAce;
  },
  {
    ssr: false // react-ace doesn't support server side rendering as it uses the window object.
  }
);

export default () =>  <AceEditor mode="javascript" theme="solarized_dark" />

jchonde 27 मार्च 2020

👍6

@ जान-ऑश तो अगर मैं अपने "customWorker.js" का उपयोग करना चाहता हूं, तो मुझे ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ? (/ सार्वजनिक फ़ोल्डर में customWorker.js डालकर)

MattNot 27 मार्च 2020

👀2

यदि आप टाइपस्क्रिप्ट में वर्कअराउंड का उपयोग करना चाहते हैं, तो आपको इक्का विन्यास सेट करने के लिए यह करने की आवश्यकता होगी:

import { config } from 'ace-builds';

config.set(
  "basePath",
  "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/"
);
config.setModuleUrl(
   "ace/mode/javascript_worker",
   "https://cdn.jsdelivr.net/npm/[email protected]/src-noconflict/worker-javascript.js"
);

jamesej 15 मई 2020

👍1

मैंने निम्न परीक्षण को वेबपैक में जोड़ा

  module: {
    rules: [
      {
        test: /ace-builds.*\/worker-.*$/,
        loader: 'file-loader',
        options: {
          esModule: false,
          name: '[name].[hash:8].[ext]',
        },
      },
    ],
  },

तब मैं निम्नलिखित के रूप में आयात करने में सक्षम था

import ace from 'ace-builds/src-noconflict/ace';
import cssWorkerUrl from 'ace-builds/src-noconflict/worker-css';

ace.config.setModuleUrl('ace/mode/css_worker', cssWorkerUrl);

aboganas 15 सित॰ 2020

👍2

मैं @pranavwani द्वारा सुझाए अनुसार आयात कर रहा हूं, लेकिन अब त्रुटि में चल रहा हूं
Cannot read property 'Range' of undefined. "Error loading module." जब ace.tsx इक्का / रेंज आयात करने का प्रयास कर रहा हो ।

मेरा मानना है कि मुद्दा यह है कि के बाद से है कि window.ace परिभाषित किया गया है, भले ही मैं का उपयोग किया जा करना चाहते हैं इक्का-बनाता है, इक्का में ace.acequire वाक्य रचना पर वापस गिरने रहता editorOptions । क्या किसी को इस मुद्दे पर समाधान के लिए आया है?

johnjackweir 12 अक्तू॰ 2020

मैंने निम्न परीक्षण को वेबपैक में जोड़ा
  module: {
    rules: [
      {
        test: /ace-builds.*\/worker-.*$/,
        loader: 'file-loader',
        options: {
          esModule: false,
          name: '[name].[hash:8].[ext]',
        },
      },
    ],
  },
तब मैं निम्नलिखित के रूप में आयात करने में सक्षम था
import ace from 'ace-builds/src-noconflict/ace';
import cssWorkerUrl from 'ace-builds/src-noconflict/worker-css';

ace.config.setModuleUrl('ace/mode/css_worker', cssWorkerUrl);

आप यह भी कर सकते हैं कि बिना संशोधित वेबपैक कॉन्फिगरेशन के

import ace from 'ace-builds/src-noconflict/ace';
/* eslint import/no-webpack-loader-syntax: off */
import cssWorkerUrl from 'ace-builds/src-noconflict/worker-css';

ace.config.setModuleUrl('ace/mode/css_worker', cssWorkerUrl);

legolasNg 10 दिस॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स