Question

我使用带有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'));

Answer 1

从 webpack.config.js 文件中删除包含选项。 Include 文件夹应该是webpack可以在这种情况下找到您的加载程序的文件夹babel loader

Answer 2

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

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']
        }
    }
};

Answer 3

您似乎错过了Babel的React预设：babel-preset-react

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

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

Answer 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']
        }
    }
};

Babel loader无法导入React

4 个答案: