2016-05-05 10 views
1

自分のプロジェクトにhttps://www.npmjs.com/package/react-bootstrap-typeaheadをインクルードしようとしていますが、わかりやすいブラウザタスクを実行すると、ParseError: Unexpected tokenエラーが発生します。ここで完全なメッセージ:反応bootstrap-typeaheadが必要なときにgrunt browserifyが失敗する

Running "browserify:dist" (browserify) task 
>> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1 
>> .bootstrap-typeahead .dropdown-menu { 
>>^
>> ParseError: Unexpected token 
Warning: Error running grunt-browserify. Use --force to continue. 

Aborted due to warnings. 

問題が反応し、ブートストラップ・先行入力ソースjsの内部require('/some/file.css')があることであること。私は 似たSO(まだ未回答)質問が、WebPACKのを使用して、ないbrowserify +面倒そう:

browserify: { 
     dist: { 
      cwd: 'build', 
      options: { 
       transform : ['browserify-css'], 
       alias: { 
        'index' : './dist/index.js', 
        'root' : './dist/containers/root.js', 
        'designs' : './dist/components/designs.js', 
        'addMutationForm' : './dist/components/addMutationForm.js', 
        'ProteinChecker': './dist/containers/ProteinChecker.js', 
        'configureStore': './dist/configureStore.js', 
        'actions' : './dist/actions.js', 
        'reducers' : './dist/reducers.js', 
        'utils': './dist/utils.js', 
       }, 
       require: [ 
        './node_modules/isomorphic-fetch', 
        './node_modules/jquery', 
        './node_modules/react', 
        './node_modules/react-dom', 
        './node_modules/bootstrap', 
        './node_modules/redux', 
        './node_modules/babel-polyfill', 
        './node_modules/redux-logger', 
        './node_modules/redux-thunk', 
        './node_modules/underscore', 
        './node_modules/redux-form', 
        './node_modules/react-bootstrap-typeahead' 
       ] 
      }, 
      src: ['./dist/*.js', './dist/*/*.js'], 
      dest: './public/build/app.js' 
     } 
    } 

私は問題を解決しようとしたときに出会ったいくつかのこと:ここで

は私の面倒browserify作業です Using react-bootstrap-typeahead generating CSS errors と反応し、ブートストラップ・先行入力プロジェクトのgithubのページで閉じられた問題が、イサキを通じて使用には対応していません:該当信じない https://github.com/ericgio/react-bootstrap-typeahead/issues/2 browserify-CSS変換を用いて示唆しています。

私は、これはオプションフィールドにtransform : ['browserify-css']を追加することにより、変換に使用するイサキを取得しようとしたが、それは動作しませんでした。私はまだまったく同じエラーメッセージが表示されます。

私は、コマンドラインでbrowserify-cssトランスフォームを使ってbrowserifyを使って、この1つのライブラリだけをバンドルしてみましたが、そのバンドルをインクルードしようとしましたが、これは相対的な(これはとにかく良い解決策ではないと思います。なぜなら、私がブラウザの正しいことを理解すれば、コマンドラインで作った先読みバンドルと実際のアプリケーションバンドルのために最終的なjsファイルは大変です!)。

私はこれを解決する方法上の任意のアイデア?

ありがとうございます!

+0

モジュールのv0.5.x(現在v0.10.4)がJSファイルでCSSを直接​​要求していないことに注意してください。これはもはや問題ではありません。 – ericgio

答えて

1

だから結局のところソリューションは反応し、ブートストラップ先行入力のpackages.jsonに

"browserify": { 
    "transform": ["browserify-css"] 
} 

を追加しました。 これはbrowserify-css docs ...(facepalm)

関連する問題