웹 워커에서 import문으로 패키지 불러오는 법


(Swon) #1

안녕하세요

리액트를 배우고 있는 학생입니다!

웹 워커를 한번 써보고 싶어서 개발 중인 어플에 적용해봤는데요
(https://github.com/facebook/create-react-app/pull/3934/files/2ec7eaa00702d0a4823b7c9078c10bfc00e73a40#diff-a7f98c18479be87c9f33e7604dbd1a09)

리액트에 워커를 인식 시키려고 public 디렉토리에 아래의 코드가 담긴 워커 파일을 생성하고
// public/example.worker.js
11

App.js에 아래와 같이 워커 인스턴스를 생성했습니다.
09

  • { type : ‘module’ }은 워커 내부에서 importScripts()대신에 import문을 쓰려고 선언했습니다. 이 옵션은
    enable-experimental-web-platform-features를 적용한 크롬 브라우저에서 동작합니다.
    (chrome://flags/#enable-experimental-web-platform-features)

이렇게 실행을 해보니 다음과 같은 에러가 떴습니다.

Failed to load module script: The server responded with a non-JavaScript MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

import()대신 importScripts()는 될까 싶어서 옵션을 지우고 다시 코드를 실행해보니
34
(워커 파일이 모듈 타입일 땐 importScripts()를 쓸 수 없다는 에러가 뜹니다…)

Refused to execute script from ‘http://localhost:3000/node_modules/three/build/three.js’ because its MIME type (‘text/html’) is not executable.

같은 내용의 에러가 뜹니다…
리액트에서 오류가 생길 때 index.html을 반환하니깐 브라우저가 예상했던 js가 아니라는 에러를 뿜는(…)것 같은데… 정확히 어떤 지점에서 오류가 난 건지 힌트를 찾을 수가 없습니다 ㅜ
경로 설정과 관련된 문제인 거 같은데 제가 어떤 부분을 모르고 있는 것인지 여쭤보고 싶습니다
혹시 웹 워커 파일에 패키지를 import 해보신 분 계실까요?