cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AndreMargono
Advocate I
Advocate I

Extending the pcf-scripts' webpack

Hi, 

Is there a way to extend the standard PCF CLI's webpack? In one of the project, I want to use webpack to include additional files to be copied to the build (out) folder.

 

TIA

Andre

11 REPLIES 11

There isn't any kind of eject mechansim - but you can edit the webpackconfig in the node_modules/pcf-scripts/webpackconfig.js

 

This is technically unsupported and be careful that you don't loose your edits if you restore the npm packages.

 

I think if you start changing the webpack then you are essentially going to go it alone and will need to manually pack your controls going forwards. 

 

What is it that you want to change in the webpack config? You should use the  <resources> in the control manifest to add additional html/css/images/js/resx

 

 

@ScottDurow is there a way now to include js files? It was possible in earlier versions but it's not possible now or you know something that I don't know.

We had lib tag for including libraries in manifest during private preview but it was removed due to potential conflict and upgrade issues across components from multiple sources.

Currently supported mechanism is to include shared js via import directly into control index.ts. see example here - https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/angular-fli...

We are looking into getting webpack enabled shared libs for future release so that code can be shared across controls.

Hemant

Looking forward when this shared library can be implemented.

@ScottDurow @HemantG 

I'm trying to use React FullCalendar control in my PCF, the problem is, it has some CSS files inside the node_modules, I'm getting the error that webpack cannot load those files, any suggestion for the best approach with them, should I add the path of the CSS file inside the node_module in the manifest file, or I should edit the webpack configuration to add CS

Hi @aboodhamwi ,

 

I've used react-big-calendar, and had the same problem.

I've added the css from inside the node_modules in my manifest, and worked like a charm.

Even if the PCF-packing doesn't make problems, I'm not sure if it works for every 3rd party control, because actually the namespace prefix inside this css files is missing, but in my case worked without issues.

 

Kind regards,

Diana

Hi @DianaBirkelbach 

 

Thanks for referring to this library, for FullCalendar, I tried to add the CSS to the manifest and it didn't work, but with react-big-calendar it did work

 

Thanks

Have you tried modifying the pcf webpack config and adding css-loaders in your project?

@rexkenley I tried to do it, but it did fail.

Helpful resources

Announcements
User Groups Public Preview

Join us for our User Group Public Preview!

Power Apps User Groups are coming! Make sure you’re among the first to know when user groups go live for public preview.

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Users online (43,117)