Unanswered

Extending the pcf-scripts' webpack

(0) Share

Report

Posted on by Andre Margono

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

Categories:

Application Lifecycle Management (ALM)

I have the same question (0)

All responses (13)

Answers (0)

ScottDurow 1,039 on at

Like (0)

Report

Re: Extending the pcf-scripts' webpack

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

Was this reply helpful? Yes No
a33ik 3,304 Most Valuable Professional on at

Like (1)

Report

Re: Extending the pcf-scripts' webpack

@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.

Was this reply helpful? Yes No
Hemant Gaur on at

Like (5)

Report

Re: Extending the pcf-scripts' webpack

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-flip-control

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

Hemant

Was this reply helpful? Yes No
Andre Margono 5 on at

Like (1)

Report

Re: Extending the pcf-scripts' webpack

Looking forward when this shared library can be implemented.

Was this reply helpful? Yes No
aboodhamwi 79 on at

Like (0)

Report

Re: Extending the pcf-scripts' webpack

@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

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (2)

Report

Re: Extending the pcf-scripts' webpack

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

Was this reply helpful? Yes No
aboodhamwi 79 on at

Like (0)

Report

Re: Extending the pcf-scripts' webpack

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

Was this reply helpful? Yes No
rexkenley 203 on at

Like (0)

Report

Re: Extending the pcf-scripts' webpack

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

Was this reply helpful? Yes No
aboodhamwi 79 on at

Like (0)

Report

Re: Extending the pcf-scripts' webpack

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

Was this reply helpful? Yes No
rexkenley 203 on at

Like (0)

Report

Re: Extending the pcf-scripts' webpack

@aboodhamwi

Can you post your code on github so I can take a look at it?

Was this reply helpful? Yes No