-1

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 />;
}
Blksheep93
  • 47
  • 1
  • 5
  • Figured out I could use JSON.stringify(Tasks); to figure out what the object was that was being returned and it's just returning an empty object. Still no idea why its returning an object or why it's empty considering it should be exporting as a JSX element. – Blksheep93 Nov 15 '20 at 15:15

1 Answers1

0

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()

Aaron_Actu
  • 112
  • 8
  • My webpack config file is set to read the .ts and the .tsx files via resolve.extensions. Also, tried adding the : JSX.Element after TasksPage() to no avail. – Blksheep93 Nov 13 '20 at 23:09