Question

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

我尝试在webpack中使用react-icons，但我收到以下错误：

./components/line-item.jsx中的错误找不到模块：错误：无法解析模块＆＃39; react-icons＆＃39;在公共/地图/组件@ ./components/line-item.jsx 7：18-40

这是我的网站设置：

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）您可能需要适当的加载程序来处理此文件类型。

谢谢！

Answer 1

尝试从以下位置更改导入：

Uinput = input("first morph")
Uinput2 = input("second morph")

#this section of code accepts normal or recessive to
#calculate if you will get hets. If hets, clarify morph in separate function
#input to compare are words

def normal_recessive():
if Uinput == ("normal") and Uinput2 == ("normal"):
    print("your results will be all wildtypes")
elif Uinput == ("normal") and Uinput2 == ("recessive"):
    print("Your results will be heterozygous aka hets")
elif Uinput == ("recessive") and Uinput2 == ("normal"):
    print("Your results will be heterozygous aka hets")
elif Uinput == ("recessive") and Uinput2 == ("recessive"):
    print("Your results will be all recessive")
else:
    print("input error, please input recessive or normal for morph type")
    print("please check your spelling and try again")

normal_recessive()

要：

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

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

Answer 2

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

编辑 -

正确的语法是：

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

根据他们的NPM page。

Answer 3

正确的导入方式是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']
  }
}

Answer 4

我以前遇到过同样的问题，花了我数十年的时间来解决。

您应该以这种方式导入

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

react-icons解决了webpack的错误

4 个答案: