I need to use addPrefetchExcludes to register a dynamic route at runtime.
It needs to be placed before the the app code addPrefetchExcludes Docs
But i'm getting this error:
I'm have that line before the declaration of the App function
addPrefetchExcludes(["/checkout"])
If i remove that function from my App.js the routes will be generated normally, so i don't think that the reason of the error should be related to the routes configuration.
App.js code
import React, { Fragment } from 'react'
import { Root, Routes, addPrefetchExcludes } from 'react-static'
import { Switch, Route } from 'react-router-dom'
import { Provider } from 'react-redux'
import store from './reduxStore'
import ExtractMediaCode from './hocs/ExtractMediaCode'
import ScrollWrapper from './hocs/ScrollWrapper'
import isClient from './utils/isClient'
import Footer from './layout/Footer'
import Header from './layout/Header'
import AlternativeOffer from './fullpages/AlternativeOffer'
import ContactDealer from './fullpages/contactDealer/ContactDealer'
import PartnerThankYou from './fullpages/PartnerThankYou'
import ThankYou from './fullpages/ThankYou'
import CheckPlaceholderImages from './fullpages/CheckPlaceholderImages'
import DynamicRoutes from "../dynamic/routes/DynamicRoutes"
import './app.css'
if (isClient) {
require('./.modernizrrc.js')
// Initialize lazy load once
const LazyLoad = require('vanilla-lazyload')
const lazyLoadConfig = {
element_selector: '.lazy'
}
if (!document.lazyLoadInstance) {
document.lazyLoadInstance = new LazyLoad(lazyLoadConfig)
}
}
addPrefetchExcludes([
"/checkout"
])
const App = () => (
<Provider store={store}>
<Root disableScroller>
<ExtractMediaCode>
<ScrollWrapper>
<Fragment>
<Header />
<div className="main-content-wrapper">
<Switch>
<Route
path="/alternative-angebote/:shortId"
component={AlternativeOffer}
/>
<Route
exact
path="/:brandPage/angebote/:offerSlug/haendler-kontaktieren"
component={ContactDealer}
/>
<Route
exact
path="/:brandPage/angebote/:offerSlug/danke"
component={ThankYou}
/>
<Route
exact
path="/partner-werden/danke"
component={PartnerThankYou}
/>
<Route
exact
path="/scripts/check-placeholder-images/:brand"
component={CheckPlaceholderImages}
/>
<DynamicRoutes />
<Routes />
</Switch>
</div>
<Footer />
</Fragment>
</ScrollWrapper>
</ExtractMediaCode>
</Root>
</Provider>
)
export default App
Dependencies
"dependencies": {
"@brainhubeu/react-carousel": "^1.10.17",
"axios": "^0.18.0",
"formik": "^1.3.1",
"global": "^4.3.2",
"js-cookie": "^2.2.0",
"jump.js": "^1.0.2",
"patch-package": "^6.0.7",
"postinstall-postinstall": "^2.0.0",
"prop-types": "^15.6.2",
"ramda": "^0.26.1",
"rc-collapse": "^1.11.1",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-hot-loader": "^4.7.1",
"react-image-gallery": "^0.8.12",
"react-loading": "^2.0.3",
"react-markdown": "^4.0.3",
"react-redux": "^5.1.0",
"react-responsive-modal": "^3.5.1",
"react-router-dom": "^4.3.1",
"react-select": "^2.0.0",
"react-static": "6.3.6",
"recompose": "^0.30.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"slugify": "^1.3.4",
"vanilla-lazyload": "^11.0.3",
"yup": "^0.26.6"
},
"devDependencies": {
"@babel/node": "^7.2.2",
"autoprefixer": "^9.4.2",
"babel-polyfill": "^6.26.0",
"eslint-config-react-tools": "1.x.x",
"extract-css-chunks-webpack-plugin": "^3.3.2",
"glob-all": "^3.1.0",
"imagemin": "^6.1.0",
"imagemin-webp": "^5.0.0",
"postcss-flexbugs-fixes": "^4.1.0",
"postcss-import": "^12.0.1",
"purgecss-webpack-plugin": "^1.4.0",
"react-static-plugin-react-router": "^6.3.4",
"rimraf": "^2.6.3",
"serve": "^10.1.1",
"tailwindcss": "^0.7.2",
"webpack": "4.28.4",
"webpack-modernizr-loader": "^4.0.1"
}