react-async-bootstrapper icon indicating copy to clipboard operation
react-async-bootstrapper copied to clipboard

Bootstrap not passing proper context on SSR

Open jcampalo opened this issue 6 years ago • 5 comments

With the latest react version I'm unable to make this library work, for some reason react-tree-walker is not able to keep the context of the provider.

I was able to reproduce the error inside the asyncBootstrapper.test.js:

` import React, { Component } from 'react' import asyncBootstrapper from '../'

const ThemeContext = React.createContext('light')

describe('asyncBootstrapper()', () => { let values = [] let actualContext let contextValue

class DeprecatedAPI extends Component { asyncBootstrap() { values.push(this.props.id) return true }

render() {
  return <div>{this.props.children}</div>
}

}

class NewAPI extends Component { bootstrap() { values.push(this.props.id) actualContext = this.context return true }

render() {
  return <div>{this.props.children}</div>
}

}

const app = Foo => ( <ThemeContext.Provider value='dark'> <Foo id={1}>

Test

<Foo id={2}> <Foo id={4} /> <ThemeContext.Consumer> {value => { contextValue = value return value }} </ThemeContext.Consumer> </Foo> <Foo id={3} /> </Foo> </ThemeContext.Provider> )

beforeEach(() => { values = [] })

it('deprecated API', () => asyncBootstrapper(app(DeprecatedAPI)).then(() => expect(values).toEqual([1, 2, 4, 3]), ))

it('new API', () => asyncBootstrapper(app(NewAPI), null, { bespokeContext: true }).then(() => { expect(values).toEqual([1, 2, 4, 3]) expect(actualContext).toEqual({ bespokeContext: true, reactAsyncBootstrapperRunning: true, }) expect(contextValue).toEqual('dark') })) }) `

Updating the react version to 16.6.3 you should be able to reproduce the error.

jcampalo avatar Nov 28 '18 11:11 jcampalo

Same bug, but encountered it with connected to redux component - it fails with error of missing store in context.

NikitaRzm avatar Dec 28 '18 06:12 NikitaRzm

Same here but with react-helmet-async.

@NikitaRzm @jcampalo Did you find any solutions or did you revert to an older version?

@ctrlplusb Any ideas on what might be going on here?

oyeanuj avatar Dec 29 '18 00:12 oyeanuj

Well, i found, that issue possibly is https://github.com/ctrlplusb/react-tree-walker/issues/40 (in react-walk-tree), with context. People waits for new release, fixes already applied, but package does not published yet in new version.

Seems we need to wait or solve problems of bootstrapping in other way :)

NikitaRzm avatar Dec 29 '18 03:12 NikitaRzm

@oyeanuj Yes, I'm still using 16.5.x version of React. As @NikitaRzm is related to the issue with react-tree-walker.

jcampalo avatar Dec 30 '18 22:12 jcampalo

I created a temporary fork that will allow you to use the latest commit. I have very little time, so please don't expect any support, but it should get you past the hurdles, I think. Let me know if this works.

Install in your package.json dependencies as such: "react-async-bootstrapper": "git+https://github.com/mschipperheyn/react-async-bootstrapper.git#581e3fd",

mschipperheyn avatar Jan 23 '19 17:01 mschipperheyn