Webpack无法使用“流类型检查器”解析JavaScript文件

Question

Though I tried all babel presets and plugins I found on google, my webpack can not parse the javascript files using the facebook's "flow type checker".

The error I get :

ERROR in ./~/mapbox-gl/src/geo/transform.js
Module parse failed: /home/project/project-repo/Vee/superset/assets/node_modules/mapbox-gl/src/geo/transform.js Unexpected token (22:12)
You may need an appropriate loader to handle this file type.
|  */
| class Transform {
|     tileSize: number;
|     tileZoom: number;
|     lngRange: ?[number, number];
 @ ./~/react-map-gl/dist/utils/transform.js 11:17-54
 @ ./~/react-map-gl/dist/map.react.js
 @ ./~/react-map-gl/dist/index.js
 @ ./~/react-map-gl/index.js
 @ ./visualizations/mapbox.jsx
 @ ./visualizations/main.js
 @ ./javascripts/modules/superset.js
 @ ./javascripts/dashboard/Dashboard.jsx
 @ multi babel-polyfill ./javascripts/dashboard/Dashboard.jsx

My webpack config rule :

{
        test: /\.js$/,
        exclude: APP_DIR + '/node_modules/',
        use: [{
          loader:'babel-loader',
          options:{
            presets:[
             'airbnb',
             'es2015',
             "stage-2",
             "flow"
            ],
            plugins:[
              "transform-flow-strip-types",
              "transform-flow-comments"
            ]
          }
        }],
      },

My .babelrc file:

{
  "presets" : ["airbnb", "es2015", "react","flow"],
  "plugins": ["async-to-promises","transform-flow-strip-types","transform-flow-comments"]
}

Answer 1

Sounds like that module is using a super hacky approach to integrating Flowtype. Seems like you're hitting something like https://github.com/uber/react-map-gl/issues/179 which uses this logic: https://github.com/uber/react-map-gl/pull/192/files

I'd recommend filing a bug with them. This shouldn't be your responsibility to handle via Webpack.