profile
viewpoint

Ask questionsReactDomServer - renderToString Failing with Context Provider on IE11

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug? Bug

What is the current behavior? I'm encountering an error in one of my components when running in IE11. First, I have a component that renders a Context.Provider:

class ProviderClass extends React.Component {
  constructor(props) {
    ...
    this.state = loadedState;
  }

 ...class functions...

  render() {
    return (
      <CustomContext.Provider value={this.state}>
        {this.props.children}
      </CustomContext.Provider>
    );
  }
}

A child within this provider consumes the context, and one of its functions calls renderToString. This function call is passed an additional provider:

class ConsumerClass extends React.Component {
  ...additional functions...

  interpolate(text, values) {
    let output = ReactDOMServer.renderToString(text);

    // Replace placeholders
    for (const placeholder in values) {
      // Render replacement
      const value = ReactDOMServer.renderToString(
        // !!!THIS SEEMS to be where the error happens.
        <ProviderClass>{values[placeholder]}</ProviderClass>
      );
      // Build regex
      const escapedPlaceholder = placeholder.replace(
        /([.*+?^=!:${}()|[\]/\\])/g,
        "\\$1"
      );
      const regex = new RegExp(`{{${escapedPlaceholder}}}`, "g");
      // Run replacement
      output = output.replace(regex, value);
    }
    return output;
  }

  render() {
    ...
    return this.interpolate(text, values);
  }
}
ConsumerClass.contextType = CustomContext;

In almost every browser, including Edge, this works without problems. However, in IE11, this first presents the following warning: Warning: Received an unexpected object in getComponentName(). This is likely a bug in React. Please file an issue. and then an error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

The object inside the renderToString function appears to have its render function called, as I can see console logs that I put into it. I suspect it's in the return that the problem occurs. I haven't been able to reproduce this in a simpler setup. So far, all I've been able to determine is that this is the object that is being passed to renderToString according to the IE11 console:

[object Object]
   {
      [functions]: ,
      $$typeof: 60103,
      __proto__: { },
      _owner: { },
      _self: { },
      _source: { },
      _store: { },
      key: null,
      props: { },
      ref: null,
      Symbol(react.concurrent_mode)_s.8lvg0ehagqo: undefined,
      Symbol(react.context)_r.8lvg0ehagqo: undefined,
      Symbol(react.forward_ref)_t.8lvg0ehagqo: undefined,
      Symbol(react.fragment)_n.8lvg0ehagqo: undefined,
      Symbol(react.lazy)_w.8lvg0ehah3o: undefined,
      Symbol(react.memo)_v.8lvg0ehagqo: undefined,
      Symbol(react.portal)_m.8lvg0ehagqo: undefined,
      Symbol(react.profiler)_p.8lvg0ehagqo: undefined,
      Symbol(react.provider)_q.8lvg0ehagqo: undefined,
      Symbol(react.strict_mode)_o.8lvg0ehagqo: undefined,
      Symbol(react.suspense)_u.8lvg0ehagqo: undefined
   }

And this is the object that is being returned by that object's render function (appears to be identical).

[object Object]
   {
      [functions]: ,
      $$typeof: 60103,
      __proto__: { },
      _owner: { },
      _self: { },
      _source: { },
      _store: { },
      key: null,
      props: { },
      ref: null,
      Symbol(react.concurrent_mode)_s.8lvg0ehagqo: undefined,
      Symbol(react.context)_r.8lvg0ehagqo: undefined,
      Symbol(react.forward_ref)_t.8lvg0ehagqo: undefined,
      Symbol(react.fragment)_n.8lvg0ehagqo: undefined,
      Symbol(react.lazy)_w.8lvg0ehah3o: undefined,
      Symbol(react.memo)_v.8lvg0ehagqo: undefined,
      Symbol(react.portal)_m.8lvg0ehagqo: undefined,
      Symbol(react.profiler)_p.8lvg0ehagqo: undefined,
      Symbol(react.provider)_q.8lvg0ehagqo: undefined,
      Symbol(react.strict_mode)_o.8lvg0ehagqo: undefined,
      Symbol(react.suspense)_u.8lvg0ehagqo: undefined,
      type: { }
   }

The only other thing I've been able to notice is that, based on console logs, the render function of ConsumerClass seems to be running twice - both times displaying the warning, followed by the error occurring twice at the end of the code run. This might just be some retry functionality built into IE11, as this double run only occurs in cases where the warning does (i.e. the for loop executes at least once).

facebook/react

Answer questions theaklair

@Adkaiser Could you please share your webpack config? I accidentally fixed that particular issue by replacing

entry: ['./polyfills', './app.tsx']

with

entry: {
  polyfills: './polyfills',
  app: './app.tsx'
}

"webpack": "^4.29.5" "webpack-dev-server": "^3.2.1"

useful!

Related questions

Disable react strict mode on third party libraries hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 2
Warning: Unknown DOM property for. Did you mean htmlFor? hot 2
React@16.9 block `javascript:void(0);` hot 2
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 1
TypeError: Object(...) is not a function hot 1
useEffect causes 'callback is not a function' exception hot 1
DevTools: Updating state or props in devtools does not trigger component update. hot 1
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component hot 1
eslint-plugin-react-hooks v2.0.0 is not loaded correctly. hot 1
Old references retained by memoizedProps in fiber hot 1
Stale values for useState inside callback functions hot 1
Keep getting `TypeError: Cannot read property 'scrollTop' of null` in a custom hook... hot 1
Route based code splitting, Loading chunk 0 failed after new deployment hot 1
map through connected component, get data of last saga call within all componenets hot 1
Github User Rank List