mapbox - production환경에서 에러가 날때

mapbox의 경우 React로 만든 후 build를 해서  production 환경시 지도가 뻣을수 있다.

콘솔을 보면 "Uncaught ReferenceError: m is not defined" 이런식으로 뜨며 Transpiling링크가 보이는데

 

Installation | Mapbox GL JS | Mapbox

Installation | Mapbox GL JS

 

이 링크일 것이다. 

 

원인은 내용에도 나와 있지만 

 

Mapbox GL JS v2는 ES6 호환 JavaScript 번들로 배포되며 모든 주요 최신 브라우저와 호환됩니다. JavaScript 번들은 기본 스레드와 웹 작업자 간에 코드를 공유하는 방식 때문에 일부 Babel 변환과 호환되지 않습니다. 번들 크기를 줄이고 렌더링 성능을 향상시키기 위해 이 작업을 수행합니다. Webpack 또는 Rollup과 같은 모듈 번들러와 Babel과 같은 변환기와 함께 v2를 사용하는 경우 호환되도록 하는 세 가지 방법이 있습니다. Browserslist를 사용하여 호환 가능한 변환 세트로 변환 대상 지정 Mapbox GL JS 번들의 트랜스파일을 명시적으로 비활성화 번들 크기를 늘리고 성능을 저하시키는 대신 웹 작업자 코드를 별도로 로드하고 변환합니다.

mapboxGL모듈의 경우 babel로 변환이 안되는 부분이 있어서 에러가 난다는 것으로 추측한다.

 

해결방법은 내용에도 있지만 

mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

의 ! 이것이 들어가는 순간 빌드 에러를 뿜을수 있다.

!를 사용하는 해결법은

 

처럼  package.json의 eslintConfig에 rules에 넣는 것이다.

 

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "import/no-webpack-loader-syntax": "off"
    }
  },

 

 

실제 사용했던 package.json이다. 

{
  "name": "demo.web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "@mapbox/mapbox-gl-geocoder": "^4.7.4",
    "@mapbox/mapbox-gl-style-spec": "^13.23.0",
    "@mapbox/sphericalmercator": "^1.2.0",
    "@mapbox/tilebelt": "^1.0.2",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.15.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@turf/turf": "6.5.0",
    "axios": "^0.24.0",
    "dotenv": "^10.0.0",
    "downshift": "^6.1.7",
    "google-protobuf": "^3.19.1",
    "grpc-web": "^1.3.0",
    "immutable": "^4.0.0",
    "mapbox-gl": "^2.2.0",
    "qs": "6.10.3",
    "react": "^17.0.2",
    "react-cookie": "^4.1.1",
    "react-copy-to-clipboard": "5.0.4",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.0.2",
    "react-scripts": "^4.0.3",
    "react-scroll": "^1.8.4",
    "react-uuid": "^1.0.2",
    "recoil": "^0.5.2",
    "recoil-persist": "^4.0.0",
    "styled-components": "^5.3.3",
    "styled-reset": "^4.3.4",
    "turf": "3.0.14",
    "typescript": "4.5.4",
    "web-vitals": "^1.1.2",
    "worker-loader": "3.0.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "import/no-webpack-loader-syntax": "off"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not chrome < 51",
      "not safari < 10",
      "not ie <= 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

import mapboxgl from "!mapbox-gl";
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_API_KEY;             // API key

이것은 지도쪽에서 사용한 react부분이다.