Estou enfrentando algo semelhante para CSS, obtendo o seguinte erro no console do navegador:

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

Ao tentar importar trabalhador diretamente

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

Minha construção falhou com:

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'

Você precisa incluir o webpack-resolver

import "ace-builds/webpack-resolver";

ou configure o url para cada modo separadamente

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 os métodos requerem "carregador de arquivos"

também o react-ace tenta carregar a chave se o ace ainda não foi importado, então o ace-builds precisa ser importado antes do react-ace.

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

@nightwing que funciona, mas importar ace-builds antes de react-ace falhar no Firefox para mim. Tenho que trabalhar com:

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

Mas não consegui fazer funcionar com meus testes. A linha de importação webpack-resolver falha em testes com

TypeError: Cannot read property 'setModuleUrl' of undefined

Acho que preciso de um ás simulado com algo como

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

Alguém fez isso funcionar com criar-reagir-app? O meu fica preso na compilação para sempre se eu adicionar:

import 'ace-builds/webpack-resolver';

Consertei adicionando useWorker: false a setOptions se importar módulos diretamente. Se esta for uma boa solução, README.md uso básico deve ser atualizado, a menos que esteja faltando alguma coisa.

@khoomeister que

(obrigado pela dica btw!)

setOptions={{ useWorker: false }}

funciona para mim. Obrigado @khoomeister

também ainda está tendo esse problema.
o uso de "useWorker tem desvantagens? o que esses trabalhadores fazem exatamente?

Estou usando um projeto create-react-app.

A única coisa que eu precisava fazer era adicionar isso ao meu App.tsx:

import 'ace-builds/webpack-resolver'

Definir useWorker como false desativa a verificação de sintaxe pelo menos, talvez outras coisas, então eu não queria usar isso.

Não sei ainda se isso é bom o suficiente para fazer funcionar com os testes de acordo com o comentário de arjunu acima.

Adicionar webpack-resolver ao meu projeto create-react-app leva a um grande aumento no tempo de compilação e adiciona centenas de arquivos ao diretório de compilação - presumo um para cada módulo no ace-builds que ele configura. Configurar a url apenas para os módulos de que preciso funciona bem, no entanto.

Isso parece ser um problema com os scripts de reação ou com as compilações do ace, não com o react-ace.

Até agora estou feliz com react-ace , obrigado por todo o trabalho duro, pessoal!

Eu estava tentando atualizar para a versão 8, mas falhei devido a problemas com worker , então, por enquanto, fico com 7.

Estou usando "react-scripts": "3.2.0" (Criar aplicativo React)

Não consegui carregar o trabalhador e os seguintes erros foram exibidos no console:

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

Desativar o trabalhador não é uma opção para mim. Tentei adicionar o resolvedor do webpack usando import 'ace-builds/webpack-resolver'; mas meu aplicativo não compilava - a compilação estava suspensa indefinidamente.

Também tentei adicioná-lo manualmente usando file-loader e setModuleUrl mas recebi o erro com ace/lib/es5-shim falta.

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

@mattjstar , comecei a trabalhar com:

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

Portanto, importe ace-builds antes do resolvedor (qualquer outra coisa relacionada ao AceEditor)

Veja a resposta @arjunu acima.

Eu adicionei as últimas 3 linhas para adicionar 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");

Você pode copiar / colar o arquivo worker-javascript.js em seu ambiente local se não quiser ser dependente de cdn.jsdelivr.net.

Você precisa incluir o webpack-resolver

import "ace-builds/webpack-resolver";

ou configure o url para cada modo separadamente

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 os métodos requerem "carregador de arquivos"

também o react-ace tenta carregar a chave se o ace ainda não foi importado, então o ace-builds precisa ser importado antes do react-ace.

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

Isso funciona perfeitamente. Defina o URL do trabalhador antes de usar qualquer modo ou 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";

também não há necessidade de definir: setOptions={{ useWorker: false }}
https://github.com/securingsincity/react-ace/issues/725#issuecomment -546711308

E se eu quiser um trabalho personalizado que não esteja na pasta ace-builds/src-.../ ?
Eu preciso usá-lo com um analisador ANTLR feito por mim.

Deixo a integração total de [email protected] aqui.

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 então se eu quiser usar meu "customWorker.js" por exemplo, devo definir ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ? (colocando customWorker.js na pasta / public)

Se você quiser usar as soluções alternativas em Typescript, você precisará fazer isso para definir a configuração do 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"
);

Eu adicionei o seguinte teste ao Webpack

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

então eu fui capaz de importar como segue

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

Estou importando conforme sugerido por @pranavwani, mas agora estou encontrando o erro
Cannot read property 'Range' of undefined. "Error loading module." quando ace.tsx está tentando importar ace / range .

Eu acredito que o problema é que, uma vez que window.ace está definido, mesmo que eu queira usar o ace-builds, o ace continua recorrendo à sintaxe ace.acequire em

Eu adicionei o seguinte teste ao Webpack

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

então eu fui capaz de importar como segue

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

você também pode fazer isso sem modificar a configuração do 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);