Skip to content
This repository has been archived by the owner on Dec 19, 2023. It is now read-only.

Flow error in node_modules #89

Open
jingsam opened this issue Jun 20, 2019 · 3 comments
Open

Flow error in node_modules #89

jingsam opened this issue Jun 20, 2019 · 3 comments

Comments

@jingsam
Copy link

jingsam commented Jun 20, 2019

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
Copy link
Author

jingsam commented Jun 21, 2019

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

@kepta
Copy link
Contributor

kepta commented Jun 22, 2019

@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
Copy link
Author

jingsam commented Jun 24, 2019

@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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants