React-ace: Не удалось загрузить рабочий

Созданный на 15 окт. 2019 · 21Комментарии · Источник: securingsincity/react-ace

Проблема

Не удалось загрузить воркер, проверка синтаксиса JSON не работает. Я вижу предупреждение Could not load worker в консоли браузера.

Также я попытался импортировать json worker

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

Источник

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)

оба метода требуют "загрузчика файлов"

также react-ace пытается загрузить brace, если ace еще не импортирован, поэтому ace-builds необходимо импортировать до react-ace.

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

nightwing 17 окт. 2019

👍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.

При попытке напрямую импортировать worker

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 17 окт. 2019

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

оба метода требуют "загрузчика файлов"

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

nightwing 17 окт. 2019

👍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 18 окт. 2019

👍5

Кто-нибудь получал это с помощью приложения create-response-app? Мой застревает при компиляции навсегда, если я добавлю:

import 'ace-builds/webpack-resolver';

mattjstar 22 окт. 2019

👍27 ❤1

Я исправил, добавив useWorker: false в setOptions при прямом импорте модулей. Если это хорошее решение, следует обновить базовое использование README.md если я чего-то не упускаю.

ghost 24 окт. 2019

👍11

@khoomeister, который избавился от всех предупреждений, но ваша производительность заметно ухудшилась (это может быть моя реализация)?

(кстати, спасибо за совет!)

mattjstar 25 окт. 2019

setOptions={{ useWorker: false }}

работает на меня. Спасибо @khoomeister

sourovroy 27 окт. 2019

👍16 🎉7 🚀4

также все еще имеет эту проблему.
Есть ли у использования useWorker какие-либо недостатки? Что именно делают эти рабочие?

doneumark 14 нояб. 2019

Я использую проект create-react-app.

Единственное, что мне нужно было сделать, это добавить это в мой App.tsx:

import 'ace-builds/webpack-resolver'

Установка для useWorker значения false отключает, по крайней мере, проверку синтаксиса, а может быть, и другие вещи, поэтому я не хотел это использовать.

Я еще не знаю, достаточно ли этого, чтобы заставить его работать с тестами в соответствии с комментарием arjunu выше.

caprica 28 нояб. 2019

👍2

Добавление webpack-resolver в мой проект create-react-app приводит к огромному увеличению времени компиляции и добавляет сотни файлов в каталог сборки - я предполагаю, что по одному для каждого модуля в ace-builds, который он настраивает. Однако настройка URL-адреса только для необходимых мне модулей работает нормально.

Похоже, это проблема либо сценариев реакции, либо сборок ace-build, а не react-ace.

youngbob 5 дек. 2019

👍2

Пока что я доволен react-ace , спасибо за всю тяжелую работу, ребята!

Я пытался перейти на версию 8, но мне не удалось из-за проблем с worker , поэтому сейчас я остановился на 7.

Я использую "react-scripts": "3.2.0" (Создать приложение React)

Мне не удалось загрузить worker, и в консоли отображались следующие ошибки:

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 27 дек. 2019

@mattjstar Я работал с ним:

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

Так что импортируйте ace-builds перед преобразователем (все, что связано с AceEditor)

См. Ответ @arjunu выше.

imjustd 30 дек. 2019

Я добавил последние 3 строки, чтобы добавить 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");

Вы можете скопировать / вставить файл worker-javascript.js в свою локальную среду, если не хотите зависеть от cdn.jsdelivr.net.

Holgrabus 8 янв. 2020

👍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)
оба метода требуют "загрузчика файлов"
также react-ace пытается загрузить brace, если ace еще не импортирован, поэтому ace-builds необходимо импортировать до react-ace.
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 22 мар. 2020

Что, если я хочу, чтобы пользовательский воркер отсутствовал в папке ace-builds/src-.../ ?
Мне нужно использовать его с анализатором ANTLR, созданным мной.

MattNot 26 мар. 2020

Я оставляю здесь полную интеграцию [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 27 мар. 2020

👍6

@ jan-osch, поэтому, если я хочу использовать, например, мой "customWorker.js", мне нужно установить ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ? (поместив customWorker.js в папку / public)

MattNot 27 мар. 2020

👀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 15 мая 2020

👍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 15 сент. 2020

👍2

Я импортирую, как было предложено @pranavwani, но теперь у
Cannot read property 'Range' of undefined. "Error loading module." когда ace.tsx пытается импортировать ace / range .

Я считаю, что проблема в том, что, поскольку window.ace определен, даже если я хочу использовать ace-builds, ace продолжает возвращаться к синтаксису ace.acequire в

johnjackweir 12 окт. 2020

Я добавил в 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);