React-ace: Fehler in der Konsole, hat keinen Einfluss auf die Funktionsweise der Komponente. Aber es nervt.

Erstellt am 11. Feb. 2020  ·  3Kommentare  ·  Quelle: securingsincity/react-ace

Problem

Fehler beim Importieren mehrerer Modi

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

Diese Fehler bringen nichts durcheinander, alles funktioniert und es gelingt, den Modus erfolgreich zu ändern.
Ich gebe dem Benutzer die Möglichkeit, verschiedene Modi auszuwählen (css, Javascript, Python usw.). Also importiere ich die Modi programmatisch basierend auf den Anforderungen des Benutzers in einer Auswahlliste.

Beispielcode zum Reproduzieren Ihres Problems

// 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 }}
            /> 

Hilfreichster Kommentar

Lösung:

Dies wurde behoben, nachdem ich import "ace-builds/webpack-resolver" hinzugefügt hatte
Siehe https://github.com/securingsincity/react-ace/issues/725#issuecomment -543109155

Alle 3 Kommentare

Bekomme den gleichen Fehler

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 }}
    />

Lösung:

Dies wurde behoben, nachdem ich import "ace-builds/webpack-resolver" hinzugefügt hatte
Siehe https://github.com/securingsincity/react-ace/issues/725#issuecomment -543109155

Danke @pi0neerpat !

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen