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'

webpack-resolver를 포함해야합니다.

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는 ace가 아직 임포트되지 않은 경우 brace를로드하려고하므로 react-ace 전에 ace-build를 임포트해야합니다.

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

그 작품을 @nightwing하지만 수입 ace-builds 하기 전에 react-ace 나를 위해 파이어 폭스에 실패합니다. 나는 그것을 함께 일했다.

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

누구든지 create-react-app으로이 작업을 했습니까? 내가 추가하면 내 컴파일이 영원히 중단됩니다.

import 'ace-builds/webpack-resolver';

모듈을 직접 가져 오는 경우 useWorker: false 를 setOptions에 추가하여 수정했습니다. 이것이 좋은 해결책이라면 뭔가 빠진 것이 없다면 README.md 기본 사용법을 업데이트해야합니다.

@khoomeister 는 모든 경고를 제거했지만 성능이 눈에 띄게 나빠졌습니까 (그냥 내 구현 일 수 있음)?

(팁 btw에 감사드립니다!)

setOptions={{ useWorker: false }}

나를 위해 작동합니다. 감사합니다 @khoomeister

또한 여전히이 문제가 있습니다.
"useWorker를 사용하면 단점이 있습니까? 그 작업자들은 정확히 무엇을합니까?

create-react-app 프로젝트를 사용하고 있습니다.

내가해야 할 유일한 일은 내 App.tsx에 이것을 추가하는 것입니다.

import 'ace-builds/webpack-resolver'

useWorker를 false로 설정하면 적어도 다른 것들은 구문 검사가 비활성화되므로 사용하고 싶지 않았습니다.

위의 arjunu의 의견에 따라 테스트와 함께 작동하도록 이것이 충분히 좋은지 아직 모르겠습니다.

내 create-react-app 프로젝트에 webpack-resolver를 추가하면 컴파일 시간이 엄청나게 증가하고 빌드 디렉토리에 수백 개의 파일이 추가됩니다. 구성하는 ace-build의 각 모듈에 대해 하나씩 가정합니다. 그래도 필요한 모듈에 대한 URL 구성은 잘 작동합니다.

이것은 react-ace가 아닌 react-scripts 또는 ace-builds의 문제인 것 같습니다.

지금까지 react-ace 에 만족합니다. 열심히 일해 주신 모든 분들께 감사드립니다!

버전 8로 업그레이드하려고했지만 worker 문제로 인해 실패 했으므로 지금은 7에 머물고 있습니다.

"react-scripts": "3.2.0" (리 액트 앱 만들기)를 사용하고 있습니다.

작업자를로드 할 수 없으며 콘솔에 다음 오류가 표시되었습니다.

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과 관련된 것으로 보입니다.

@mattjstar 함께 작업했습니다.

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

따라서 리졸버 전에 ace-builds 를 가져옵니다 (AceEditor와 관련된 다른 모든 것).

위의 @arjunu 답변을 참조하십시오.

javascript-worker를 추가하기 위해 마지막 3 줄을 추가했습니다.

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 파일을 복사 / 붙여 넣기 할 수 있습니다.

webpack-resolver를 포함해야합니다.

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는 ace가 아직 임포트되지 않은 경우 brace를로드하려고하므로 react-ace 전에 ace-build를 임포트해야합니다.

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

ace-builds/src-.../ 폴더에없는 커스텀 작업자를 원하면 어떻게하나요?
내가 만든 ANTLR 파서와 함께 사용해야합니다.

전체 [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 예를 들어 "customWorker.js"를 사용하려면 ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") 해야합니까? (/ public 폴더에 customWorker.js 넣기)

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

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

@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-builds를 사용하고 싶지만 ace가 editorOptions의 ace.acequire 구문을 계속 사용한다는 것 입니다. 이 문제에 대한 해결 방법을 찾은 사람이 있습니까?

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