Flow error in node_modules

[jingsam]

I get this error when compile mapbox-gl-style-spec in node_modules:

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/jingsam/projects/underreact-test/node_modules/@mapbox/mapbox-gl-style-spec/expression/definitions/interpolate.js: Unexpected token (10:12)

   8 | import { hcl, lab } from '../../util/color_spaces';
   9 | 
> 10 | import type { Stops } from '../stops';
     |             ^
  11 | import type { Expression } from '../expression';
  12 | import type ParsingContext from '../parsing_context';
  13 | import type EvaluationContext from '../evaluation_context';

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

here is my babel.config.js:

module.exports = {
  presets: ['@mapbox/babel-preset-mapbox', '@babel/preset-flow']
}

[jingsam]

Seems that we set configFile: false to disable babel to read external babel.config.js

https://github.com/mapbox/underreact/blob/c7d4ee994a9d038ed2bb6a5ef6db6364f6383367/lib/webpack-config/babel-loader-config.js#L101

[kepta]

@jingsam it is intentional not to compile non-standard Javascript (flow) in the node_modules. To get around this problem, you will have to manually compile mapbox-gl-style-spec like this:

// underreact.config.js
module.exports = {
  webpackConfigTransform: config => {
    injectGlStyleSpecLoader(config);
    return config;
  }
};

function injectGlStyleSpecLoader(webpackConfig) {
  const rulesOneOf = webpackConfig.module.rules.find(obj => obj.oneOf).oneOf;
  // The first loader is the regular javascript loader
  const myLoader = Object.assign({}, rulesOneOf[0], {
    exclude: undefined,
    include: new RegExp(
      '^' +
        path.resolve(
          __dirname,
          'node_modules/@mapbox/mapbox-gl-style-spec/(?!dist)'
        )
    )
  });
  rulesOneOf.unshift(myLoader);
}

[jingsam]

@kepta Do you mean standard Javascript is the code that conform @mapbox/babel-preset-mapbox? I think the standard one is just use default babel setting, no other preset.

I think when users specify compileNodeModules: [] option, they definitely want to compile there modules by their project wide babel config. Don't you think your solution to compile mapbox-gl-style-spec is not elegant?