Meteorjs Integration with ChakraUI + React Router

Question

TLDR, I got an error when integrating between those 3. But when I use Meteor with ChakraUI, it works nicely. But when I add react router, it throw this error

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

So in Meteor, I wrap the app in client/main.jsx with the ChakraUI provider and Browser Router. Chakra need to wrap the app in their provider base on their docs.

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { App } from '/imports/ui/App';
import { ChakraProvider } from "@chakra-ui/react"
import { ColorModeScript } from "@chakra-ui/react"
import { BrowserRouter  } from 'react-router-dom'

Meteor.startup(() => {
  render(
  <ChakraProvider>
    <ColorModeScript initialColorMode={'dark'} />
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </ChakraProvider>,
    document.getElementById('react-target'));
});

Then in imports/ui/App.jsx I put react route switch to render the page. Before that, I put Home.jsx code inside it.

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import {Home} from './pages/Home'


export default function App() {
  return (
    <>
      <div>
        <Switch>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </>
  );
}

So is there any wrong way in my code to "wrap" the apps?

Thank you

codingforworlddomination codingforworlddomination · Accepted Answer · 2021-02-27T14:26:08

A couple of things to check:

in App.jsx you export App as default, so you should import it in main.jsx without curly braces
you import App.jsx from /imports/ui/App but you write that it's located in imports/App.jsx-> make sure the import is correct, that could be the problem here
not sure why you import BrowserRouter as Router in App.jsx, don't think this should lead to your error (because it's not used in the code snippet you post) - but just to be sure, it shouldn't be used anywhere else in App.jsx if it's already in main.jsx

EDIT: what solved it was the above, mainly number 1, plus another wrong import in App.jsx of the same sort (exported as default but imported destructuring style)

Meteorjs Integration with ChakraUI + React Router

1 Answers