React-ace: 无法加载工作人员

创建于 2019-10-15  ·  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
资料来源
picture sergibondarenko
👍5

最有用的评论

您需要包括webpack-resolver

import "ace-builds/webpack-resolver";

或分别为每种模式配置网址

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)

两种方法都需要“文件加载器”

如果尚未导入ace，则react-ace也会尝试加载大括号，因此需要在react-ace之前导入ace-builds。

import "ace-builds";
import AceEditor from "react-ace";
picture nightwing 于 2019-10-17
👍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.

尝试直接导入工人时

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 picture jurgisrudaks 于 2019-10-17
👍8

您需要包括webpack-resolver

import "ace-builds/webpack-resolver";

或分别为每种模式配置网址

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)

两种方法都需要“文件加载器”

如果尚未导入ace，则react-ace也会尝试加载大括号，因此需要在react-ace之前导入ace-builds。

import "ace-builds";
import AceEditor from "react-ace";
nightwing picture nightwing 于 2019-10-17
👍29 🎉2

@nightwing可行，但是在react-ace之前在ace-builds在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 picture arjunu 于 2019-10-18
👍5

有人让它与create-react-app一起工作吗？ 如果我添加，我的卡将永远无法编译：

import 'ace-builds/webpack-resolver';
mattjstar picture mattjstar 于 2019-10-22
👍27 ❤1

如果直接导入模块，我通过在setOptions中添加useWorker: false来解决。 如果这是一个好的解决方案，则除非我缺少某些内容，否则应更新README.md基本用法。

ghost picture ghost 于 2019-10-24
👍11

@khoomeister摆脱了所有警告，但是您的性能是否明显变差了（可能只是我的实现）？

（感谢小费！）

mattjstar picture mattjstar 于 2019-10-25

setOptions={{ useWorker: false }}

为我工作。 谢谢@khoomeister

sourovroy picture sourovroy 于 2019-10-27
👍16 🎉7 🚀4

也仍然有这个问题。
使用“ useWorker”有什么缺点吗？这些工人到底在做什么？

doneumark picture doneumark 于 2019-11-14

我正在使用一个create-react-app项目。

我唯一需要做的就是在App.tsx中添加它：

import 'ace-builds/webpack-resolver'

将useWorker设置为false至少会禁用语法检查（也许还有其他功能），因此我不想使用它。

我还不知道这是否足以使其按照arjunu的上述评论进行测试。

caprica picture caprica 于 2019-11-28
👍2

将webpack-resolver添加到我的create-react-app项目中会导致编译时间大大增加，并将数百个文件添加到构建目录中-我假设它配置的ace构建中的每个模块都包含一个。 不过，仅为我需要的模块配置url就可以了。

这似乎是react-scripts或ace-builds而不是react-ace的问题。

youngbob picture youngbob 于 2019-12-05
👍2

到目前为止，我对react-ace感到满意，感谢所有辛勤的工作！

我试图升级到版本8，但由于worker问题而失败，所以现在我停留在7。

我正在使用"react-scripts": "3.2.0" （创建React App）

我无法加载工作程序，并且控制台中显示以下错误：

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';添加webpack-resolver，但我的应用程序无法编译-编译无限期挂起。

我还尝试使用file-loader和setModuleUrl手动添加它，但随后出现错误，缺少ace/lib/es5-shim 。

看来此问题与＃733＃755和ajaxorg / ace-builds＃161有关

jan-osch picture jan-osch 于 2019-12-27

@mattjstar我可以使用它：

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

因此，在解析器之前（与AceEditor相关的任何其他内容）导入ace-builds

参见上面的@arjunu答案。

imjustd picture imjustd 于 2019-12-30

我添加了最后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");

如果不想依赖cdn.jsdelivr.net，则可以在本地环境中复制/粘贴worker-javascript.js文件。

Holgrabus picture Holgrabus 于 2020-01-08
👍4

您需要包括webpack-resolver

import "ace-builds/webpack-resolver";

或分别为每种模式配置网址

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)

两种方法都需要“文件加载器”

如果尚未导入ace，则react-ace也会尝试加载大括号，因此需要在react-ace之前导入ace-builds。

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 picture pranavwani 于 2020-03-22

如果我想要一个不在ace-builds/src-.../文件夹中的自定义工作器怎么办？
我需要将其与我完成的ANTLR解析器一起使用。

MattNot picture MattNot 于 2020-03-26

我将完整的[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 picture jchonde 于 2020-03-27
👍6

@ jan-osch，所以如果要使用“ customWorker.js”，则必须设置ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ？ （将customWorker.js放在/ public文件夹中）

MattNot picture MattNot 于 2020-03-27
👀2

如果要在Typescript中使用替代方法，则需要执行以下操作来设置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"
);
jamesej picture jamesej 于 2020-05-15
👍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 picture aboganas 于 2020-09-15
👍2

我正在按照@pranavwani的建议进行导入，但现在
Cannot read property 'Range' of undefined. "Error loading module." ace.tsx尝试导入ace / range时， Cannot read property 'Range' of undefined. "Error loading module." 。

我认为，问题是，因为window.ace的定义，即使我想使用ACE-建立，王牌持续下降对在ace.acequire语法回到editorOptions 。 有没有人遇到此问题的解决方法？

johnjackweir picture johnjackweir 于 2020-10-12

我将以下测试添加到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);
legolasNg picture legolasNg 于 2020-12-10
此页面是否有帮助？
0 / 5 - 0 等级

相关问题

anderoonies picture anderoonies  ·  5评论
huangjiatian picture huangjiatian  ·  7评论
Jarmahent picture Jarmahent  ·  3评论
Lyeed picture Lyeed  ·  3评论
ghiden picture ghiden  ·  3评论