create-react-app で作ったReactアプリにMapbox GL JSを使いビルドするとエラーになる

npm start

でWebPack Dev Serverで動作させているぶんには問題ないのだが、いざBuildを行いWebサーバー上でモジュールをデプロイし実行させると以下のエラー

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling と記載されているので読んで見る。

If you’re using @babel/preset-env in conjunction with browserslist to set target browser environments, consider using the following browserslist queries to select a set of compatible transforms.

https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

Browserlistを以下のようにせよとの事
Babelの設定を変更しトランスパイルされたモジュールの実行対象を絞る必要がある。

>0.2%, not dead, not ie 11, not chrome < 51, not safari < 10, not android < 51

このbrowserlistはpackage.jsonに定義されている。

変更前

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

変更後

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not ie 11",
      "not chrome < 51",
      "not safari < 10",
      "not android < 51"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

これで npm run build したものをWebサーバ上で実行すると無事動作するようになる。