react-icons解决了webpack的错误

Question

我看到另一个关于react-icons没有在webpack中加载的问题,但我得到的错误有点不同,我不知道如何解决它.

我正在尝试使用带有webpack的react-icons,但是我收到以下错误:

./components/line-item.jsx中的错误找不到模块:错误:无法解析public/map/components中的模块'react-icons'@ ./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'
          }
      ]
   }
};

这是我在我的line-item.jsx中导入react-icons的地方

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相关的不同错误

./~/react-icons/fa/beer.js中的错误模块解析失败:/Users/oyachinskiy/Documents/ichnaea-root/web-reporting/public/map/node_modules/react-icons/fa/beer.js意外token(8:12)您可能需要一个合适的加载器来处理这种文件类型.

谢谢!

Answer 1

尝试更改导入:

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

至:

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

这解决了你为我描述的"模块解析失败"问题.