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

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

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
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Users online (4,946)