I am following along a Lynda.com tutorial called "Building and Deploying a Full-Stack React Application", and in the chapter "Injecting the Relay Network Layer" there is in index.js, an attempt to set up a network layer, and the program compiles successfully but I'm receiving the following error in the browser:
TypeError: __WEBPACK_IMPORTED_MODULE_4_react_relay___default.a.injectNetworkLayer is not a function
Any ideas? I'd appreciate it, CM
(My index.js file)
import React from 'react'
import ReactDOM from 'react-dom'
import {Router, browserHistory, applyRouterMiddleware} from 'react-router'
import Routes from './routes'
import Relay from 'react-relay'
import useRelay from 'react-router-relay'
import {RelayNetworkLayer, urlMiddleware} from 'react-relay-network-layer'
import {relayApi} from './config/endpoints'
import auth from './utils/auth'
const createHeaders = () => {
let idToken = auth.getToken()
if (idToken) {
return {
'Authorization': `Bearer ${idToken}`
}
} else {
return {}
}
}
Relay.injectNetworkLayer(
new RelayNetworkLayer([
urlMiddleware({url: (req) => relayApi,}),
next => req => {
req.headers = {
...req.headers,
...createHeaders()
}
return next(req)
},
],{disableBatchQuery: true})
)
ReactDOM.render(
<Router
environment={Relay.Store}
render={applyRouterMiddleware(useRelay)}
history={browserHistory}
routes={Routes}
/>,
document.getElementById('root')
)
You are probably not using the right version of Relay, but its just a guess. Check if the tutorial specifies any version and check which one you are using.
A lot of things changed in the last version of Relay: Relay-Modern. You might want to look into that, its way more convenient and efficient than Relay-Classic.
Also there are easier ways to combine a router with relay. Create your Relay Environment directly above or below your router, depending on if you need to get routes out of your db. But I guess you just need to get through the tutorial.