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'] 
    } 
}