javascript - 未捕获的类型错误 : Cannot call a class as a function

Question

我已经查看了关于这个问题的所有答案:
Getting "Cannot call a class as a function" in my React Project

---

我仍然无法弄清楚为什么下面的代码会返回错误“无法将类作为函数调用”。就语法而言，我在这里遗漏了什么吗？

• 我正在运行 Gulp、Rollup 和 Babel
• 包含以上所有插件
• reactDOM.render 的选择器很好，不需要导出类

代码:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div />
        );
    }
}

// Selector is fine, changes bg to red
document.querySelector('#app').style.background = 'red';

ReactDOM.render(<App />, document.querySelector('#app'));

错误:

使用 Rollup 和 Babel 的 Gulp 任务:

gulp.task('js', () => {

    // Package up ES6 moduleswith stream
    const stream = plugins.rollupStream({
        input: paths.dev + '/script/app.js',
        sourcemap: true,
        format: 'iife',
        name: 'app',
        plugins: [
            plugins.rollupPluginReplace({'process.env.NODE_ENV': JSON.stringify( 'production' )}),
            plugins.rollupPluginJsx({ factory: 'React.createElement' }),
            plugins.rollupPluginCommonjs({}),           
            plugins.rollupPluginNodeResolve({ jsnext: true, main: true }),
            plugins.rollupPluginIncludepaths({ paths: [paths.dev + '/script/'] })
        ]
    })

    return stream
        .on('error', e => {
            console.error(e.stack);

            notifier.notify({
                title: 'Rollup error',
                message: e.stack
            });
            stream.emit('end');
        })
        // Error handling
        .pipe(plugins.plumber())
        // Prepare files for sourcemap
        .pipe(plugins.vinylSourceStream('app.js', paths.dev + '/script/'))
        .pipe(plugins.vinylBuffer())
        .pipe(plugins.sourcemaps.init({ loadMaps: true }))
        // Convert ES6
        .pipe(plugins.babel({ presets: ['es2015', 'react'] }))
        // Write sourcemap
        .pipe(plugins.sourcemaps.write('.'))
        .pipe(gulp.dest(paths.tmp + '/script/'))
        .pipe(plugins.browserSync.stream());
});

代码库:

https://github.com/alexplummer/framework-react/blob/master/_dev/script/app.js

Answer 1

问题是您的 JSX 未正确转译。如果您查看 devtools 中的输出(堆栈跟踪底部的第二个错误)，您将看到该类作为常规函数调用:

reactDom.render(App(), document.querySelector('#app'));
//              ^^^^^

您正在使用 rollup-plugin-jsx 并且它的处理方式似乎不同。真的没有理由使用它，如果你正在使用 Babel，因为 Babel 也可以转换你的 JSX。我假设你已经添加了这个，因为 Rollup 提示 JSX。那是因为您的构建管道不太正确。目前，您首先将代码与 Rollup 捆绑在一起，然后在其上运行 Babel。

您可以使用 rollup-plugin-babel 将 Babel 直接集成到 Rollup 中，所以所有被 Rollup 打包的东西都会被 Babel 自动转译。通过添加此插件，您可以完全删除 rollup-plugin-jsx，之后您也不需要将其通过管道传输到 Babel。

这些是对 tasks/js.js 的更改(Stack Overflow 没有针对 git diff 的语法突出显示，但您可以在 Gist - tasks/js.js diff 中看到突出显示的版本):

diff --git a/tasks/js.js b/tasks/js.js
index 0caabc1..7c5319d 100644
--- a/tasks/js.js
+++ b/tasks/js.js
@@ -70,7 +70,10 @@ gulp.task('js', () => {
                name: 'app',
                plugins: [
                        plugins.rollupPluginReplace({'process.env.NODE_ENV': JSON.stringify( 'development' )}),
-                       plugins.rollupPluginJsx({ factory: 'React.createElement' }),
+                       plugins.rollupPluginBabel({
+                               exclude: 'node_modules/**',
+                               presets: [['es2015', { modules: false }], 'react']
+                       }),
                        plugins.rollupPluginCommonjs({}),
                        plugins.rollupPluginNodeResolve({ jsnext: true, main: true }),
                        plugins.rollupPluginIncludepaths({ paths: [paths.dev + '/script/'] })
@@ -93,8 +96,6 @@ gulp.task('js', () => {
                .pipe(plugins.vinylSourceStream('app.js', paths.dev + '/script/'))
                .pipe(plugins.vinylBuffer())
                .pipe(plugins.sourcemaps.init({ loadMaps: true }))
-               // Convert ES6
-               .pipe(plugins.babel({ presets: ['es2015', 'react'] }))
                // Write sourcemap
                .pipe(plugins.sourcemaps.write('.'))
                .pipe(gulp.dest(paths.tmp + '/script/'))

请注意，您需要在 Babel 中关闭模块转译，因为 Rollup 需要 ES 模块。附带说明一下，babel-preset-es2015 已弃用，取而代之的是 babel-preset-env，它包含 es201x 预设所做的一切和更多。它是 es2015 的直接替代品，详情请参阅 Migration guide from es2015 to env .