Bei CSS tritt etwas Ähnliches auf, und in der Browserkonsole wird der folgende Fehler angezeigt:

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

Beim Versuch, Worker direkt zu importieren

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

Mein Build ist fehlgeschlagen mit:

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'

Sie müssen entweder den Webpack-Resolver einschließen

import "ace-builds/webpack-resolver";

oder konfigurieren Sie die URL für jeden Modus separat

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)

Beide Methoden erfordern "File-Loader"

React-Ace versucht auch, Brace zu laden, wenn Ace noch nicht importiert wurde. Daher müssen Ace-Builds vor React-Ace importiert werden.

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

@nightwing , das funktioniert, aber das Importieren von ace-builds vor react-ace schlägt in Firefox für mich fehl. Ich habe es zum Arbeiten gebracht mit:

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

Aber ich konnte es mit meinen Tests nicht zum Laufen bringen. Die Importzeile webpack-resolver schlägt bei Tests mit fehl

TypeError: Cannot read property 'setModuleUrl' of undefined

Ich schätze, ich brauche ein Mock-Ass mit so etwas wie

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

Hat jemand dies mit der Create-React-App zum Laufen gebracht? Meins bleibt für immer beim Kompilieren hängen, wenn ich hinzufüge:

import 'ace-builds/webpack-resolver';

Ich habe das Problem behoben, indem ich setOptions useWorker: false hinzugefügt habe, wenn Module direkt importiert wurden. Wenn dies eine gute Lösung ist, sollte die grundlegende Verwendung von README.md aktualisiert werden, es sei denn, ich vermisse etwas.

@khoomeister , der alle Warnungen

(Danke übrigens für den Tipp!)

setOptions={{ useWorker: false }}

funktioniert bei mir. Danke @khoomeister

auch noch mit diesem Problem.
Hat die Verwendung von "useWorker Nachteile? Was machen diese Mitarbeiter genau?"

Ich verwende ein Create-React-App-Projekt.

Das einzige, was ich tun musste, war dies in meine App.tsx aufzunehmen:

import 'ace-builds/webpack-resolver'

Wenn Sie useWorker auf false setzen, wird zumindest die Syntaxprüfung deaktiviert, möglicherweise auch andere Dinge. Daher wollte ich das nicht verwenden.

Ich weiß noch nicht, ob dies gut genug ist, damit es mit Tests gemäß dem obigen Kommentar von Arjunu funktioniert.

Das Hinzufügen eines Webpack-Resolvers zu meinem Projekt zum Erstellen und Reagieren von Apps führt zu einer enormen Verlängerung der Kompilierungszeit und fügt dem Build-Verzeichnis Hunderte von Dateien hinzu. Ich gehe davon aus, dass für jedes Modul in den von ihm konfigurierten Asses eine erstellt wird. Das Konfigurieren der URL nur für die Module, die ich benötige, funktioniert jedoch einwandfrei.

Dies scheint ein Problem mit React-Skripten oder Ace-Builds zu sein, nicht mit React-Ace.

Bisher bin ich mit react-ace zufrieden, danke für all die harte Arbeit, Leute!

Ich habe versucht, ein Upgrade auf Version 8 durchzuführen, bin jedoch aufgrund von Problemen mit worker gescheitert. Daher bleibe ich vorerst bei 7.

Ich benutze "react-scripts": "3.2.0" (Create React App)

Ich konnte den Worker nicht zum Laden bringen, und die folgenden Fehler wurden in der Konsole angezeigt:

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

Das Deaktivieren des Workers ist für mich keine Option. Ich habe versucht, den Webpack-Resolver mit import 'ace-builds/webpack-resolver'; hinzuzufügen, aber meine App konnte nicht kompiliert werden - die Kompilierung hing auf unbestimmte Zeit.

Ich habe auch versucht, es manuell mit file-loader und setModuleUrl hinzuzufügen, aber dann habe ich den Fehler mit fehlenden ace/lib/es5-shim .

Es scheint, dass dieses Problem mit # 733 # 755 und Ajaxorg / Ace-Builds # 161 zusammenhängt

@ Mattjstar Ich habe es zum

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

Importieren Sie also ace-builds vor dem Resolver (alles andere, was mit dem AceEditor zu tun hat)

Siehe @ arjunu Antwort oben.

Ich habe die letzten 3 Zeilen hinzugefügt, um Javascript-Worker hinzuzufügen:

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

Sie können die Datei worker-javascript.js in Ihre lokale Umgebung kopieren / einfügen, wenn Sie nicht von cdn.jsdelivr.net abhängig sein möchten.

Sie müssen entweder den Webpack-Resolver einschließen

import "ace-builds/webpack-resolver";

oder konfigurieren Sie die URL für jeden Modus separat

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)

Beide Methoden erfordern "File-Loader"

React-Ace versucht auch, Brace zu laden, wenn Ace noch nicht importiert wurde. Daher müssen Ace-Builds vor React-Ace importiert werden.

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

Das funktioniert perfekt. Definieren Sie die Worker-URL, bevor Sie einen Modus oder ein Thema verwenden

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

auch keine Notwendigkeit zu setzen: setOptions={{ useWorker: false }}
https://github.com/securingsincity/react-ace/issues/725#issuecomment -546711308

Was ist, wenn ich einen benutzerdefinierten Worker haben möchte, der sich nicht im Ordner ace-builds/src-.../ ?
Ich muss es mit einem von mir erstellten ANTLR-Parser verwenden.

Ich lasse die vollständige Integration von [email protected] hier.

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

@ jan-osch Also, wenn ich zum Beispiel meine "customWorker.js" verwenden möchte, muss ich ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ? (Legen Sie customWorker.js im Ordner / public ab.)

Wenn Sie die Problemumgehungen in Typescript verwenden möchten, müssen Sie dies tun, um die Ass-Konfiguration festzulegen:

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

Ich habe den folgenden Test zu Webpack hinzugefügt

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

dann konnte ich wie folgt importieren

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

Ich importiere wie von @pranavwani vorgeschlagen, aber jetzt tritt der Fehler auf
Cannot read property 'Range' of undefined. "Error loading module." wenn ace.tsx versucht, Ass / Bereich zu importieren .

Ich glaube, das Problem ist, dass, da window.ace definiert ist, obwohl ich Ace-Builds verwenden möchte, Ace immer wieder auf die Syntax von ace.acequire in

Ich habe den folgenden Test zu Webpack hinzugefügt

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

dann konnte ich wie folgt importieren

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

Sie können dies auch tun, ohne die Webpack-Konfiguration zu ändern

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