React-ace: Kesalahan di konsol, tidak mempengaruhi cara kerja komponen. Tapi itu mengganggu.

Dibuat pada 11 Feb 2020 · 3Komentar · Sumber: securingsincity/react-ace

Masalah

Kesalahan saat mengimpor beberapa mode

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

Kesalahan ini tidak mengacaukan apa pun, semuanya berfungsi dan berhasil mengubah mode dengan sukses.
Saya memberi pengguna kemampuan untuk memilih mode yang berbeda (css, javascript, python, dll). Jadi saya secara terprogram mengimpor mode berdasarkan apa yang diminta pengguna dalam daftar pemilih.

Contoh kode untuk mereproduksi masalah Anda

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

Sumber

Jarmahent

👍3

Komentar yang paling membantu

Larutan:

Ini diselesaikan setelah saya menambahkan import "ace-builds/webpack-resolver"
Lihat https://github.com/securingsincity/react-ace/issues/725#issuecomment -543109155

pi0neerpat pada 4 Mar 2020

👍7 ❤2 🎉2 🚀1

Semua 3 komentar

Mendapatkan kesalahan yang sama

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 pada 4 Mar 2020