2017-11-07 5 views
0

[email protected]を使用して新しいReactアプリケーションを作成しました。私のアプリはいくつかのフロー型JSXファイル(retail-ui)を含むNPMモジュールに依存しています。Create React Appはnode_modulesディレクトリ内のフロータイプを取り除きません

App.js私のリアクトアプリの

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> 
    ); 
    } 
} 

小売-UI /コンポーネント/ボタンのヘッド:

// @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) { 
... 

私はnpm startを実行すると、私はこのエラーを取得します:

./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; 
| 

フローキーワードが削除されず、JS構文のチェックに失敗したようです。しかし、// @flowといくつかのフロータイプをApp.jsに追加すると、すべてが問題なくなります。モジュール内のFlowで動作するように生成されたアプリを設定するにはどうすればよいですか?

答えて

0

私はretail-ui package.jsonを調べましたが、フロータイプを削除するためのbabelプラグインはインストールされていないようです。その特定のモジュールにbabelプラグインをインストールして修正してください。

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

ほとんどの親ディレクトリに

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

このコンテンツで.babelrcファイルを作成します。これはまだ同じエラーを取得して、ランタイム

+0

でフロータイプを削除する必要があります。おそらく 'react-scripts'モジュールの' webpack.config.dev.js'に 'babelrc:false'があるためでしょう。 – michaeluskov

関連する問題