CODEWITHSUNDEEP
javascriptreactjswebpack
yoleg
yoleg

Reputation: 381

react-icons resolve error with webpack

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!

Upvotes: 3

Views: 9588

Answers (5)

Ugur Yilmaz
Ugur Yilmaz

Reputation: 499

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'

Upvotes: 0

nodejh
nodejh

Reputation: 8008

The right way to import is import FaBeer from 'react-icons/fa/beer' http://gorangajic.github.io/react-icons/index.htmlenter 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']
  }
}

Upvotes: 0

Luke Peavey
Luke Peavey

Reputation: 3879

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'

Upvotes: 2

cfogelberg
cfogelberg

Reputation: 1488

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.

Upvotes: 4

Toby
Toby

Reputation: 13385

If you have run npm install react-iconsthen 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.

Upvotes: 0

Related Questions