Je rencontre quelque chose de similaire pour CSS, j'obtiens l'erreur suivante dans la console du navigateur:

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

Lors de la tentative d'importer directement un worker

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

Ma compilation a échoué avec:

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'

Vous devez soit inclure le résolveur webpack

import "ace-builds/webpack-resolver";

ou configurez l'url pour chaque mode séparément

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)

les deux méthodes nécessitent un "chargeur de fichiers"

react-ace essaie également de charger l'accolade si ace n'est pas déjà importé donc ace-builds doit être importé avant react-ace.

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

@nightwing qui fonctionne mais l'importation de ace-builds avant react-ace échoue dans Firefox pour moi. Je l'ai fait travailler avec:

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

Mais je n'ai pas pu le faire fonctionner avec mes tests. La ligne d'importation webpack-resolver échoue dans les tests avec

TypeError: Cannot read property 'setModuleUrl' of undefined

Je suppose que j'ai besoin d'un faux as avec quelque chose comme

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

Quelqu'un a-t-il fait fonctionner cela avec create-react-app? Le mien reste coincé à la compilation pour toujours si j'ajoute:

import 'ace-builds/webpack-resolver';

J'ai corrigé en ajoutant useWorker: false à setOptions si vous importez directement des modules. Si c'est une bonne solution, l'utilisation de base de README.md doit être mise à jour sauf si je manque quelque chose.

@khoomeister qui a

(merci pour la pointe btw!)

setOptions={{ useWorker: false }}

travaille pour moi. Merci @khoomeister

toujours avoir ce problème.
l'utilisation de "useWorker a-t-elle des inconvénients? Que font exactement ces travailleurs?

J'utilise un projet create-react-app.

La seule chose que je devais faire était d'ajouter ceci dans mon App.tsx:

import 'ace-builds/webpack-resolver'

Définir useWorker sur false désactive au moins la vérification de la syntaxe, peut-être d'autres choses, donc je ne voulais pas l'utiliser.

Je ne sais pas encore si cela est assez bon pour le faire fonctionner avec des tests selon le commentaire d'arjunu ci-dessus.

L'ajout de webpack-resolver à mon projet create-react-app entraîne une augmentation considérable du temps de compilation et ajoute des centaines de fichiers au répertoire de construction - j'en suppose un pour chaque module de ace-builds qu'il configure. La configuration de l'URL uniquement pour les modules dont j'ai besoin fonctionne bien, cependant.

Cela semble être un problème avec react-scripts ou ace-builds, pas avec react-ace.

Jusqu'à présent, je suis satisfait de react-ace , merci pour tout le travail acharné des gars!

J'essayais de passer à la version 8 mais j'ai échoué en raison de problèmes avec worker , donc pour l'instant je reste à 7.

J'utilise "react-scripts": "3.2.0" (Create React App)

Je n'ai pas pu charger le travailleur et les erreurs suivantes ont été affichées dans la 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

Désactiver le travailleur n'est pas une option pour moi. J'ai essayé d'ajouter le résolveur webpack en utilisant import 'ace-builds/webpack-resolver'; mais mon application ne compilerait pas - la compilation était suspendue indéfiniment.

J'ai également essayé de l'ajouter manuellement en utilisant file-loader et setModuleUrl mais j'ai ensuite eu l'erreur avec ace/lib/es5-shim manquant.

Il semble que ce problème soit lié à # 733 # 755 et ajaxorg / ace-builds # 161

@mattjstar je l'ai fait travailler avec:

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

Importez donc ace-builds avant le résolveur (tout autre élément relatif à AceEditor)

Voir la réponse @arjunu ci-dessus.

J'ai ajouté les 3 dernières lignes pour ajouter 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");

Vous pouvez copier / coller le fichier worker-javascript.js dans votre environnement local si vous ne souhaitez pas être dépendant de cdn.jsdelivr.net.

Vous devez soit inclure le résolveur webpack

import "ace-builds/webpack-resolver";

ou configurez l'url pour chaque mode séparément

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)

les deux méthodes nécessitent un "chargeur de fichiers"

react-ace essaie également de charger l'accolade si ace n'est pas déjà importé donc ace-builds doit être importé avant react-ace.

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

Cela fonctionne parfaitement. Définissez l'URL du collaborateur avant d'utiliser n'importe quel mode ou thème

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

également pas besoin de définir: setOptions={{ useWorker: false }}
https://github.com/securingsincity/react-ace/issues/725#issuecomment -546711308

Que faire si je souhaite avoir un collaborateur personnalisé qui ne se trouve pas dans le dossier ace-builds/src-.../ ?
Je dois l'utiliser avec un analyseur ANTLR réalisé par mes soins.

Je laisse l'intégralité [email protected] intégration

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 donc si je veux utiliser mon "customWorker.js" par exemple, je dois définir ace.config.setModuleUrl("ace/mode/myWorker", "/customWorker.js") ? (mettre customWorker.js dans le dossier / public)

Si vous souhaitez utiliser les solutions de contournement dans Typescript, vous devrez le faire pour définir 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"
);

J'ai ajouté le test suivant à Webpack

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

puis j'ai pu importer comme suit

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

J'importe comme suggéré par
Cannot read property 'Range' of undefined. "Error loading module." quand ace.tsx tente d'importer ace / range .

Je crois que le problème est que, puisque window.ace est défini, même si je veux utiliser ace-builds, ace continue de recourir à la syntaxe ace.acequire dans

J'ai ajouté le test suivant à Webpack

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

puis j'ai pu importer comme suit

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

vous pouvez également le faire sans modifier la configuration du 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);