Create React App doesn't strip Flow types inside node_modules directory

问题

I've created new React app using create-react-app@1.4.3. And my app depends on NPM module which contains several Flow typed JSX files (retail-ui).

App.js of my React app:

import React, { Component } from 'react';
import Button from "retail-ui/components/Button";
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div>
          <Button>First button</Button>
          <Button>Second button</Button>
      </div>
    );
  }
}

Head of retail-ui/components/Button:

// @flow
import events from 'add-event-listener';
import classNames from 'classnames';
import * as React from 'react';

import PropTypes from 'prop-types';

import Corners from './Corners';
import Icon from '../Icon';

import '../ensureOldIEClassName';
import styles from './Button.less';

const KEYCODE_TAB = 9;

let isListening: boolean;
let tabPressed: boolean;

function listenTabPresses() {
  if (!isListening) {
...

When I run npm start, I get this error:

./src/App.js
Failed to compile.

./node_modules/retail-ui/components/Button/Button.js
Module parse failed: Unexpected token (16:15)
You may need an appropriate loader to handle this file type.
| const KEYCODE_TAB = 9;
|
| let isListening: boolean;
| let tabPressed: boolean;
|

So it looks like Flow keywords haven't been stripped and JS syntax checking failed. But if I add // @flow and some Flow types to App.js, everything will be okay. How can I configure generated app to work with Flow inside modules?

回答1:

I looked into retail-ui package.json and they don't seem to have installed any babel plugin to remove flow types. So install babel plugin into that particular module to fix it.

npm install --save-dev babel-plugin-transform-flow-strip-types

Create .babelrc file with this content in the most parent directory

{
    plugins: ["transform-flow-strip-types"]
}

this should remove flow types at runtime

来源：https://stackoverflow.com/questions/47163170/create-react-app-doesnt-strip-flow-types-inside-node-modules-directory

标签

javascript

flowtype

create-react-app

flow-typed