ワーカーを読み込めませんでした。JSON構文の検証が機能しません。 ブラウザコンソールにCould not load worker
警告が表示されます。
また、jsonワーカーをインポートしようとしました
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
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)
どちらの方法でも「ファイルローダー」が必要です
また、aceがまだインポートされていない場合、react-aceは中括弧を読み込もうとするため、react-aceの前にace-buildsをインポートする必要があります。
import "ace-builds";
import AceEditor from "react-ace";
@nightwingは機能しますが、Firefoxでreact-ace
前にace-builds
インポートすると失敗します。 私はそれを動作させることができました:
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はすべての警告を取り除きましたが、パフォーマンスは著しく悪化しましたか(それは私の実装である可能性があります)?
(ヒントをありがとう!)
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のモジュールごとに1つと想定しています。 ただし、必要なモジュールのみのURLを構成することは問題なく機能します。
これは、react-aceではなく、react-scriptsまたはace-buildsのいずれかの問題のようです。
これまでのところ、私はreact-ace
に満足しています、すべての勤勉な人に感謝します!
バージョン8にアップグレードしようとしましたが、 worker
問題が原因で失敗したため、今のところ7のままです。
"react-scripts": "3.2.0"
(Create 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に関連しているようです
@mattjstar私はそれを動作させました:
import 'ace-builds'
import 'ace-builds/webpack-resolver'
したがって、リゾルバー(AceEditorに関連するその他のもの)の前にace-builds
インポートします。
上記の@arjunuの回答を参照してください。
最後の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をコピーして貼り付けることができます。
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)
どちらの方法でも「ファイルローダー」が必要です
また、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
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")
ますか? (customWorker.jsを/ publicフォルダーに配置します)
Typescriptの回避策を使用する場合は、aceconfigを設定するためにこれを行う必要があります。
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.acequire構文の落下背中を保持し、定義されてeditorOptions 。 誰かがこの問題の回避策に出くわしましたか?
次のテストを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);
最も参考になるコメント
webpack-resolverを含める必要があります
または、各モードのURLを個別に構成します
どちらの方法でも「ファイルローダー」が必要です
また、aceがまだインポートされていない場合、react-aceは中括弧を読み込もうとするため、react-aceの前にace-buildsをインポートする必要があります。