How & Where to initialize Bootstrap's Jquery in PCF Component

[optimisticdipak]

Hi All,

I am new to Powerapps and learning PCF now. I am trying to add the Popover component of Bootstrap to my PCF Component. I have installed Jquery, Bootstrap, PopperJs using npm and have imported them in my index.ts file like this:

import 'popper.js';

import * as $ from "jquery";

import * as Bootstrap from "bootstrap";

I am not getting where & how to initialize Bootstrap Jquery in PCF Component. Here, Initialization code means like this,

For Bootstrap Popover:-

$(function () {

$('[data-toggle="popover"]').popover()

})

For Bootstrap Tooltip:-

$(function () {

$('[data-toggle="tooltip"]').tooltip()

})

I have tried initializing it in the INIT method and there was no error also but that functionality was not coming over my control. I must be making mistake in the way I initialized it. Can someone help me with the steps to initialize Bootstrap's Jquery in the PCF component? or else, if there is any different approach to add Bootstrap popover/tooltips in the PCF component then that would also be fine...

Thank You in advance...

[a33ik]

Hello Dipak,

I used popover in my early days with PCF. You can find the example that worked 2 years ago here - https://github.com/AndrewButenko/CompositeAddress_PCF/blob/master/CompositeAddress/index.ts

[optimisticdipak]

Hi @a33ik,

Thank You for your quick response. I have tried implementing popover in the same way as you did in your control, I am getting an error saying "$(...).popover is not a function".

Can you/anyone help me with a solution to this?  

Thanks in advance...

[a33ik]

Let me guess. Do you try to run it in a harness? It won't work normally. Push it to the instance and test it there.

[optimisticdipak]

Hi @a33ik,

Initially, yeah, I tried to run it on harness only and I got that error. Then I packaged it and tested it in Powerapps, I am getting the same error there too...

Can you/someone provide any other Solution, please...?

Thanks in advance.

[NickDewitt]

I think the problem here is that it all gets webpacked to bundle.js and webpack is not configured with the pcf-scripts folder to make this available.

If you read up about externals on the webpack documentation Externals | webpack that should get you started. I don't use Jquery anymore but I had this problem on some old projects and I had to add an externals object to the module.exports object in the webpack config file.

    externals: {
        jquery: "jQuery",
        $: "jQuery"
    },

You can edit the webpackconfig in the node_modules/pcf-scripts/webpackconfig.js as Scott Durow mentions here but it's not exactly supported and you will need to update it if you restore/update your npm modules.

[PowerMaverick]

If you want to override webpack.config I would recommend using react-app-rewired (https://www.npmjs.com/package/react-app-rewired). This allows you to override webpack config without changing it in node_modules; because if you do npm install you will lose your changes.

----
Danish Naglekar | Power Maverick
MVP Business Applications
If this post helps, then please consider Accept it as the solution to help the other members.

[optimisticdipak]

Hi @NickDewitt,

As you said, I have added the following code to node_modules/pcf-scripts/webpackconfig.js file: 

module.exports = {
    //...
    externals: {
        jquery: "jQuery",
        $: "jQuery"
    },
  };

After adding this and running npm run build or npm start, I am getting the following error:-

[pcf-scripts] [Error] encountered unexpected error:
TypeError: webpackConfig_1.getWebpackConfig is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pcf-project@1.0.0 start: `pcf-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the pcf-project@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\dipak\AppData\Roaming\npm-cache\_logs\2021-07-28T16_10_22_308Z-debug.log

I don't know whether I have added that code correctly or not. Can you please confirm once? If I have added the code correctly then Can you please help me with some solution to this? 

Thanks in advance...

[optimisticdipak]

Hi Danish,

In that link, it is mentioned, to change the package.json file also... How would we change that in the PCF scenario? How would we write code for start, build and test in the PCF package.json file? Will it be same as mentioned in that link? Can you please help me with that?

Thanks in advance...