error trying to embed power bi in reactjs app

Question

I'm trying to show a power bi report on a website using reactjs, and through a form I want to filter the information

i have done the part of handle form data, but when i try to filter my power bi form i always get the same error

(I'm using the latest version of jquery and powerbi-client)

import React from 'react';
import $ from 'jquery';
import * as powerbi from 'powerbi-client';

class Formulario2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {linea: '' };
        this.filter = {
            $schema: 'http://powerbi.com/product/schema#basic',
            target: {
                table: 'RefsLineas',
                column: 'Assemblyline'
            },
            operator: 'eq',
            values: ''
        }

        this.embedConfiguration = {
            type: 'report',
            accessToken: 'correct checked token',
            /*
             * the filters is an array here, you can
             * add more filter like [filter1,filter2,filter3]
             */
            filters: [this.filter], 
            settings: {
                filterPaneEnabled: false 
            }
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(event) {
        this.setState({linea: document.getElementById('linea').value});

        event.preventDefault();
        this.initialize();
        this.filterSet(this.state.linea);
    }



    initialize() {
        var config = this.embedConfiguration;

        // Get a reference to the embedded report HTML element
        var $embedContainer = $('#embedContainer');

        // Embed the report and display it within the div container.
        var report = powerbi.embed($embedContainer, config);

        // Report.off removes a given event handler if it exists.
        report.off("loaded");
    }

    filterSet(entrada) {

        this.filter.values = entrada;

        // Get a reference to the embedded report HTML element
        var embedContainer = $('#embedContainer')[0];

        // Get a reference to the embedded report.
        var report = powerbi.get(embedContainer);

        // Set the filter for the report.
        // Pay attention that setFilters receives an array.
        report.setFilters([this.filter])
            .then(function () {
                alert("Report filter was set.");
            })
            .catch(function (errors) {
                alert(errors);
            });
    }

    render() {
        return (
            <div>
                <label>
                    Line:
                    <input type='text' id='linea'  />
                </label>

                <button type='submit' value='Submit' onClick={this.handleClick}>
                  Enviar
                </button>

                <report 
                    embedType='report' 
                    tokenType='Aad' 
                    accessToken={this.embedConfiguration.accessToken}
                    embedUrl={this.embedConfiguration.embedUrl} 
                    embedId={this.embedConfiguration.id} 
                    permissions='All'
                    filterPaneEnabled={true}/>
            </div>
        );
    }
} export default Formulario2;

import React from 'react';
import ReactDOM from 'react-dom'
import Formulario2 from './Formulario2'

ReactDOM.render(<Formulario2/>, document.getElementById('root'));

This is the error:

TypeError: powerbi_client__WEBPACK_IMPORTED_MODULE_2__.embed is not a function

Formulario2.initialize
D:/trabajo/web/src/Formulario2.js:48

  45 | var $embedContainer = $('#embedContainer');
  46 | 
  47 |//Embed the report and display it within the div container.
> 48 | var report = powerbi.embed($embedContainer, config);
  49 | 
  50 | // Report.off removes a given event handler if it exists.
  51 | report.off("loaded");

Answer 1

There is a small difference between using power-client in a browser via CDN and using it in JS libraries via NPM package.

Recommended way for using in a JS library: Instantiate powerbi service:

import * as pbi from 'powerbi-client';
...
const powerbi = new pbi.service.Service(
        pbi.factories.hpmFactory,
        pbi.factories.wpmpFactory,
        pbi.factories.routerFactory)
...
report = powerbi.embed(<container>,<config>)

Refer this .

Answer 2

I stumbled upon this problem as well, so this is what I did to solve it.

import * as pbi from 'powerbi-client';

...

var models = pbi.models;

config = {
    type: 'report',
    id: embedReportId,
    tokenType: models.TokenType.Embed,
    accessToken: accessToken,
    embedUrl: embedUrl,
    permissions: models.Permissions.Read,
    settings:
    {
        filterPaneEnabled: false,
    }
};

var reportContainer = $('#reportContainer')[0];
var report = window.powerbi.embed(reportContainer, config);

You need the use the window.powerbi.embed function instead of pbi.Embed (which is a class).

Hope this helps anyone having the same issue out!