React.createElement：类型无效-电子反应样板

问题描述

我是一位尝试获取一些编码的设计师，以便我可以在业余时间从事自己的项目。我克隆了此[electron-react-boilerplate] [1]以开始使用，并开始使用导航UI只是为了使球滚动。

错误

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in,or you might have mixed up default and named imports.

Check your code at TasksPage.tsx:5.
    in TasksPage (at Routes.tsx:27)
    in Suspense (at Routes.tsx:26)
    in TasksPage (created by Context.Consumer)
    in Route (at Routes.tsx:35)
    in Switch (at Routes.tsx:34)
    in App (at Routes.tsx:33)
    in Routes (at Root.tsx:17)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (at Root.tsx:16)
    in Provider (at Root.tsx:15)
    in Root (created by HotExportedRoot)
    in AppContainer (created by HotExportedRoot)
    in HotExportedRoot
    in AppContainer (at app/index.tsx:15)

在TasksPage.tsx上，第五行是<Tasks />，这使我指向Tasks.tsx文件（如下所示）。

Tasks.tsx （导出）

import React from 'react';
import { Link } from 'react-router-dom';
import routes from '../../constants/routes.json';

export default function Tasks(): JSX.Element {
  return(
    <div>
      <div> <h2>Test</h2></div>
    </div>
  );
}

TasksPage.tsx （导入）

import React from 'react';
import Tasks  from '../features/tasks/Tasks';

export default function TasksPage() {
  return <Tasks />;
}

Routes.tsx

/* eslint react/jsx-props-no-spreading: off */
import React from 'react';
import { Switch,Route } from 'react-router-dom';
import routes from './constants/routes.json';
import App from './containers/App';
import HomePage from './containers/HomePage';

// Lazily load routes and code split with webpack
const LazyCounterPage = React.lazy(() =>
  import(/* webpackChunkName: "CounterPage" */ './containers/CounterPage')
);

const CounterPage = (props: Record<string,any>) => (
  <React.Suspense fallback={<h1>Loading...</h1>}>
    <LazyCounterPage {...props} />
  </React.Suspense>
);


// Lazily load routes and code split with webpack
const LazyTasksPage = React.lazy(() =>
  import(/* webpackChunkName: "TasksPage" */ './containers/TasksPage')
);

const TasksPage = (props: Record<string,any>) => (
  <React.Suspense fallback={<h1>Loading...</h1>}>
    <LazyTasksPage {...props} />
  </React.Suspense>
);

export default function Routes() {
  return (
    <App>
      <Switch>
        <Route path={routes.TASKS} component={TasksPage} />
        <Route path={routes.COUNTER} component={CounterPage} />
        <Route path={routes.HOME} component={HomePage} />
      </Switch>
    </App>
  );
}

routes.json

{
  "HOME": "/","COUNTER": "/counter","TASKS": "/tasks"
}

其他页面供参考

HomePage.tsx

import React from 'react';
import Home from '../components/Home';


export default function HomePage() {
  return <Home />;
}

CounterPage.tsx

import React from 'react';
import Counter from '../features/counter/Counter';

export default function CounterPage() {
  return <Counter />;
}

解决方法

它可以链接到：https://stackoverflow.com/a/48272291/9201061

由于您使用的是.ts和.tsx，因此需要告诉它在Webpack配置中也使用resolve.extensions查找那些内容：

编辑：：也许您应该在TasksPage（）之后添加: JSX.Element