react-icons beheben fehler mit webpack

Question

Ich sah die other question über react-icons nicht laden in webpack aber der fehler ich bekomme ist ein bisschen anders und ich habe keine idee, wie man es beheben.

Ich versuche, mit webpack reagieren-Symbole zu verwenden, aber ich bin immer folgende Fehlermeldung:

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

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

Hier ist, wo ich bin versuchen, die reagieren-Ikonen in meiner Linie-item.jsx

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

var LineItem = React.createClass({ 
}) 

module.exports = LineItem; 

ich bin ganz neu in webpack zu importieren und nur zu lernen, wie ich bu gehe t jede Hilfe wäre sehr geschätzt.

EDIT: Ich änderte den Import

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

und jetzt einen anderen Fehler bekommen, dass ich glaube tun ist webpack Zusammenhang

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.

Dank!

Answer 1

Wenn Sie npm install react-icons ausgeführt haben, dann sollten Sie es nur in Ihrer Komponente benötigen. Ich glaube nicht, dass Sie die Konfiguration des Webpacks anpassen müssen.

EDIT--

Die korrekte Syntax ist:

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

Wie pro ihre NPM page.

Answer 2

Versuchen Sie Import aus wechselnden:

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

An:

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

, dass das behoben "Modul Parse fehlgeschlagen" Problem, das Sie für mich sind zu beschreiben.

Answer 3

Standardmäßig ignoriert Babel das Verzeichnis node_modules. Wenn Sie diese Einstellung nicht ändern, müssen Sie die Symbole aus dem Verzeichnis lib importieren.

Weitere Details finden Sie unter this GitHub issue.

ein Symbol importieren:

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

mehrere Symbole zu importieren:

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

Answer 4

Der richtige Weg ist import FaBeer from 'react-icons/fa/beer'http://gorangajic.github.io/react-icons/index.htmlenter link description here zu importieren.

In den neuen Versionen von webpack ist es notwendig, das Suffix zu setzen -loader

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