React-starter-kit: Breaks on Internet Explorer 11 on Windows 7 & Firefox 44.0.2 on Ubuntu 14.0.4

Created on 25 Jan 2017  路  6Comments  路  Source: kriasoft/react-starter-kit

Master branch breaks on Windows 7 (IE) & Ubuntu (Firefox ) machines. I used yarn to install and start the server.

Windows 7:
Internet Explorer - 11
Error: Objects are not valid as a React Child (found: object with keys{$$typeof, type, ref, props, _owner, _store}).
issue screenshot

Ubuntu 14.0.4:
Firefox 44.0.2 but works fine 48(Tried in a different Ubuntu 14.0.4)
screenshot_from_firefox

Any help would be really appreciated.

Most helpful comment

Remove import 'babel-polyfill'; from src/client.js and src/server.js
and add it to tools/webpack.config.js like so:

// ...
  entry: {
    client: ['babel-polyfill', './src/client.js'],
  },
// ...
  entry: {
    server: ['babel-polyfill', './src/server.js'],
  },
// ...

All 6 comments

Can't provide much feedback without a snippet of the code it's failing on unfortunately.

I think the problem is that polyfils are executed too late. This should be fixed in master branch.

@frenzzy , I am still trying to fix it but no luck. It would be really great if you could help me out. Thanks in advance.

Remove import 'babel-polyfill'; from src/client.js and src/server.js
and add it to tools/webpack.config.js like so:

// ...
  entry: {
    client: ['babel-polyfill', './src/client.js'],
  },
// ...
  entry: {
    server: ['babel-polyfill', './src/server.js'],
  },
// ...

I think the problem is with react-optimize, as commenting that out also fixes it, but inserting the babel-polyfill before it fixes it.

Add 'babel-polyfill', in tools/webpack.config.js on line 61, before 'stage-2', and it now seems to work in IE11. I wasn't even getting an error in IE11, it just kept hard crashing.

@frenzzy & @adamantium169 , thank you for your solution. Just cloned the main branch and and followed @adamantium169's solution. Now it works fine on Internet Explorer 11 but I am still having the same issue on Firefox 44.0.2 on Ubuntu 14.0.4. Here I am copying the errors from Console

GET
https://reactjsnews.com/img/playing-with-react-and-d3/basic_render.png [HTTP/2.0 403 Forbidden 224ms]
GET
https://reactjsnews.com/img/playing-with-react-and-d3/plot_points.png [HTTP/2.0 403 Forbidden 223ms]
GET
https://reactjsnews.com/img/playing-with-react-and-d3/complete_chart.png [HTTP/2.0 403 Forbidden 279ms]
GET
https://reactjsnews.com/img/10x-react-performance/performance-benchmark-2.png [HTTP/2.0 403 Forbidden 280ms]
"Download the React DevTools for a better development experience: https://fb.me/react-devtools" vendor.js:29517:9
Warning: Failed prop type: The prop children is marked as required in App, but its value is undefined.
in App (at client.js:124) vendor.js:936:9

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client)