React production build differs from development | polyfill does not run

Question

I've run npx create-react-app . and imported clip-path manually. Development build works without a problem, but the production one doesn't seem to work. Issue is the same on IE11 and Edge44

Steps to reproduce:

1. npx create-react-app .
2. add "ie 11" to browserslist in package.json for prod and dev
3. npm i react-app-polyfill
4. in index.js add import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';
5. Grab shapes-polyfill.js from css-shapes-polyfill and insert script in .index.html > head, and also add browser polyfill.

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src='shapes-polyfill.js'></script>

6. include <style> in index.html > head

<style>
#polygon-shape-outside {
  width: 200px;
  height: 200px;
  float: left;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'><polygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/></svg>");
  shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
}
</style>

7. Insert div in App

<div style={{
  width: 400,
  fontSize: 10,
  background: 'grey'
}}>
  <div id="polygon-shape-outside"></div>
  <p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.</p>
</div>

Answer 1

The image didn't show in IE because of IE is strict to SVG. You can refer to this Codepen Blog for details and here are the points:

• Most browsers are lenient about the charset= string, but it's required for Internet Explorer. That means you need to use ;charset=utf8, instead of ;utf8,.
• You will have to percent-encode characters that aren't URL-safe. For example, <svg> to %3Csvg%3E. You can minimize the amount of percent encoding that needs to be done by using single quotes ' instead of double quotes ".

According to this, I changed some parts of your code in <style> of index.html:

#polygon-shape-outside {
    width: 200px;
    height: 200px;
    float: left;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200px' height='200px'%3E%3Cpolygon points='0,0 142,33 89,141 0,200' fill='rgba(0,0,255, 0.25)'/%3E%3C/svg%3E");
    shape-outside: polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px);
  }

Then it can run well in dev mode in all browsers.

About the difference between dev mode and prod mode: add data-shape-outside="polygon(0px 0px, 142px 33px, 89px 141px, 0px 200px)" in <div id="polygon-shape-outside">. Then the content will wrap around the image and the page runs well and exactly the same in both modes and in all browsers.