Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost/worker-html.js' failed to load

~Next.JS, React 환경 기준으로 작성된 글입니다~

 

 

 

JSON 에디터 컴포넌트가 필요해서 외부 에디터 라이브러리 중 하나인 AceEditor를 활용했다.

공식 문서 바로가기 | React 기준 미리 보기 페이지

 

그러나... 

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'
: The script at 'http://localhost/worker-html.js' failed to load

 

이런 에러메시지가 뜨면서 에디터가 제대로 로드되지 않는 이슈가 발생했다.

어떻게 어떻게 찾은 해결 방법은 아래와 같다.

<AceEditor
        width={"100%"}
        mode="json"
        showGutter={true}
        highlightActiveLine={false}
        placeholder={placeHolder}
        onChange={(t) => {
          onChange(t);
        }}
        value={jsonValue}
        setOptions={{
          useWorker: false, // 이 옵션 추가!
          tabSize: 2,
          enableLiveAutocompletion: true,
          enableBasicAutocompletion: true,
          enableSnippets: true
        }}
        height={"100%"}
      />

 

그냥 AceEditor 컴포넌트를 호출하면서 useWorker 옵션을 꺼 주면 된다.

하지만 이건 어떤 기능을 사용하지 않도록 처리하는 거라.. 그 기능이 필요한 경우에는 해결 방법이 될 수 없다.

다른 방법이 한 가지 더 있는데 그건 아래에...

 

 

그럼 useWorker 옵션이 뭐고, 왜 이게 되는지 알아보자.

Ace Editor의 useWorker 옵션에서 말하는 worker는 Web Worker를 의미한다.

Web Worker는 자바스크립트에서 메인 스레드와는 별개로 동작하는 백그라운드 스레드로,

무거운 작업을 수행할 때 브라우저의 UI를 멈추지 않도록 돕는 기능이다.

 

useWorker의 역할

Ace Editor는 다양한 언어의 문법 검사, linting, 코드 분석 등을 제공한다.
이러한 기능은 성능 상의 이유로 메인 스레드에서 처리하면 렌더링 지연이 발생할 수 있다.
그래서 Ace는 Web Worker를 활용하여 문법 검사나 오류 검출 등을 별도의 스레드에서 수행한다.

useWorker: true로 설정하면, 해당 언어에 맞는 Worker 파일을 로딩하여
실시간 문법 검사(예: JS, JSON, CSS 등)를 수행한다.
반대로 false로 설정하면 이러한 작업을 하지 않게 되어 성능은 올라가지만 문법 오류 표시 등은 비활성화된다.

 

그럼 어떨 때 저런 에러가 뜨는건데?

Ace Editor는 특정 모드(JS, HTML, CSS 등)를 사용할 때 자동으로 해당 언어에 맞는 Worker 스크립트를 불러오려고 한다.

예) mode: "html"을 설정하면 worker-html.js를 importScripts()를 통해 로드함

하지만 URL 경로가 잘못 지정되어 있으면 제목과 같은 에러가 뜨는 것이다. 파일을 못 찾으니까.

 

기본적으로 해당 파일들은 ace-builds/src-noconflict/worker-*.js 와 같은 경로에 저장되는데,

이 경로에 클라이언트가 접근 가능해야 저런 에러가 뜨지 않는다.

 

하지만 Next.JS를 사용하는 경우에는 public 폴더에 넣지 않은 정적 파일에 대한 접근이 불가능하다.

그렇기 때문에 worker를 사용하지 않거나, public 폴더에 해당 에디터 타입에 맞는 worker.js를 넣어 주면 해결된다.

 

 

 

참고 링크

[MDN] Web Workers API

[Next.JS 공식문서] public 폴더에 대한 정보

[StackOverFlow] useWorker 옵션 끄기

[StackOverFlow] 왜 webWorker 파일은 public 폴더 안에 있어야 작동하는가