react-icons 使用 webpack 解决错误答案

【问题标题】：react-icons resolve error with webpackreact-icons 使用 webpack 解决错误
【发布时间】：2016-11-29 11:38:26
【问题描述】：

我看到 other question 关于 react-icons 没有加载到 webpack 中，但我得到的错误有点不同，我不知道如何修复它。

我正在尝试将 react-icons 与 webpack 一起使用，但出现以下错误：

./components/line-item.jsx 中的错误未找到模块：错误：无法在 public/map/components @ ./components/line-item.jsx 7:18-40 中解析模块“react-icons”

这是我的 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 意外令牌 (8:12) 您可能需要适当的加载程序来处理此文件类型。

谢谢！

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

尝试更改您的导入来源：

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

收件人：

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

这解决了您为我描述的“模块解析失败”问题。

【讨论】：

【解决方案2】：

默认情况下，babel 会忽略 node_modules 目录。除非您更改该设置，否则您需要从 lib 目录中导入图标。

更多详情请见this GitHub issue。

要导入一个图标：

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

导入多个图标：

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

【讨论】：

【解决方案3】：

如果你已经运行了npm install react-icons那么你应该能够在你的组件中使用它。我认为您不需要调整 webpack 配置。

编辑--

正确的语法是：

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

根据他们的NPM page。

【讨论】：

我安装了 react-icons 作为依赖项，但这也不起作用。当我只是尝试要求它时，也会发生同样的错误。
查看我编辑的答案 - 您的语法与他们的文档不匹配。
好吧，我得到一个不同的错误... ./~/react-icons/fa/beer.js 中的错误模块解析失败 web-reporting/public/map/node_modules/react- icons/fa/beer.js 意外令牌 (8:12) 您可能需要适当的加载程序来处理此文件类型。这就是为什么我认为我需要编辑 webpack 配置

【解决方案4】：

正确的导入方式是import FaBeer from 'react-icons/fa/beer'http://gorangajic.github.io/react-icons/index.html enter link description here。

在新版本的 webpack 中需要加上后缀-loader

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

【讨论】：

【解决方案5】：

我之前也遇到过同样的问题，我花了几十年才解决。

你应该这样导入

从 'react-icons/lib/fa/beer' 导入 {FaBeer}

【讨论】：