Search code examples
javascriptreactjsfrontendreact-static

addPrefetchExcludes - TypeError: Object(...) is not a function

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:

enter image description here

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"
  }
Solution

  • react-static v6.x doesn't support addPrefetchExcludes yet. Upgrade to v7.x would fix this issue.

    npm install --save react-static@latest

    You can verify that the function didn't exist in here: