Skip to main content

Notifications

Power Apps - Power Apps Pro Dev & ISV
Unanswered

Extending the pcf-scripts' webpack

(0) ShareShare
ReportReport
Posted on by 5

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

  • Suggested answer
    CU19111853-0 Profile Picture
    CU19111853-0 2 on at
    Extending the pcf-scripts' webpack
    For those looking to do this it is possible, at least of pcf-scripts version 1.27.5. These are the changes you need to make to your PCF project:
     
    1. In the project root, add a file named 'featureconfig.json'. This is used to override the feature flags used by pcf-scripts. Turn on the use of a custom webpack like this:
       
      {
      "pcfAllowCustomWebpack": "on"
      }
    2. Now you can add a custom webpack.config.js in your project root. The contents of this file are merged with the default pcf-scripts webpack configuration e.g.

       
      const path = require("path");
       
      module.exports = {
      resolve: {
      alias: {
      react: path.resolve("./node_modules/react"),
      "react-dom": path.resolve("./node_modules/react-dom")
      }
      }
      };
  • jbouvier1 Profile Picture
    jbouvier1 2 on at
    Re: Extending the pcf-scripts' webpack

    There is no solution to add a full directory of assets ? - I need to embed a js library as a whole plus all different assets files and mime-types (not only css/code but also wasm file and the like).

    Then I need to change another config in the webpack that would prevent me to rewrite huge code base libraries - i.e. resolve configuration when javascript import doesn't include the extension '.js' - so yes it would be great if we could override some properties from that webpack configuration.

     

    So your solution in updating the node_module file is not ideal - I would simply have a local copy in the project - that might desync with the new library versions - but at least that could be commited with the project and kept if we reinstall the node modules. At build time 0 simply add a copy command in the specified node module - before compilation.

    A bit hacky to be able to use the solution.

  • MichaelFP Profile Picture
    MichaelFP 1,571 on at
    Re: Extending the pcf-scripts' webpack

    I create a loader to do this. I have done for SSAS and python files.  Editing the webpackconfig js you will be able to do this.

    Please read my blog post that I had published in the community, maybe it help you.

  • rexkenley Profile Picture
    rexkenley 203 on at
    Re: Extending the pcf-scripts' webpack

    @aboodhamwi 

     

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

  • aboodhamwi Profile Picture
    aboodhamwi 79 on at
    Re: Extending the pcf-scripts' webpack

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

  • rexkenley Profile Picture
    rexkenley 203 on at
    Re: Extending the pcf-scripts' webpack

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

  • aboodhamwi Profile Picture
    aboodhamwi 79 on at
    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

  • Diana Birkelbach Profile Picture
    Diana Birkelbach 3,072 on at
    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

  • aboodhamwi Profile Picture
    aboodhamwi 79 on at
    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

  • Andre Margono Profile Picture
    Andre Margono 5 on at
    Re: Extending the pcf-scripts' webpack
    Looking forward when this shared library can be implemented.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,580

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,909

Leaderboard