React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象

Question

预期

我应该能够导出我的App组件文件并将其导入到index.js中。

结果

我收到以下错误

React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象

我的index.js

const React = require('react');
const ReactDOM = require('react-dom');
const App = require('./components/App');
require('./index.css');

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

然后在我的components / App.js中

const React = require('react');

export default class App extends React.Component {
    render() {
        return (
            <div>
                Hell World! Wasabi Sauce!
            </div>
        );
    }
}

// module.exports = App;

如果我取消注释module.exports = App;，它将起作用，但是我正在尝试使用导出语法。让我发疯的是在另一个项目中，我在这里做的完全相同，而且工作正常:(

Answer 1

您遇到的问题是由于将两个不同的模块系统混合在一起而导致的，这些模块系统的解决和实现方式不同。CommonJS模块是动态的，与ES6模块是静态可分析的相反。

由于尚未提供本机支持，因此像Babel这样的工具目前仍将ES6模块转换为CommonJS
。但是，存在细微的差异。通过使用默认导出（），编译器发出了一个具有属性的CommonJS模块，因为可以在ES6模块中命名和默认导出。以下示例是完全有效的ES6模块：exports default{ default }

export default class Test1 { }
export class Test2 { }

{ default, Test2 }在编译后，通过使用require该对象作为返回值，将生成CommonJS模块。

为了在CommonJS中导入ES6模块的默认导出，您必须require(module).default根据上述原因使用语法。

调试React.createElement：类型是无效错误

当导入的模块存在问题时，React尝试渲染组件时，此错误非常常见。大多数情况下，这是由于export模块缺失或路径问题（相对路径是一个笑话）造成的，并且没有适当的工具，这可能会导致严重的头发拉扯。

在这种情况下，React无法呈现通用对象，{__esModule: true, default: function}而只会引发错误。使用时require，可以仅打印出所需的模块以查看其内容，这可能有助于调试问题。

附带说明，除非确实需要，否则请勿将CommonJS模块与ES6模块混合使用。import/
export语法为ES6模块保留。使用CommonJS模块时，只需使用module.exports并使用require即可将其导入。将来，大多数开发人员将使用标准模块格式。在此之前，将它们混合在一起时要小心。