How to add coreJS3 to pcf react to support browsers like IE11

(0) Share

Report

Posted on by rexkenley

203

I noticed that if you use es6 features like promises in pcf react, IE 11 will error.

https://kangax.github.io/compat-table/es6/#ie11

How do you add "polyfills" like coreJS3 into a pcf react component? It would be ideal if we can use the babel-preset-env & babel-plugin-transform-runtime to do this.

Thanks!

All responses (11)

Answers (0)

rexkenley 203 on at

Like (0)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

@ScottDurow @GregHurlmanMSFT

Shouldn't this be a part of the standard package since this is how Babel 7 will support browsers? The old "polyfill" is a Babel 6 recommendation.

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):
https://babeljs.io/docs/en/babel-polyfill

Helpers + polyfilling from core-js
So if you need core-js support with transform-runtime, you would now pass the corejs option and use the @babel/runtime-corejs2 dependency instead of @babel/runtime.
https://babeljs.io/docs/en/v7-migration
https://github.com/babel/babel/pull/8266

Ps.
Thanks for info about submitting ideas.
https://powerusers.microsoft.com/t5/PowerApps-Ideas/Use-the-new-Babel-7-babel-plugin-transform-runtime-amp-coreJS3/idi-p/390939#M28199
Greg Hurlman (MSFT) on at

Like (2)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

@ScottDurow It seems like there should be some way to hook in while putting that customization in the project file structure (and therefore source control), avoiding having to modify the files sitting in $/node_modules/*. I will make sure the CLI team gets the community feedback around this, but if it can be put into that Idea post, it would make that easier.
ScottDurow 1,039 on at

Like (0)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

I don't know if 'extending' the webpack scripts is ever going to be a feasible solution?
Perhaps an eject similar to create-react-app? Thoughts @GregHurlmanMSFT
Greg Hurlman (MSFT) on at

Like (2)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

@rexkenley @ScottDurow If you would like official support for modifying the webpack config, please make sure to upvote this PowerApps Idea, leave your comments why you want it, and see if you can get others to do the same.
ScottDurow 1,039 on at

Like (1)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

@rexkenley btw - I very much approve of your Ramen themed cases 🍜😋
ScottDurow 1,039 on at

Like (1)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

Cool beans.
Do bare in mind that if you use your own webpack config then you are essentially outside of support regarding the PCF CLI - any changes that Microsoft team make you optimising the config you won't benefit from.
rexkenley 203 on at

Like (1)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

@ScottDurow

Thanks for pointing me in the right direction Scott. I went ahead and change the webpack config to use my standard preset-env configuration.

        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    targets: {
                      chrome: "70",
                      firefox: "63",
                      edge: "17",
                      ie: "11"
                    }
                  }
                ],
                "@babel/preset-react"
              ],
              plugins: [
                "@babel/plugin-syntax-dynamic-import",
                ["@babel/plugin-transform-runtime", { corejs: 3 }] // non global polyfills
              ]
            }
          }
        }

Result

I think by adding corejs3 and @babel/plugin-transform-runtime, PCF react would have better support for ie11. The other benefit of this is that you don't have to add "polyfill" in your code, babel will handle that for you (although I am not sure if you have to specify the browser target to make the entire thing work).

const babelPlugins = [
  [require.resolve("@babel/plugin-proposal-decorators"), { legacy: true }],
  require.resolve("@babel/plugin-proposal-class-properties"),
  require.resolve("@babel/plugin-proposal-object-rest-spread"),
  require.resolve("@babel/plugin-syntax-dynamic-import"),
  [require.resolve("@babel/plugin-transform-runtime"), { corejs: 3 }]
];
ScottDurow 1,039 on at

Like (2)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

Hi @rexkenley
The UCI already has the bluebird promise polyfill so it's unlikely to be that.

It's more likely to be something like Object.assign.
Just to be sure - can you try adding the babel polyfill
https://babeljs.io/docs/en/babel-polyfill/

You can require/import it at the top of the index.js/ts PCF entry point.

Also - check that there are no imports that you are using that have non-transpiled ES6 features.
rexkenley 203 on at

Like (0)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

@GregHurlmanMSFT

Is there a way to set the wepback mode to development and devtool inline-source-map so I can debug it in IE11?
rexkenley 203 on at

Like (1)

Report

Re: How to add coreJS3 to pcf react to support browsers like IE11

@GregHurlmanMSFT

Thanks for the reply. I created a simple pcf-react project that works fine in chrome, but errors in IE11. I could be wrong with my assumption that it is a missing es6 polyfill issue.

Both browsers are running v9 Unified.
Chrome on left, ie11 on right
You can find the source code at
https://github.com/rexkenley/CrmUG2019

Thanks for taking a look at this.