React-ace: تعذر تحميل العامل

تم إنشاؤها على ١٥ أكتوبر ٢٠١٩  ·  21تعليقات  ·  مصدر: securingsincity/react-ace

مشكلة

تعذر تحميل العامل ، لا يعمل التحقق من صحة بنية JSON. أرى تحذير Could not load worker في وحدة تحكم المتصفح.

أيضًا ، حاولت استيراد عامل json

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);

المراجع

Codesandbox https://codesandbox.io/embed/ace-worker-3-vrr68

bug help wanted
مصدر
picture 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)

كلتا الطريقتين تتطلب "أداة تحميل الملفات"

يحاول أيضًا رد فعل آيس تحميل قوس إذا لم يتم استيراد ace بالفعل ، لذا يجب استيراد ace-builds قبل رد فعل الآس.

import "ace-builds";
import AceEditor from "react-ace";
picture nightwing في ١٧ أكتوبر ٢٠١٩
👍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 picture jurgisrudaks في ١٧ أكتوبر ٢٠١٩
👍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)

كلتا الطريقتين تتطلب "أداة تحميل الملفات"

يحاول أيضًا رد فعل آيس تحميل قوس إذا لم يتم استيراد ace بالفعل ، لذا يجب استيراد ace-builds قبل رد فعل الآس.

import "ace-builds";
import AceEditor from "react-ace";
nightwing picture nightwing في ١٧ أكتوبر ٢٠١٩
👍29 🎉2

nightwing الذي يعمل ولكن استيراد ace-builds قبل react-ace يخفق في Firefox بالنسبة لي. حصلت عليه للعمل مع:

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 picture arjunu في ١٨ أكتوبر ٢٠١٩
👍5

هل قام أي شخص بهذا العمل باستخدام تطبيق create-react-app؟ تتعطل عملي في التجميع إلى الأبد إذا أضفت:

import 'ace-builds/webpack-resolver';
mattjstar picture mattjstar في ٢٢ أكتوبر ٢٠١٩
👍27 ❤1

لقد أصلحت عن طريق إضافة useWorker: false إلى setOptions في حالة استيراد الوحدات مباشرة. إذا كان هذا حلاً جيدًا ، فيجب تحديث الاستخدام الأساسي README.md ما لم أفقد شيئًا.

ghost picture ghost في ٢٤ أكتوبر ٢٠١٩
👍11

khoomeister التي تخلصت من جميع التحذيرات ، ولكن هل

(شكرا للنصيحة راجع للشغل!)

mattjstar picture mattjstar في ٢٥ أكتوبر ٢٠١٩

setOptions={{ useWorker: false }}

يعمل لدي. شكرا @ khoomeister

sourovroy picture sourovroy في ٢٧ أكتوبر ٢٠١٩
👍16 🎉7 🚀4

أيضا لا تزال تواجه هذه المشكلة.
هل استخدام "useWorker له أي سلبيات؟ ماذا يفعل هؤلاء العمال بالضبط؟

doneumark picture doneumark في ١٤ نوفمبر ٢٠١٩

أنا أستخدم مشروع إنشاء تطبيق تفاعل.

الشيء الوحيد الذي كنت بحاجة إلى القيام به هو إضافة هذا في App.tsx الخاص بي:

import 'ace-builds/webpack-resolver'

يؤدي تعيين useWorker إلى false إلى تعطيل التحقق من بناء الجملة على الأقل ، وربما أشياء أخرى ، لذلك لم أرغب في استخدام ذلك.

لا أعرف حتى الآن ما إذا كان هذا جيدًا بما يكفي لجعله يعمل مع الاختبارات وفقًا لتعليق أرجونو أعلاه.

caprica picture caprica في ٢٨ نوفمبر ٢٠١٩
👍2

تؤدي إضافة محلل حزم الويب إلى مشروع إنشاء التطبيق الخاص بي إلى زيادة هائلة في وقت الترجمة ، وإضافة مئات الملفات إلى دليل الإنشاء - أفترض واحدًا لكل وحدة نمطية في ace-builds تقوم بتكوينها. على الرغم من ذلك ، فإن تكوين عنوان url للوحدات النمطية التي أحتاجها يعمل بشكل جيد.

