cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate V
Advocate V

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

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! 

11 REPLIES 11
Highlighted
Power Apps
Power Apps

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

@rexkenley - Polyfills for ES6 features that can't be transpiled down to ES5 should already be part of the hosting app platform, either model-driven or canvas PowerApps. For ES6 features that can be transpiled down to ES5, that should already be part of the out-of-the-box tooling build experience, as the base tsconfig file specifies a target of ES5 while allowing use of the ES6 syntax at development time.

Are you running into issues, or just trying to be proactive in understanding before getting started?

Highlighted
Advocate V
Advocate V

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 rightChrome on left, ie11 on right

You can find the source code at 

https://github.com/rexkenley/CrmUG2019

 

Thanks for taking a look at this.

Highlighted
Advocate V
Advocate V

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?

Highlighted

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.

 

Highlighted
Advocate V
Advocate V

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", { corejs3 }] // non global polyfills
              ]
            }
          }
        }

 

Result

Annotation 2019-10-25 131302.png

 

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"), { legacytrue }],
  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}] 
];
Highlighted

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.

Highlighted

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

@rexkenley  btw - I very much approve of your Ramen themed cases 🍜😋

Highlighted
Power Apps
Power Apps

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.

Highlighted

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 

Helpful resources

Announcements
Check this Out

Helpful information

Featuring samples like Return to the Workplace and Emergency Response Applications

August 2020 Community Challenge: Can You Solve These?

August 2020 Community Challenge: Can You Solve These?

We're excited to announce our first cross-community 'Can You Solve These?' challenge!

secondImage

Return to Workplace

Reopen responsibly, monitor intelligently, and protect continuously with solutions for a safer work environment.

secondImage

Super Users Coming in August

We are excited for the next Super User season.

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (6,138)