react-icons解決與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' 
      } 
     ] 
    } 
}; 

這裏就是我試圖導入我的行中的react-icons -jsx

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

var LineItem = React.createClass({ 
}) 

module.exports = LineItem; 

我是全新的webpack，只是學習，因爲我要去埠任何幫助將不勝感激。

編輯： 我改變了進口

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

正確的語法是：

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

按他們的NPM page。

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 FaBeer from 'react-icons/lib/fa/beer' 

導入多個圖標：

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。

在的WebPack的新版本，有必要把後綴-loader

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