يبدو أن هذا يمثل مشكلة في البرامج النصية للتفاعل أو ace-builds ، وليس رد الفعل.

youngbob picture youngbob في ٥ ديسمبر ٢٠١٩
👍2

حتى الآن أنا سعيد بـ react-ace ، شكرًا على كل العمل الشاق يا رفاق!

كنت أحاول الترقية إلى الإصدار 8 ، لكنني فشلت بسبب مشاكل مع worker ، لذا فأنا الآن أقيم في 7.

أنا أستخدم "react-scripts": "3.2.0" (إنشاء تطبيق React)

لم أتمكن من تحميل العامل ، وتم عرض الأخطاء التالية في وحدة التحكم:

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 و ajaxorg / ace-builds # 161

jan-osch picture jan-osch في ٢٧ ديسمبر ٢٠١٩

mattjstar لقد عملت معها:

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

لذا قم باستيراد ace-builds قبل المحلل (أي شيء آخر متعلق بـ AceEditor)

انظر arjunu الإجابة أعلاه.

imjustd picture imjustd في ٣٠ ديسمبر ٢٠١٩

أضفت آخر 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");

يمكنك نسخ / لصق الملف worker-javascript.js في بيئتك المحلية إذا كنت لا تريد الاعتماد على cdn.jsdelivr.net.

Holgrabus picture Holgrabus في ٨ يناير ٢٠٢٠
👍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)

كلتا الطريقتين تتطلب "أداة تحميل الملفات"

يحاول أيضًا رد فعل آيس تحميل قوس إذا لم يتم استيراد ace بالفعل ، لذا يجب استيراد ace-builds قبل رد فعل الآس.

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 -546711308

pranavwani picture pranavwani في ٢٢ مارس ٢٠٢٠

ماذا لو كنت أرغب في الحصول على عامل مخصص غير موجود في المجلد ace-builds/src-.../ ؟
أحتاج إلى استخدامه مع محلل ANTLR الذي قمت به.

MattNot picture MattNot في ٢٦ مارس ٢٠٢٠

أترك التكامل الكامل [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 picture jchonde في ٢٧ مارس ٢٠٢٠
👍6

@ jan-osch ، لذا إذا أردت استخدام "customWorker.js" الخاص بي على سبيل المثال ، يجب أن أضبط ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ؟ (وضع customWorker.js في / المجلد العام)

MattNot picture MattNot في ٢٧ مارس ٢٠٢٠
👀2

إذا كنت تريد استخدام الحلول في Typescript ، فستحتاج إلى القيام بذلك لتعيين تكوين ace:

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 picture jamesej في ١٥ مايو ٢٠٢٠
👍1

أضفت الاختبار التالي إلى Webpack

  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 picture aboganas في ١٥ سبتمبر ٢٠٢٠
👍2

أقوم بالاستيراد وفقًا لما اقترحه pranavwani ولكنني الآن
Cannot read property 'Range' of undefined. "Error loading module." عندما يحاول ace.tsx استيراد ace / range .

أعتقد أن المشكلة تكمن في أنه نظرًا لتعريف window.ace ، على الرغم من أنني أريد استخدام ace-builds ، فإن ace يستمر في التراجع عن بناء جملة ace.acequire في

johnjackweir picture johnjackweir في ١٢ أكتوبر ٢٠٢٠

أضفت الاختبار التالي إلى Webpack

  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);

يمكنك أيضًا القيام بذلك دون تعديل تهيئة webpack

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 picture legolasNg في ١٠ ديسمبر ٢٠٢٠
هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

ponelat picture ponelat  ·  3تعليقات
Jarmahent picture Jarmahent  ·  3تعليقات
nenadlukic picture nenadlukic  ·  6تعليقات
henviso picture henviso  ·  7تعليقات
avalkowsky picture avalkowsky  ·  6تعليقات