Error TS2307: Cannot find module 'http'

[shilpivenaik]

Hi,

I'm trying to develop a client side webpart for SharePoint Online environment. This webpart would embed a powerbi report from powerbi workspace.

While developing the webpart, below steps are taken:

From command line instance, created a folder “BISteria_webPart”, and navigated to it.

Then I ran the yeoman SharePoint generator with “yo @microsoft/sharepoint” and stick to the default values.

Added the additional dependencies via:

npm install powerbi-client npm install powerbi-api

Then, I ran npm install command to install all dependencies.

In webpart.ts file, following libraries are included

import as pbi from 'powerbi-client'; import as pbi_api from 'powerbi-api';

And finally I ran gulp serve command to debug the webpart.

As I run the gulp serve command, I got the below errors:

Error - typescript - node_modules\ms-rest\lib\index.d.ts(0,24): error TS2307: Cannot find module 'stream' Error - typescript - node_modules\ms-rest\lib\index.d.ts(1,22): error TS2307: Cannot find module 'http'.

Please find the below attached Source file for the same

PowerBiSteriaWebPart.zip

Thanks Shilpi Venaik

[shilpivenaik]

@ali-hamud Please ,If you can help me on the above reported issue.

[ali-hamud]

can you please check if this thread helps you: http://stackoverflow.com/questions/38434864/typescript-cannot-find-module-http-on-visual-studio-code

please let me know.

[shilpivenaik]

Hi @ali-hamud ,

Thanks for sharing the link, as per the above link shared by you,the below error is resolved :

Error - typescript - node_modules\ms-rest\lib\index.d.ts(0,24): error TS2307: Cannot find module 'stream' Error - typescript - node_modules\ms-rest\lib\index.d.ts(1,22): error TS2307: Cannot find module 'http'.

But when i am using the powerbi-api to generate the embed token ,i am getting huge error list:

var token = powerbi_api.PowerBIToken.createReportEmbedToken("ShilpiPBIWorkspace", "d6f34332-5752-4784-ad25-f3c1a30b24d9");
var jwt = token.generate("99bZzS9Upe2S+J0akDWwOgWXxJA5ZmAVDtpU+Q5q2rnEnI0Pjg+waotGRW7gNbWgDTtyOayuxbukaG0sQEC/yA==")

I am sharing the code which i am using.I need to create an embed token dynamically using powerbi-api

PowerBiSteriaWebPart.zip

Thanks Shilpi Venaik

[shilpivenaik]

Hi @ali-hamud The Error I am getting for powerbi-api is:

[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.PowerBiSteriaWebPart.c349e939-ca0b-49e6-bf0e-f0dea701f897,Error: ***Failed to load component "bbb7bf1a-8258-494f-9524-159ee92e7b7e" (PowerBiSteriaWebPart). Original error: ***Failed to load entry point from component "bbb7bf1a-8258-494f-9524-159ee92e7b7e" (PowerBiSteriaWebPart). script resources due to: {1}. CALLSTACK:: Error at SPWebPartError.SPError [as constructor] (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js:13577:26) at new SPWebPartError (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:988:30) at Function.SPWebPartError.create (https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1012:18) at https://localhost:4321/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js:1884:65

Thanks Shilpi Venaik

[ali-hamud]

for me it looks like it's a compilation error. can you paste your code here? I cannot download the zip file.

[shilpivenaik]

hi @ali-hamud ,

Below code i am using to generate embed token to view PowerBI Report in webpart, code written in typescript

///<reference path="../../../typings/globals/node/index.d.ts"/>
import { Version } from '@microsoft/sp-core-library';
import * as pbi from 'powerbi-client';
import * as powerbi_api from 'powerbi-api';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneDropdown  
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './PowerBiSteria.module.scss';
import * as strings from 'powerBiSteriaStrings';
import { IPowerBiSteriaWebPartProps } from './IPowerBiSteriaWebPartProps';

export default class PowerBiSteriaWebPart extends BaseClientSideWebPart<IPowerBiSteriaWebPartProps> {

  public render(): void {
   this.domElement.innerHTML = `
        <div id="reportContainer" style="height:500px;"></div>
        <a id="fullscreen">FULL SCREEN</a>`;

        // embed configuration.
        // generate the access token with "powerbi create-embed-token -r<report_id>"
        // get the report id via "powerbi get-reports"

        var token = powerbi_api.PowerBIToken.createReportEmbedToken("ShilpiPBIWorkspace", "d6f34332-5752-4784-ad25-f3c1a30b24d9");                 
        var jwt = token.generate("99bZzS9Upe2S+J0akDWwOgWXxJA5ZmAVDtpU+Q5q2rnEnI0Pjg+waotGRW7gNbWgDTtyOayuxbukaG0sQEC/yA==");
         // jwt
        //var reportid=this.properties.reportname;

        var embedConfiguration = {
        type: 'report',
        accessToken: 'jwt',
        id: 'c1cea1aa-1190-492e-a0d4-f22bc8166d50',
        embedUrl: 'https://embedded.powerbi.com/appTokenReportEmbed'
        };

        // grab a reference to the HTML element containing the report
        var reportContainer = document.getElementById('reportContainer');

        // construct a PBI service; according to the documentation this should be already available as a global variable,
        // but in my case that did not work.
        let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
        var report = powerbi.embed(reportContainer, embedConfiguration);

        // attach an event handler for the
        document.getElementById("fullscreen").addEventListener("click", () => {
        var report = powerbi.get(reportContainer);

        report.fullscreen();
        }); 

  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

[shilpivenaik]

Hi @ali-hamud , Any update on the above issue.I have already shared code with you.