React + Webpack - 非法出口申报答案

【问题标题】：React + Webpack - Illegal export declarationReact + Webpack - 非法出口申报
【发布时间】：2015-12-24 07:26:00
【问题描述】：

我对 React 还是很陌生，我正在使用 Webpack 和 ES6 进行试验。我编写了下面的代码，它给了我一个illegal export declaration 错误，我不完全确定为什么......

class Header extends React.Component {

    render() {

        return (
            <div id="header">
                header
            </div>
        )

    }

}

export default Header;

来自 CLI 的错误是：

throw new Error('Error transforming ' + filename + ' to JS: ' + e.toStri
            ^
Error: Error transforming /Users/leaky/Projects/CBP/public-api/docs/app/components/www/header/header.jsx to JS: Error: Parse Error: Line 13: Illegal export declaration

我在 webpack 中配置了 babel 加载器，如下所示：

{ test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/ },

【问题讨论】：

错误的堆栈跟踪是什么？你还有其他的装载机吗？
那个错误信息不是来自 Babel，看起来是 jsx 错误，你启用了 jsx 加载器吗？
在这里工作正常：babeljs.io/repl。需要更多上下文。
@loganfsmyth 我正在使用 babel-loader
我们需要更多信息，我询问了堆栈跟踪，而您尚未向我们展示。这不是 Babel 错误，它在 Babel 代码库中的任何地方都不存在。我们需要更多信息来解决这个问题。您需要将您的代码库缩减为可靠的可重现案例，然后我们可以提供帮助。你的完整 webpack 配置是什么？这是您要加载的唯一文件吗？如果你删除了 Babel-loader，错误还会出现吗？

标签： reactjs ecmascript-6 webpack

【解决方案1】：

请确保您实际上没有导入除已编译文件之外的任何 js 文件。在从各种文件迁移到 Webpack 包后遇到过这个问题，我仍然引用旧的非捆绑文件，因此 ES6 导入声明失败。

【讨论】：

【解决方案2】：

正如@JMM 和我在这个问题“import syntax not working with webpack”中回答的那样，

您可能需要使用babel 或babel-loader 来启用import
确保任何其他加载程序没有干扰babel-loader

希望对你有帮助

【讨论】：