1

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')
)
Chris
  • 57,622
  • 19
  • 111
  • 137
Chris Mazzochi
  • 179
  • 1
  • 15

1 Answers1

1

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.

joeydebreuk
  • 376
  • 2
  • 8
  • Thanks for responding joeydebreuk. I installed the version of Relay that was used for the tutorial and the problem persists unfortunately... – Chris Mazzochi Aug 15 '17 at 23:03
  • Actually, I only matched 'react-relay-network-layer' to the version that was used. When I installed 'react-relay' at the version that was used, I was able to get past the error. Thanks a lot. – Chris Mazzochi Aug 15 '17 at 23:11
  • 1
    react-relay allows backwards compatibility from classic to [modern](https://facebook.github.io/relay/docs/relay-modern.html) just by changing how you reference the import statement. I watched the same tutorial myself and found that in the `react-relay` module, there are 3 files: `classic.js`, `compat.js` and `classic.js`. For the purpose of the tutorial, I decided to use `import Relay from 'react-relay/classic'` everywhere `react-relay` was referenced just to make it easier. I think this would be a better way, since later you could just refactor individual components to use React Modern. – Jay Nov 26 '17 at 04:18