React-ace: Erreur dans la console, n'affecte pas le fonctionnement du composant. Mais c'est ennuyeux.

Créé le 11 févr. 2020 · 3Commentaires · Source: securingsincity/react-ace

Problème

Erreurs lors de l'importation de plusieurs modes

a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1 Refused to execute script from 'http://localhost:3000/worker-css.js' because its MIME type ('text/html') is not executable.
(anonymous) @ a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1
a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:3000/worker-css.js' failed to load.
    at blob:http://localhost:3000/a8a2cc68-d2aa-4415-8e0e-e9de7978ead3:1:1

Ces erreurs ne gâchent rien, tout fonctionne et il parvient à changer de mode avec succès.
Je donne à l'utilisateur la possibilité de choisir différents modes (css, javascript, python, etc.). J'importe donc par programme les modes en fonction de ce que l'utilisateur demande dans une liste de sélection.

Exemple de code pour reproduire votre problème

// This runs whenever a new mode is selected by the user
    const handleModeChange = (event) => {
      var currentMode = event.target.value;
      require(`ace-builds/src-noconflict/mode-${currentMode}`)
      setState({...state, currentMode})
    }


            <AceEditor
              mode={state.currentMode}
              width="100%"
              theme="twilight"
              value={state.code}
              onChange={onChange}
              name="code_editor"
              editorProps={{ $blockScrolling: true }}
            />

Source

Jarmahent

👍3

Commentaire le plus utile

Solution:

Cela a été résolu après avoir ajouté import "ace-builds/webpack-resolver"
Voir https://github.com/securingsincity/react-ace/issues/725#issuecomment -543109155

pi0neerpat le 4 mars 2020

👍7 ❤2 🎉2 🚀1

Tous les 3 commentaires

Obtenir la même erreur

import AceEditor from "react-ace"

import "ace-builds/src-noconflict/mode-javascript"
import "ace-builds/src-noconflict/theme-monokai"
//...
  <AceEditor
      name="Ace-editor"
      mode="javascript"
      fontSize={15}
      wrapEnabled={true}
      value={beautify(JSON.stringify(state.stepDetails))}
      theme="monokai"
      onChange={handleSchemaChange}
      enableBasicAutocompletion={true}
      enableLiveAutocompletion={true}
      editorProps={{ $blockScrolling: true }}
    />

pi0neerpat le 4 mars 2020