React-ace: Tidak dapat memuat pekerja

Dibuat pada 15 Okt 2019 · 21Komentar · Sumber: securingsincity/react-ace

Masalah

Tidak dapat memuat pekerja, validasi sintaks JSON tidak berfungsi. Saya melihat peringatan Could not load worker di konsol browser.

Selain itu, saya mencoba mengimpor pekerja json

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

dan mendapatkan error tersebut

TypeError: Cannot read property 'window' of undefined

Kode contoh untuk mereproduksi masalah

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

Referensi

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

bug help wanted

Sumber

sergibondarenko

👍5

Komentar yang paling membantu

Anda harus menyertakan resolver webpack

import "ace-builds/webpack-resolver";

atau konfigurasikan url untuk setiap mode secara terpisah

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)

kedua metode tersebut membutuhkan "file-loader"

juga react-ace mencoba memuat brace jika ace belum diimpor sehingga ace-build perlu diimpor sebelum react-ace.

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

nightwing pada 17 Okt 2019

👍29 🎉2

Semua 21 komentar

Saya mengalami sesuatu yang mirip untuk CSS, mendapatkan kesalahan berikut di konsol browser:

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

Saat mencoba mengimpor pekerja secara langsung

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

Bangunan saya gagal dengan:

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 pada 17 Okt 2019

👍8

Anda harus menyertakan resolver webpack

import "ace-builds/webpack-resolver";

atau konfigurasikan url untuk setiap mode secara terpisah

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)

kedua metode tersebut membutuhkan "file-loader"

juga react-ace mencoba memuat brace jika ace belum diimpor sehingga ace-build perlu diimpor sebelum react-ace.

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

nightwing pada 17 Okt 2019

👍29 🎉2

@nightwing yang berhasil tetapi mengimpor ace-builds sebelum react-ace gagal di Firefox untuk saya. Saya membuatnya untuk bekerja dengan:

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

Tapi saya tidak bisa membuatnya bekerja dengan tes saya. Baris webpack-resolver import gagal dalam pengujian dengan

TypeError: Cannot read property 'setModuleUrl' of undefined

Saya rasa saya perlu mock ace dengan sesuatu seperti

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

arjunu pada 18 Okt 2019

👍5

Apakah ada yang mendapatkan ini bekerja dengan create-react-app? Milik saya macet kompilasi selamanya jika saya menambahkan:

import 'ace-builds/webpack-resolver';

mattjstar pada 22 Okt 2019

👍27 ❤1

Saya memperbaiki dengan menambahkan useWorker: false ke setOptions jika mengimpor modul secara langsung. Jika ini adalah solusi yang baik, penggunaan dasar README.md harus diperbarui kecuali saya melewatkan sesuatu.

ghost pada 24 Okt 2019

👍11

@khoomeister yang menyingkirkan semua peringatan, tetapi apakah kinerja Anda menjadi jauh lebih buruk (itu mungkin saja implementasi saya)?

(terima kasih atas tipnya btw!)

mattjstar pada 25 Okt 2019

setOptions={{ useWorker: false }}

bekerja untuk saya. Terima kasih @khoomeister

sourovroy pada 27 Okt 2019

👍16 🎉7 🚀4

juga masih mengalami masalah ini.
apakah menggunakan "useWorker memiliki kerugian? Apa tepatnya yang dilakukan oleh para pekerja tersebut?

doneumark pada 14 Nov 2019

Saya menggunakan proyek create-react-app.

Satu-satunya hal yang perlu saya lakukan adalah menambahkan ini di App.tsx saya:

import 'ace-builds/webpack-resolver'

Mengatur useWorker ke false akan menonaktifkan pemeriksaan sintaks setidaknya, mungkin hal-hal lain, jadi saya tidak ingin menggunakannya.

Saya belum tahu apakah ini cukup baik untuk membuatnya bekerja dengan tes sesuai komentar arjunu di atas.

caprica pada 28 Nov 2019

👍2

Menambahkan webpack-resolver ke proyek create-react-app saya menyebabkan peningkatan besar dalam waktu kompilasi, dan menambahkan ratusan file ke direktori build - Saya berasumsi satu untuk setiap modul di ace-build yang dikonfigurasi. Konfigurasi url hanya untuk modul yang saya butuhkan berfungsi dengan baik.

