React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件)，但得到了:对象 [英] React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

问题描述

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

I should be able to export my App component file and import it into my index.js.

我收到以下错误

React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件)，但得到:object

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object

---

我的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;，它将起作用，但是我正在尝试使用导出语法.让我发疯的是在另一个项目中，我在这里做的完全相同，而且工作正常:(

If I uncomment module.exports = App; it will work, but I'm trying to use the export syntax. What is driving me nuts is in another project I am doing the exact same thing here and it's working fine :(

推荐答案

您遇到的问题是由于混合了两种不同的模块系统而导致的，它们的方式不同 CommonJS模块是动态的，与

The issue you have encountered was caused by mixing two different module systems which differ in the way they are resolved and implemented. CommonJS modules are dynamic and contrary to that ES6 modules are statically analyzable.

像 Babel 之类的工具一样，由于默认导出(exports default)编译器发出了具有{ default }属性的CommonJS模块，因为可以在ES6模块中命名和默认导出.以下示例是完全有效的ES6模块:

Tools like Babel transpile ES6 modules to CommonJS as for now because native support is not ready yet. But, there are subtle differences. By using default export (exports default) the transpiler emitted a CommonJS module with { default } property as there can be named and default export alongside in ES6 module. Following example is perfectly valid ES6 module:

export default class Test1 { }
export class Test2 { }

这将导致在编译后使用require的{ default, Test2 } CommonJS模块，您将获得该对象作为返回值.

This would result in { default, Test2 } CommonJS module after transpiling and by using require you get that object as a return value.

要在CommonJS中导入ES6模块的默认导出，必须出于上述原因使用require(module).default语法.

In order to import ES6 module's default export in CommonJS you must use require(module).default syntax by the reasons mentioned above.

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

This error is very common when React tries to render a component when there is an issue with the imported module. Most of the time this is caused by missing export in the module or issues with the path (relative paths are some kind of a joke) and without proper tooling, this may lead to serious hair pulling.

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

In this case, React couldn't render generic object {__esModule: true, default: function} and just threw an error. When using require there is a possibility to just print out required module to see it's contents which may help to debug the issue.

请注意，除非确实需要，请不要将CommonJS模块与ES6模块混合使用. import/export语法保留给ES6模块.使用CommonJS模块时，只需使用module.exports并使用require导入它们.将来，大多数开发人员将使用标准模块格式.在此之前，将它们混合在一起时要小心.

As a side note, please don't mix CommonJS modules with ES6 modules unless you really need. import/export syntax is reserved for the ES6 modules. When using CommonJS modules, just use module.exports and use require to import them. In the future, most developers will be using standard module format. Until then, be careful when mixing them together.

这篇关于React.createElement:类型无效-预期为字符串(对于内置组件)或类/函数(对于复合组件)，但得到了:对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！