javascript - 无法导入模块 : You may need an appropriate loader

Question

我有一个使用 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';

你最好在 webpack 配置中排除 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

并包含在 webpack 配置中:

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