Javascript React.createElement:类型无效-Electron React样板文件

我是一名设计师，正试图学习一些编码，这样我就可以在空闲时间从事自己的项目。我克隆了这个[electron react样板文件][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上，第5行是

，它将我指向Tasks.tsx文件（如下所示）

任务.tsx（导出）

额外的参考页

主页.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>
  );
}

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


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

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

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

从“React”导入React；
从“../components/Home”导入Home；
导出默认函数主页（）{
返回；
}

CounterPage.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>
  );
}

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


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

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

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

从“React”导入React；
从“../features/Counter/Counter”导入计数器；
导出默认函数CounterPage（）{
返回；
}

它可以链接到：

由于您使用的是.ts和.tsx，您需要告诉它也使用resolve.extensions在您的网页配置中查找它们：

---

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

：JSX.Element

我的网页配置文件设置为通过resolve.extensions读取.ts和.tsx文件。另外，尝试在TasksPage（）之后添加：JSX.Element也没有用；找出返回的对象是什么，它只是返回一个空对象。考虑到它应该作为JSX元素导出，仍然不知道它为什么返回一个对象或者为什么它是空的。