Relay's Inject Network Layer Not Being Recognized as a Function in a React App

Question

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')
)

joeydebreuk · Accepted Answer · 2017-08-15 22:56:12Z

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.

answered Aug 15, 2017 at 22:56

joeydebreuk

3842 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Mazzochi Over a year ago

Thanks for responding joeydebreuk. I installed the version of Relay that was used for the tutorial and the problem persists unfortunately...

Chris Mazzochi Over a year ago

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.

Jay Over a year ago

react-relay allows backwards compatibility from classic to modern 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.

Collectives™ on Stack Overflow

Relay's Inject Network Layer Not Being Recognized as a Function in a React App

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related