元素类型无效:期望使用字符串(对于内置组件)或类/函数(对于复合组件),但得到:符号

时间:2018-12-15 14:11:40

标签: reactjs webpack lazy-loading

我正在尝试将lazy Loading用于我的应用。

index.js

import React, { Suspense , lazy , Component } from 'react';
import ReactDOM from 'react-dom';
import 'index.scss';
import SomeComponent from './someComponent.js';
import * as serviceWorker from 'serviceWorker';

ReactDOM.render(<SomeComponent />, document.getElementById('root'));
serviceWorker.unregister();

一些组件index.js文件

import React, { Suspense , lazy , Component } from 'react';
import { BrowserRouter } from 'react-router-dom';
const Header = lazy(() => import('./_header'));

class SomeComponent extends Component {
  render() {
    return (
      <BrowserRouter>
          <React.Fragment>
            <Suspense>
              <Header />
            </Suspense>
          </React.Fragment>
      </BrowserRouter>
    );
  }
}

export default SomeComponent;

标头index.js文件

import React, { Component } from 'react';
import './index.scss';

class Header extends Component {
    render() {
        return (
            <h1>Header</h1>
        );
    }
}
export default Header;

但是我遇到了这个错误:

元素类型无效:应使用字符串(对于内置组件)或类/函数(对于复合组件),但得到:符号。

我的反应版本是 v16.6.3

2 个答案:

答案 0 :(得分:3)

Suspense and lazy在以下版本中可用:

"react": "^16.6.3"
"react-dom": "^16.6.3"

此错误与未正确升级的react-dom有关!

答案 1 :(得分:1)

这是一个非常简单的示例,应该使用类似的依赖项来工作。

Edit lazy-header

我建议确保import('./_header')解析为正确的模块,以再次检查是否存在默认导出以及它是React组件类型。此外,请确保悬念组件的{ fallback }也是组件类型。