Estoy experimentando algo similar para CSS, obteniendo el siguiente error en la consola del navegador:

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

Al intentar importar trabajador directamente

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

Mi compilación falló con:

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'

Debe incluir el solucionador de paquetes web

import "ace-builds/webpack-resolver";

o configurar la URL para cada modo por separado

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)

ambos métodos requieren "cargador de archivos"

también react-ace intenta cargar brace si ace aún no se ha importado, por lo que ace-builds debe importarse antes de react-ace.

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

@nightwing eso funciona, pero la importación de ace-builds antes de que react-ace falle en Firefox para mí. Lo tengo para trabajar con:

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

Pero no pude hacer que funcionara con mis pruebas. La línea de importación webpack-resolver falla en las pruebas con

TypeError: Cannot read property 'setModuleUrl' of undefined

Supongo que necesito un as falso con algo como

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

¿Alguien consiguió que esto funcionara con create-react-app? El mío se atasca compilando para siempre si agrego:

import 'ace-builds/webpack-resolver';

Lo arreglé agregando useWorker: false a setOptions si importaba módulos directamente. Si esta es una buena solución, el uso básico de README.md debería actualizarse a menos que me falte algo.

@khoomeister que

(¡gracias por el consejo por cierto!)

setOptions={{ useWorker: false }}

funciona para mi. Gracias @khoomeister

También sigo teniendo este problema.
¿El uso de "useWorker tiene inconvenientes? ¿Qué hacen exactamente esos trabajadores?"

Estoy usando un proyecto create-react-app.

Lo único que tenía que hacer era agregar esto en mi App.tsx:

import 'ace-builds/webpack-resolver'

Establecer useWorker en falso deshabilita la verificación de sintaxis al menos, tal vez otras cosas, por lo que no quería usar eso.

Todavía no sé si esto es lo suficientemente bueno como para que funcione con las pruebas según el comentario de arjunu anterior.

Agregar webpack-resolver a mi proyecto create-react-app conduce a un gran aumento en el tiempo de compilación y agrega cientos de archivos al directorio de compilación; asumo uno para cada módulo en ace-builds que configura. Sin embargo, configurar la URL solo para los módulos que necesito funciona bien.

Esto parece ser un problema con los scripts de reacción o las compilaciones de ace, no con react-ace.

Hasta ahora estoy feliz con react-ace , ¡gracias por todo el trabajo duro, muchachos!

Estaba intentando actualizar a la versión 8, pero fallé debido a problemas con worker , así que por ahora me quedo en 7.

Estoy usando "react-scripts": "3.2.0" (Crear aplicación React)

No pude hacer que el trabajador se cargara y se mostraban los siguientes errores en la consola:

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

Inhabilitar al trabajador no es una opción para mí. Intenté agregar el solucionador de paquetes web usando import 'ace-builds/webpack-resolver'; pero mi aplicación no se compilaba: la compilación se bloqueaba indefinidamente.

También intenté agregarlo manualmente usando file-loader y setModuleUrl pero luego me salió el error con ace/lib/es5-shim .

Parece que este problema está relacionado con # 733 # 755 y ajaxorg / ace-builds # 161

@mattjstar lo tengo funcionando con:

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

Así que importe ace-builds antes del solucionador (cualquier otra cosa relacionada con el AceEditor)

Vea la respuesta de @arjunu arriba.

Agregué las últimas 3 líneas para agregar 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");

Puede copiar / pegar el archivo worker-javascript.js en su entorno local si no quiere depender de cdn.jsdelivr.net.

Debe incluir el solucionador de paquetes web

import "ace-builds/webpack-resolver";

o configurar la URL para cada modo por separado

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)

ambos métodos requieren "cargador de archivos"

también react-ace intenta cargar brace si ace aún no se ha importado, por lo que ace-builds debe importarse antes de react-ace.

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

Esto funciona perfectamente. Defina la URL del trabajador antes de usar cualquier modo o tema

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

tampoco es necesario configurar: setOptions={{ useWorker: false }}
https://github.com/securingsincity/react-ace/issues/725#issuecomment -546711308

¿Qué pasa si quiero tener un trabajador personalizado que no está en la carpeta ace-builds/src-.../ ?
Necesito usarlo con un analizador ANTLR hecho por mí.

Dejo aquí la integración [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" />

@ jan-osch, así que si quiero usar mi "customWorker.js", por ejemplo, tengo que configurar ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ? (poniendo customWorker.js en la carpeta / public)

Si desea utilizar las soluciones alternativas en Typescript, deberá hacer esto para configurar ace config:

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

Agregué la siguiente prueba a Webpack

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

luego pude importar de la siguiente manera

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

Estoy importando como lo sugiere @pranavwani, pero ahora me encuentro con el error
Cannot read property 'Range' of undefined. "Error loading module." cuando ace.tsx está intentando importar ace / range .

Creo que el problema es que, dado que se define window.ace , aunque quiero usar ace-builds, ace sigue recurriendo a la sintaxis ace.acequire en

Agregué la siguiente prueba a Webpack

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

luego pude importar de la siguiente manera

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

también puede hacer eso sin modificar la configuración del paquete web

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