React-ace: コンソールのエラー。コンポーネントの動作には影響しません。しかし、その迷惑。

作成日 2020年02月11日 · 3コメント · ソース: securingsincity/react-ace

問題

複数のモードをインポートするときのエラー

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

これらのエラーは何も台無しにせず、すべてが機能し、モードを正常に変更することができます。
私はユーザーにさまざまなモード（css、javascript、pythonなど）を選択する機能を提供しています。そのため、ユーザーがピッカーリストで要求した内容に基づいて、プログラムでモードをインポートしています。

問題を再現するためのサンプルコード

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

ソース

Jarmahent

👍3

最も参考になるコメント

解決：

これは、 import "ace-builds/webpack-resolver"を追加した後に解決されました
https://github.com/securingsincity/react-ace/issues/725#issuecomment-543109155を参照して

pi0neerpat 2020年03月04日

👍7 ❤2 🎉2 🚀1

全てのコメント3件

同じエラーが発生する

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 2020年03月04日

解決：

これは、 import "ace-builds/webpack-resolver"を追加した後に解決されました
https://github.com/securingsincity/react-ace/issues/725#issuecomment-543109155を参照して

pi0neerpat 2020年03月04日

👍7 ❤2 🎉2 🚀1

ありがとう@ pi0neerpat ！

securingsincity 2020年06月25日

このページは役に立ちましたか？

0 / 5 - 0 評価

React-ace: コンソールのエラー。コンポーネントの動作には影響しません。 しかし、その迷惑。

問題

問題を再現するためのサンプルコード

最も参考になるコメント

解決：

全てのコメント3件

解決：

関連する問題

React-ace: コンソールのエラー。コンポーネントの動作には影響しません。しかし、その迷惑。