React.createElement：类型无效 - Electron-React-Boilerplate

Question

I'm a designer who's trying to pick up some coding so I can work on my own projects in my free time. I cloned this [electron-react-boilerplate][1] to get started and am starting with the navigation UI just to get the ball rolling.

Error

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)

On TasksPage.tsx, the 5th line is <Tasks /> , which points me to the Tasks.tsx file (shown below).

Tasks.tsx (export)

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)

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"
}

Extra Pages for reference

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 />;
}

Answer 1

It could be linked to that : https://stackoverflow.com/a/48272291/9201061

Since you're using .ts and .tsx, you need to tell it to look for those too in your Webpack config using resolve.extensions:

Edit: : Maybe you should add : JSX.Element after TasksPage()