Error trying to embed power bi in reactjs app

Anonymous — Thu, 27 Jun 2019 10:58:18 GMT

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',
            id: 'correct id'
            embedUrl: 'correct url'
            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");

topic Error trying to embed power bi in reactjs app in Developer

Error trying to embed power bi in reactjs app