History has been removed from the last major version of react router and it has to be imported separately.
I do not think the problem is history, again the same error
async function main () {
const [
React,
ReactDOM ,
{ BrowserRouter },
{ HelmetProvider },
Routes,
{ createBrowserHistory }
] = await Promise.all([
import('react'),
import('react-dom'),
import('react-router-dom'),
import('react-helmet-async'),
import('../../Routes/Routes'),
import('history')
]);
// const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
const helmetContext = {}
const history = createBrowserHistory();
ReactDOM.render(
<HelmetProvider context={helmetContext}>
<BrowserRouter history={history}>
<Routes history={history} />
</BrowserRouter>
</HelmetProvider>
, document.getElementById('App'));
}
main();
Check what you exactly export in ../../Routes/Routes
. Is that a default or a named export? That part goes wrong.
i think you need to use the default
property on the Promise from import(..)
when using the default export:
const { default: Routes} = await import('../../Routes/Routes')
@macrozone @peterfkruger
I exported by default, and it should have been just that.
But I do not know what the problem is, it was fixed with this code:
const { default: Routes} = await import('../../Routes/Routes')
Please share thoughts on this and would be great if we can have some kind of tutorial regarding prerendering since we don’t know how this can be implemented for our use
await import("...")
returns an object with all exports.
If your module would be:
export const a = "named export a"
export const b = "named export b"
export default {
a: "default a",
b: "default b"
}
it obvious that importing that with import(...)
cannot directly return the default export:
const thing = await import("./path/to/the/file/above")
thing.a // is that "named export a" or "default a" ?
i guess most would expect it to be “named export a” and thats indeed the case, therefore the default export has to be somewhere else:
thing.default.a // its "default a"