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
A couple of things to check:
/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 hereBrowserRouter 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.jsxEDIT: 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)