Using react-icons package with react-boilerplate

Question

When I install react-icons and trying to import

import FaBeer from 'react-icons/fa/beer'; I get an error

Module parse failed: /Users/firfi/work/react-redux-todo/node_modules/react-icons/fa/beer.js Unexpected token (8:12)

If I change import to import FaBeer from 'react-icons/lib/fa/beer'; I get

Module parse failed: /Users/firfi/work/react-redux-todo/node_modules/react-icon-base/index.js Unexpected token (3:50)
You may need an appropriate loader to handle this file type.

Reading the error message, I figured out I should change my webpack config.

So I changed exlude statement in

{
  test: /\.js$/, // Transform all .js files required somewhere with Babel
  loader: 'babel',
  exclude: /node_modules/,
  query: options.babelQuery,
}

to exclude: /node_modules\/(?!(react-icon-base|react-icons)\/).*/,

And now I can import FaBeer from 'react-icons/fa/beer';

However, when I use it as in my render method, it give me an error

warning.js:36Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method ofFaBeer.

So how do I get some beer?

Using react-icons package with react-boilerplate

0 Answers0