React.createElement:type无效 - 期望一个字符串(用于内置组件)或一个类/函数(用于复合组件)但得到:object

Question

预期

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

结果

我收到以下错误

React.createElement:type无效 - 期望一个字符串(用于内置组件)或一个类/函数(用于复合组件)但得到: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;它将工作,但我正在尝试使用导出语法.是什么驱使我坚果是在另一个项目我在这里做完全相同的事情,它的工作正常:(

Answer 1

您遇到的问题是混合两种不同的模块系统,这些系统在解决和实施方式上有所不同.CommonJS模块是动态的,与ES6模块静态可分析相反.

像Babel这样的工具将ES6模块转换为CommonJS,因为原生支持还没有准备好.但是,存在微妙的差异.通过使用默认的export(exports default),转换器发出了一个带有{ default }属性的CommonJS模块,因为在ES6模块中可以命名和默认导出.以下示例是完全有效的ES6模块:

export default class Test1 { }
export class Test2 { }

这将在转换{ default, Test2 }后生成CommonJS模块,并通过使用require将该对象作为返回值.

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

调试React.createElement:type是无效错误

当导入模块出现问题时,React尝试渲染组件时,此错误非常常见.大多数情况下,这是由export模块中的缺失或路径问题引起的(相对路径是某种笑话),如果没有适当的工具,这可能会导致严重的脱毛.

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

另外,除非您确实需要,否则请不要将CommonJS模块与ES6模块混合使用.import/ export语法保留给ES6模块.使用CommonJS模块时,只需使用module.exports和require导入它们即可.在未来,大多数开发人员将使用标准模块格式.在那之前,将它们混合在一起时要小心.

Answer 2

常常..

......它很简单:

const MyModule = require('./MyModule');

VS

const {MyModule} = require('./MyModule');