Sepertinya ini masalah dengan react-scripts atau ace-builds, bukan react-ace.

youngbob pada 5 Des 2019

👍2

Sejauh ini saya senang dengan react-ace , terima kasih untuk semua kerja kerasnya!

Saya mencoba untuk meningkatkan ke versi 8 tetapi saya gagal karena masalah dengan worker , jadi untuk saat ini saya tinggal di 7.

Saya menggunakan "react-scripts": "3.2.0" (Buat Aplikasi React)

Saya tidak bisa meminta pekerja untuk memuat, dan kesalahan berikut ditampilkan di konsol:

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

Menonaktifkan pekerja bukanlah pilihan bagi saya. Saya mencoba menambahkan resolver webpack menggunakan import 'ace-builds/webpack-resolver'; tetapi aplikasi saya tidak dapat dikompilasi - kompilasi itu menggantung tanpa batas.

Saya juga mencoba menambahkannya secara manual menggunakan file-loader dan setModuleUrl tetapi kemudian saya mendapatkan kesalahan dengan kehilangan ace/lib/es5-shim .

Tampaknya masalah ini terkait dengan # 733 # 755 dan ajaxorg / ace-builds # 161

jan-osch pada 27 Des 2019

@mattjstar Saya membuatnya berfungsi dengan:

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

Jadi impor ace-builds sebelum resolver (apa pun yang berhubungan dengan AceEditor)

Lihat jawaban @arjunu di atas.

imjustd pada 30 Des 2019

Saya menambahkan 3 baris terakhir untuk menambahkan javascript-worker:

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

Anda dapat menyalin / menempel file worker-javascript.js di lingkungan lokal Anda jika Anda tidak ingin bergantung pada cdn.jsdelivr.net.

Holgrabus pada 8 Jan 2020

👍4

Anda harus menyertakan resolver webpack
import "ace-builds/webpack-resolver";
atau konfigurasikan url untuk setiap mode secara terpisah
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)
kedua metode tersebut membutuhkan "file-loader"
juga react-ace mencoba memuat brace jika ace belum diimpor sehingga ace-build perlu diimpor sebelum react-ace.
import "ace-builds";
import AceEditor from "react-ace";

Ini bekerja dengan sempurna. Tentukan URL pekerja sebelum menggunakan mode atau tema apa pun

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

juga tidak perlu menyetel: setOptions={{ useWorker: false }}
https://github.com/securingsincity/react-ace/issues/725#issuecomment -546711308

pranavwani pada 22 Mar 2020

Bagaimana jika saya ingin memiliki pekerja ubahsuaian yang tidak ada di folder ace-builds/src-.../ ?
Saya perlu menggunakannya dengan parser ANTLR yang saya lakukan.

MattNot pada 26 Mar 2020

Saya meninggalkan integrasi [email protected] sini.

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 pada 27 Mar 2020

👍6

@ jan-osch jadi jika saya ingin menggunakan "customWorker.js" saya misalnya, saya harus menyetel ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ? (meletakkan customWorker.js di folder / publik)

MattNot pada 27 Mar 2020

👀2

Jika Anda ingin menggunakan solusi dalam Ketikan Anda harus melakukan ini untuk menyetel konfigurasi 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 pada 15 Mei 2020

👍1

Saya menambahkan tes berikut ke Webpack

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

kemudian saya dapat mengimpor sebagai berikut

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 pada 15 Sep 2020

👍2

Saya mengimpor seperti yang disarankan oleh @pranavwani tetapi sekarang mengalami kesalahan
Cannot read property 'Range' of undefined. "Error loading module." ketika ace.tsx mencoba mengimpor ace / range .

Saya percaya bahwa masalahnya adalah karena window.ace didefinisikan, meskipun saya ingin menggunakan ace-builds, ace terus menggunakan sintaks ace.acequire di

johnjackweir pada 12 Okt 2020

Saya menambahkan tes berikut ke Webpack

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

kemudian saya dapat mengimpor sebagai berikut

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

Anda juga dapat melakukannya tanpa mengubah konfigurasi 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);