Error walking you react tree

[renatonmendes]

For some reason I´m getting the "Error walking your react tree" message as follows:

Error walking your react tree

Error walking your react tree
{ Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
    at invariant (D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\invariant\invariant.js:42:15)
    at invariantIntlContext (D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\react-intl\lib\index.js:356:5)
    at new FormattedMessage (D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\react-intl\lib\index.js:1406:9)
    at D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\react-tree-walker\commonjs\index.js:132:24
    at reactTreeWalker (D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\react-tree-walker\commonjs\index.js:71:10)
    at mapper (D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\react-tree-walker\commonjs\index.js:89:29)
    at D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\react-tree-walker\commonjs\index.js:53:28
    at D:\9. DEV\WORKSPACE\mz-boilerplate-intl\node_modules\react-tree-walker\commonjs\index.js:39:14 name: 'Invariant Violation', framesToPop: 1 }
==> SERVER -> Error in server execution, check the console for more info.
(node:11228) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

I´m using server side rendering with react-intl, that calls the react-tree-walker package. My code:

`/* eslint-disable global-require */

import React from 'react';
import { render } from 'react-dom';
import { AsyncComponentProvider } from 'react-async-component';
import { AppContainer } from 'react-hot-loader';

import { IntlProvider, addLocaleData } from 'react-intl';
import en from 'react-intl/locale-data/en';
import pt from 'react-intl/locale-data/pt';
import es from 'react-intl/locale-data/es';

import './polyfills';

import ReactHotLoader from './components/ReactHotLoader';
import DemoApp from '../shared/components/DemoApp';

import localeData from '../../intl/messages.json';

const container = document.querySelector('#app');

addLocaleData([...en,...pt,...es]);

const language = (navigator.languages && navigator.languages[0]) ||
                  navigator.language ||
                  navigator.userLanguage;

const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];

const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.en;

function renderApp(TheApp) {
  const app = (
      <IntlProvider locale={language} messages={messages}>
            <TheApp />
      </IntlProvider>
  );

  asyncBootstrapper(app).then(() => render(app, container));
}

renderApp(DemoApp);

if (process.env.BUILD_FLAG_IS_DEV === 'true' && module.hot) {
  module.hot.accept('./index.js');
  module.hot.accept('../shared/components/DemoApp', () => {
    renderApp(require('../shared/components/DemoApp').default);
  });
}

MyDemo component:

import 'normalize.css/normalize.css';

import React from 'react';

import { FormattedMessage } from 'react-intl';

function DemoApp() {
  return (
    <div>
      <h1>This is a test</h1>
      <FormattedMessage id={'Header.Title'} defaultText={'This is a header test title'} />
    </div>
  );
}

export default DemoApp;

Any ideas why the tree is not finding the IntlProvider component ? Thanks for helping.

[aarondancer]

Getting this error as well, but only when replacing React with Preact. Though, everything afaik still works.

[ctrlplusb]

Hmmm, it seems that context may not be getting passed down correctly (at first parse). Happy to look at any sort of minimal example repo if you could muster one?

@aarondancer - yeah, preact would always be considered a "risky" switch IMO. I haven't done enough consideration within this library to make any guarantees there.

[dlebedynskyi]

This Error is similar to what I have in #15. This happens both uglify and dev build.
@ctrlplusb any change that could cause it?
react-async-component depends on this project and this error becomes a blocker for us.

[ctrlplusb]

Seems like context issues. I'll have to add some more robust testing scenarios to cover various usage of the react context APIs.

[ctrlplusb]

Note: v3 requires you to catch errors thrown by reactTreeWalker. This will give you a better handle into call stack etc and hopefully will aid our debugging process.

[ctrlplusb]

Preact is natively supported now as well as better context passing. All in v4 👍