react-icons 使用 webpack 解决错误

Question

I saw the other question about react-icons not loading in webpack but the error I'm getting is a bit different and I have no idea how to fix it.

I'm trying to use react-icons with webpack but I'm getting the following error:

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

Here is my webpack setup:

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

Here is where I'm trying to import the react-icons in my line-item.jsx

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

var LineItem = React.createClass({
})

module.exports = LineItem;

I'm brand new to webpack and just learning as I'm going but any help would be much appreciated.

EDIT: I changed the import to

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

and now getting a different error that I do believe is webpack related

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.

Thanks!

Answer 1

Try changing your import from:

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

To:

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

That resolved the "Module parse failed" problem you're describing for me.

Answer 2

By default babel ignores the node_modules directory. Unless you change that setting, you need to import the icons from the lib directory.

See this GitHub issue for more details.

To import one icon:

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

To import multiple icons:

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

Answer 3

If you have run npm install react-icons then you should just be able to require it in your component. I don't believe you need to adjust the webpack configuration.

EDIT--

The correct syntax is:

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

As per their NPM page .

Answer 4

The right way to import is import FaBeer from 'react-icons/fa/beer' http://gorangajic.github.io/react-icons/index.html enter link description here .

In the new versions of webpack it is necessary to put the suffix -loader

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

Answer 5

I had the same issue before and it took me decades to solve it.

You should import it this way

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