モジュールをインポートできません：適切なローダーが必要な場合があります

Question

私はbowerとwebpackを使ってReactプロジェクトを持っています。

このモジュールを使用しようとしていますhttps://github.com/jrowny/react-absolute-grid。

私はNPMとそれをインストールし、私はこのように私のコードにこれを追加しました：私は、問題はその中で疑い

Line 3: Unexpected token 
You may need an appropriate loader to handle this file type. 
| 'use strict'; 
| 
| import React from 'react'; 

：

import AbsoluteGrid from 'react-absolute-grid/lib/AbsoluteGrid.jsx'; 

モジュールをインポートし、私はこの問題を取得します

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loader : 'babel' 
     } 
    ] 
    } 
} 

module.exports = config; 

しかし、私はよく分からない：webpack.config.js私は私のコードがどこからファイルをロードします。

同様のエラーメッセージが表示されていましたが、他にも問題がありました。

Answer 1

変更するには、モジュールのインポート方法：

から：あなたがより良いのWebPACKのコンフィグにnode_modulesとbower_componentsを除外する必要があり

import AbsoluteGrid from 'react-absolute-grid'; 

そして：

import AbsoluteGrid from 'react-absolute-grid/lib/AbsoluteGrid.jsx'; 

へ

... 
loader: 'babel-loader', 
exclude: /(node_modules|bower_components)/ 

を

さらにbabel-loaderをreactとes2015バベルプリセットと併用することをお勧めします。

それらをインストールします。

のWebPACKのコンフィグで

npm install --save-dev babel-loader babel-core babel-preset-react babel-preset-es2015 

そしてinclue：

module : { 
    loaders : [ 
    { 
     test : /\.jsx?/, 
     loader: 'babel-loader', 
     exclude: /(node_modules|bower_components)/, 
     query: { 
     presets: ['react', 'es2015'] 
     } 
    } 
    ] 
}