Added babel and react development dependencies to solve IE11 issues in yoast components.

hansjovis commented 5 years ago

Summary

This PR can be summarized in the following changelog entry:

[not-user-facing] Adds some extra development dependencies to make the yoast-components example work in IE11 again.

Relevant technical choices:

Test instructions

This PR can be tested by following these steps:

Clone the yoast-components repository and yarn link it to yoastseo.js, if you have not already done so in the past.
Checkout this branch in yoastseo.js and run yarn to make sure that the new dev dependencies are installed.
In the yoast-components root folder, run yarn to make sure everything is updated.
In yoast-components run yarn start to start the example.
Start IE11 (e.g. on a Windows 7 Virtual Machine). Make sure that the IE11 dev tools are opened (this is a pre-existing issue in IE11).
Go to localhost:3333 inside IE11 to go to the example.
- (Go to http://10.0.2.2:3333 if you are using a VM instead).
Check to see if the example starts and works as expected.
Start Chrome (on Mac or Windows).
Go to localhost:3333.
Check if the example keeps working in Chrome as well.

Fixes #2086

afercia commented 5 years ago

Tested on native Windows 10, IE 11

yoast-components work for me (still have to open the dev tools, but this is a pre-existing issue)
the YoastSEO.js webpack example (http://localhost:3000) does not work. If we want it to work in IE 11, I guess we should do as in the yoast-components: either set babel-polyfill in the webpack config or at the top of the file equivalent to render.js. Or both? Not sure.

afercia commented 5 years ago

Just added babel-polyfill in the webpack config dev entry array and it works in IE11. At this point I guess the previous polyfills from ./polyfills maybe can be removed?

hansjovis commented 5 years ago

Just added babel-polyfill in the webpack config dev entry array and it works in IE11. At this point I guess the previous polyfills from ./polyfills maybe can be removed?

Adding babel-polyfill to the webpack.config.dev.js file of the webpack example does indeed fix the example. I added it to the code in the latest commit. I think you are right that polyfills.js can be removed from the entry array, since babel-polyfill introduces them by default. I will remove it.

igorschoester commented 5 years ago

Closing in favor of https://github.com/Yoast/yoast-components/pull/820

Yoast / YoastSEO.js