throws error when change the language as Javascript in editor

[veera-selvam-s]

Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope':

when ever I change the language as javascript of editor it throws this issue.

version I'm using is

"react-ace": "^10.1.0",
"ace-builds": "^1.15.0",
"next": "^13.1.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",

Sample code

codeEditor.js

import React, { useEffect } from 'react';
import AceEditor from 'react-ace';
import { getLanguageIdForAceEditor } from '/lib/helpers';

import 'ace-builds/webpack-resolver';

import 'ace-builds/src-noconflict/snippets/c_cpp';
import 'ace-builds/src-noconflict/snippets/java';
import 'ace-builds/src-noconflict/snippets/python';
import 'ace-builds/src-noconflict/snippets/php';
import 'ace-builds/src-noconflict/snippets/ruby';
import 'ace-builds/src-noconflict/snippets/csharp';
import 'ace-builds/src-noconflict/snippets/swift';
import 'ace-builds/src-noconflict/snippets/perl';
import 'ace-builds/src-noconflict/snippets/javascript'

import 'ace-builds/src-noconflict/mode-java';
import 'ace-builds/src-noconflict/mode-c_cpp';
import 'ace-builds/src-noconflict/mode-python';
import 'ace-builds/src-noconflict/mode-ruby';
import 'ace-builds/src-noconflict/mode-php';
import 'ace-builds/src-noconflict/mode-csharp';
import 'ace-builds/src-noconflict/mode-swift';
import 'ace-builds/src-noconflict/mode-perl';
import 'ace-builds/src-noconflict/mode-javascript'

import 'ace-builds/src-noconflict/theme-xcode';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/ext-searchbox';

const CodeEditor = ({ editorHead, editorCode, editorTail, languageId, handleEditorChange, disableCopyPaste }) => {

  //Call function to the stop the event listeners
  function stop(event) {
    event.stopPropagation();
    event.preventDefault();
    return false;
  }

  //Restrict copy, paste, cut events for code editor by classname
  useEffect(() => {
    let editor = document.getElementsByClassName('ace')[0];
    if(editor && disableCopyPaste) {
      editor.addEventListener('copy', stop, true)
      editor.addEventListener('paste', stop, true)
      editor.addEventListener('cut', stop, true)
      editor.addEventListener('contextmenu', stop, true)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return(
    <>
      {editorHead &&
      <AceEditor
        mode={getLanguageIdForAceEditor(languageId)}
        theme="xcode"
        name="ace-head"
        value={editorHead}
        width="100%"
        showPrintMargin={false}
        style={{ pointerEvents: 'none', opacity: '0.8' }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          readOnly: true,
          showLineNumbers: false,
          showFoldWidgets: false,
          minLines: parseInt(editorHead.split(/\r\n|\r|\n/).length) + 1,
          maxLines: 'Infinity',
          highlightSelectedWord: false,
          highlightActiveLine: false,
          highlightGutterLine: false
        }}
      />
      }
      <AceEditor
        mode={getLanguageIdForAceEditor(languageId ? languageId : 'c')}
        theme="xcode"
        className={'ace'}
        onChange={handleEditorChange}
        name="ace-code"
        value={editorCode}
        width="100%"
        showPrintMargin={false}
        editorProps={{ blockScrolling: true }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          minLines: 10,
          maxLines: 'Infinity',
          dragEnabled: false
        }}
      />
      {editorTail &&
      <AceEditor
        mode={getLanguageIdForAceEditor(languageId ? languageId : 'c')}
        theme="xcode"
        name="ace-tail"
        value={editorTail}
        width="100%"
        showPrintMargin={false}
        style={{ pointerEvents: 'none', opacity: '0.8' }}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: true,
          readOnly: true,
          showLineNumbers: false,
          showFoldWidgets: false,
          minLines: parseInt(editorTail.split(/\r\n|\r|\n/).length) + 1,
          maxLines: 'Infinity',
          highlightSelectedWord: false,
          highlightActiveLine: false,
          highlightGutterLine: false
        }}
      />
      }
    </>
  );
}

export default React.memo(CodeEditor);

editorLayout.js

import React, { useEffect, useRef, useState } from 'react';
import { useInterval } from 'ahooks';
import Image from 'next/legacy/image'
import { toast } from 'react-toastify';
import axios from '/lib/axios';
import dynamic from 'next/dynamic'
import Button from '/components/Button';
import ContentCard from '/components/ContentCard';
import { usePrograms } from '/hooks/programs';
import CompilationStatus from '/components/Programs/CompilationStatus';
import question from '/public/icons/question.svg';
import { autoCodeRecordInterval, judgingDelay, judgingMaxTries } from '/components/Constant';
import { handleException } from '/lib/helpers';
import { useRouter } from 'next/router';
import Tooltip from '/components/Tooltip';
import EditorSplitView from '/components/Programs/EditorSplitView';
import { editorActions } from '/components/Constant';

const DynamicCodeEditorWithNoSSR = dynamic(
  () => import('/components/Programs/CodeEditor'),
  { ssr: false }
)

let timeOutId;

const EditorLayout = ({
  languages, sectionId, contestId, problemId, latestSubmitLanguageId, notify, runCodeNotification, disableCopyPaste,
  isSplitView, editorCode, editorHead, editorTail, languageId, dispatchEditor }) => {
  const router = useRouter()
  const { programSubmit, languageCode } = usePrograms();
  const [checkBox, setCheckBox] = useState(false);
  const [customInput, setCustomInput] = useState(null);
  const [submitLoader, setSubmitLoader] = useState(false);
  const [runLoader, setRunLoader] = useState(false);
  const [judgingResult, setJudgingResult] = useState(null)
  const [judgingResultLoader, setJudgingResultLoader] = useState(false)
  const [viewCompileStatus, setViewCompileStatus] = useState(false)
  const [submissionId, setSubmissionId] = useState('');
  const [cancelSubmission, setCancelSubmission] = useState(false);
  const [codeAction, setCodeAction] = useState('')

  const codeActionRef = useRef(codeAction);
  codeActionRef.current = codeAction;

  let judgingTries = 0;

  useEffect(() => {
    if (languageId) {
      languageCode({ sectionId, problemId, languageId, dispatchEditor })
    }
    return () => {
      clearTimeout(timeOutId);
    }
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const onLanguageChange = (languageId) => {
    dispatchEditor({ type:editorActions.LANGUAGE_CHANGE, payload:languageId })
    languageCode({ sectionId, problemId, languageId, dispatchEditor })
  }

  const handleEditorChange = (value) => {
    dispatchEditor({ type:editorActions.HANDLE_EDITOR_CHANGE, payload: value })
  }

  return(<DynamicCodeEditorWithNoSSR 
                    editorHead={editorHead} 
                    editorCode={editorCode} 
                    editorTail={editorTail}
                    languageId={languageId} 
                    handleEditorChange={handleEditorChange} 
                    disableCopyPaste={disableCopyPaste}
/>)
}
export default React.memo(EditorLayout);

could any one please fix this issue?

[dar4x]

I have the same problem, did you fixed it?

[melon95]

i have the same problem, you can manually set useWorker to false first to resolve this problem

 <AceEditor
  setOptions={{
    useWorker: false
  }}
 />