Babel loader 无法导入 React答案

【问题标题】：Babel loader unable to import ReactBabel loader 无法导入 React
【发布时间】：2016-05-10 22:08:57
【问题描述】：

我正在使用带有 webpack 的 babel loader 来组合多个 React 组件。虽然我已经安装了 webpack 和 babel-loader 以及它的依赖项。我收到两个错误：

ERROR in ./components/layout.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/layout.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| 
| class Layout extends React.Component {
 @ ./build/import.js 15:14-49

ERROR in ./components/topic-list.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/topic-list.jsx Line 17: Unexpected token <
You may need an appropriate loader to handle this file type.
|     render: function () {
|         return (
|             <div>
|                 <div className="row topic-list">
|                     <SingleTopicBox 
 @ ./build/import.js 11:17-56

webpack.config.js

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

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: APP_DIR + '/import.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            include: APP_DIR,
            loader: 'babel',

            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
          }
        ],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

import.js

import React from 'react';
import ReactDOM from 'react-dom';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

layout.jsx

import React from 'react';

class Layout extends React.Component {

    render() {
        return (
            <div className="container">
                <TopicsList />

            </div>
        );
    }
};

ReactDOM.render(<Layout />, document.getElementById('app'));

【问题讨论】：

尝试从你的 webpack 配置文件中删除 include 选项。 Include 文件夹应该是 webpack 可以找到你的加载器的文件夹，在这种情况下是 babel loader
根据@The answer删除include解决了这个问题。

标签： javascript reactjs webpack babeljs

【解决方案1】：

从您的 webpack.config.js 文件中删除 include 选项。 include 文件夹应该是 webpack 可以找到你的加载器的文件夹，在这种情况下是 babel loader

【讨论】：

【解决方案2】：

我不清楚您的文件结构，但可能是您的 webpack.config.js 的 resolve 部分中的 include 部分导致了问题。

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

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: APP_DIR + '/import.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            include: THIS_SHOULD_BE_YOUR_SOURCE_FOLDER,
            loader: 'babel',

            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
          }
        ],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

【讨论】：

【解决方案3】：

您似乎缺少 Babel 的 React 预设：babel-preset-react

npm install --save-dev babel-preset-react

并将其添加到您的 babel-loader 预设中。

【讨论】：

你添加了你的预设{预设：['es2015'，'react']}

【解决方案4】：

我遇到了同样的情况，并通过删除 webpack 规则的 exclude 部分来解决它（因为失败的导入是对 node_modules 中导入的 npm 包的导入strong> 目录）。

因此，适用于您的示例：

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

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: APP_DIR + '/import.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            include: APP_DIR,
            loader: 'babel',

            // we want the loader to search in node_modules,
            // so we comment the line below
            // exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
          }
        ],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

【讨论】：