Question

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

我正在尝试使用此模块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']
      }
    }
  ]  
}

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

1 个答案: