リアアイコンがwebpackでエラーを解決しました

Question

other question約react-iconsがwebpackに読み込まれませんでしたが、私が得ているエラーは少し異なり、どのように修正するかわかりません。

私が反応し、アイコンをWebPACKのに使用しようとしているが、私は次のエラーを取得しています：ここで

ERROR in ./components/line-item.jsx Module not found: Error: Cannot resolve module 'react-icons' in public/map/components @ ./components/line-item.jsx 7:18-40

は私のWebPACKのセットアップです：私はどこここ

var path = require('path'); 
var webpack = require('webpack'); 

var config = { 
    iconPath: 'node_modules/react-icons' 
}; 

module.exports = { 
    entry: './main.js', 
    output: {path: __dirname, filename: 'bundle.js'}, 
    module: { 
     loaders: [ 
      { 
      test: /.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015', 'react'] 
      } 
      }, 
      { 
      test: /react-icons\/(.)*(.js)$/, 
      loader: 'babel', 
      include: config.iconPath 
      }, 
      { 
      test: /\.scss/, 
      loader: 'style!css!sass' 
      } 
     ] 
    } 
}; 

ですWebPACKのに

import React from 'react'; 
import FaBeer from 'react-icons'; 

var LineItem = React.createClass({ 
}) 

module.exports = LineItem; 

私は新しいブランドを私のライン-item.jsxで反応し、アイコンをインポートしようと、私は府に行くんだとちょうど学習どんな助けでも大歓迎です。

EDIT： 私は

import FaBeer from 'react-icons/fa/beer'; 

にインポートを変更し、今、私は信じていない別のエラーを取得することはWebPACKの

ERROR in ./~/react-icons/fa/beer.js Module parse failed: /Users/oyachinskiy/Documents/ichnaea-root/web-reporting/public/map/node_modules/react-icons/fa/beer.js Unexpected token (8:12) You may need an appropriate loader to handle this file type.

感謝を関連しています！

Answer 1

npm install react-iconsを実行している場合は、そのコンポーネントにコンポーネントを要求するだけで済みます。 Webpackの設定を調整する必要はないと思います。

EDIT--

正しい構文は次のとおりです。彼らのNPM page 1として

import FaBeer from 'react-icons/fa/beer';

。

Answer 2

からインポートを変更してみてください：に

import FaBeer from 'react-icons/fa/beer'; 

：解決

import FaBeer from 'react-icons/lib/fa/beer'; 

あなたは私のために記述している問題を "モジュール解析に失敗しました"。

Answer 3

デフォルトでは、babelはnode_modulesディレクトリを無視します。この設定を変更しない限り、libディレクトリからアイコンをインポートする必要があります。

詳細はthis GitHub issueを参照してください。

import { MdCancel, MdChat, MdCheck } from 'react-icons/lib/md' 

Answer 4

インポートする正しい方法はimport FaBeer from 'react-icons/fa/beer'http://gorangajic.github.io/react-icons/index.htmlenter link description hereです：複数のアイコンをインポートするには

import FaBeer from 'react-icons/lib/fa/beer' 

：1つのアイコンをインポートするには

。WebPACKの新しいバージョンでは

私が、依存関係としてインストール-アイコンが反応しているが、それはどちらか動作しませんサフィックスに-loader

{ 
    test: /react-icons\/(.)*(.js)$/, 
    loader: 'babel-loader', 
    query: { 
    presets: ['es2015', 'react'] 
    } 
}