реакция-иконы разрешить ошибку с webpack

Question

Я видел other question около react-icons не загружался в webpack, но ошибка, которую я получаю, немного отличается, и я понятия не имею, как ее исправить.

Я пытаюсь использовать реагировать-иконки с WebPack, но я получаю следующее сообщение об ошибке:

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

Вот моя установка 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' 
      } 
     ] 
    } 
}; 

Вот где я пытаясь импортировать реагирующие-иконки в моей линии-item.jsx

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

var LineItem = React.createClass({ 
}) 

module.exports = LineItem; 

Я новенькая WebPack и только учусь, как я иду номе любая помощь была бы высоко оценена.

EDIT: Я изменил импорт в

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

и теперь получаю другую ошибку, что я действительно верю в WebPack, связанные

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.

спасибо!

Answer 1

Если вы запустили npm install react-icons, тогда вы сможете просто потребовать его в своем компоненте. Я не считаю, что вам нужно настроить конфигурацию webpack.

EDIT--

Правильный синтаксис:

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

По их NPM page.

Answer 2

Попробуйте изменить свой импорт из:

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

To:

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

Это разрешило "модуль разбора не удалось" проблема вы описываете для меня.

Answer 3

По умолчанию babel игнорирует каталог node_modules. Если вы не измените этот параметр, вам нужно импортировать значки из каталога lib.

Для получения более подробной информации см. this GitHub issue.

Чтобы импортировать один значок:

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

Чтобы импортировать несколько значков:

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

Answer 4

Правильный путь импорта является import FaBeer from 'react-icons/fa/beer'http://gorangajic.github.io/react-icons/index.htmlenter link description here.

В новых версиях WebPack необходимо поставить суффикс -loader

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