无法导入模块：您可能需要一个合适的加载程序

我有一个使用bower和webpack的React项目。

我正在尝试使用这个模块https://github.com/jrowny/react-absolute-grid 。

我用npm安装它，然后把它添加到我的代码中，如下所示：

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

导入模块时，出现这个问题：

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

我怀疑问题是，在webpack.config.js我只加载文件从我的代码是：

 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; 

但是，我不确定。

我在SO上看到类似的错误信息，但是就我所知，还有其他问题。

Answer 1

改变你导入模块的方式：

从：

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

至：

 import AbsoluteGrid from 'react-absolute-grid'; 

你应该更好地排除webpackconfiguration中的node_modules和bower_components ：

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

此外，你应该更好地使用babel-loader react和es2015 babel预设。

安装它们：

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

包括在webpackconfiguration：

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