cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
mda
Advocate I
Advocate I

Custom visualization with React

Hi all,

 

I'm trying to create custom visual with React, but it seems I cant'd do this.

 

What I did?:

  • Install powerbi-visuals-tools@1.7.2 wich is the latest version.
  • Created new visual with pbiviz new reacttest.
  • In reacttest directory run:
    • npm install --save react react-dom
    • npm install --save-dev @types/react @types/react-dom

 

Now when I try to start vizualization with pbiviz start it shows me a lot of errors:

 

error TYPESCRIPT reacttest/node_modules/@types/react-dom/index.d.ts : (15,5) Module '"reacttest/node_modules/@types/react/index"' has no exported member 'DOMAttributes'.
error TYPESCRIPT reacttest/node_modules/@types/react-dom/index.d.ts : (42,22) Generic type 'Component<P, S>' requires 2 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react-dom/index.d.ts : (57,22) Generic type 'Component<P, S>' requires 2 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react-dom/index.d.ts : (62,22) Generic type 'Component<P, S>' requires 2 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react-dom/index.d.ts : (67,22) Generic type 'Component<P, S>' requires 2 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (50,29) Generic type 'AnimationEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (51,29) Generic type 'ClipboardEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (52,31) Generic type 'CompositionEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (53,24) Generic type 'DragEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (54,25) Generic type 'FocusEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (55,28) Generic type 'KeyboardEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (56,25) Generic type 'MouseEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (57,25) Generic type 'TouchEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (58,30) Generic type 'TransitionEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (59,22) Generic type 'UIEvent<T>' requires 1 type argument(s).
error TYPESCRIPT reacttest/node_modules/@types/react/index.d.ts : (60,25) Generic type 'WheelEvent<T>' requires 1 type argument(s).
...

I didn't change visual.ts and nowhere import React or ReactDOM. I've only tried to add "jsx": "react" to tsconfig.json but it didn't change anything.

 

My package.json looks like:

{
  "name": "visual",
  "dependencies": {
    "powerbi-visuals-utils-dataviewutils": "1.2.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "@types/react": "^16.0.2",
    "@types/react-dom": "^15.5.3"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "jsx": "react",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v1.7.0/PowerBI-visuals.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
    "src/settings.ts",
    "src/visual.ts"
  ]
}

pbiviz.json is unchanged. I tried to add

    "node_modules/react/dist/react-with-addons.js",
    "node_modules/react-dom/dist/react-dom.js",

to externalJS but it didn't worked.

 

Can anybody help?

 

Marcin

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

You shouldn't include JS files into tsconfig.json. JS should be inclued into externalJS property of pbiviz.json (whole file is attached for good context):

{
  "visual": {
    "name": "reacttest",
    "displayName": "reacttest",
    "guid": "reacttestADA2C64F50954106925BC15E56CC2F27",
    "visualClassName": "Visual",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "1.7.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/react/dist/react-with-addons.js",
    "node_modules/react-dom/dist/react-dom.js",
    "src/reactAdapter.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

View solution in original post

7 REPLIES 7
v-viig
Community Champion
Community Champion

Please install types for TypeScript 2.1 because of fact that PBIVIZ uses TS 2.1.

npm install --save-dev @types/react@15.0.20 @types/react-dom@15.5.0

We have a task to upgrade TS version to the most recent. We'll implement this soon.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

 

Thanks, it helped with typescript typings, but it didn't help with using React with Visuals.

 

I did below things:

1. In src folder create a new file "reactAdapter.js" with below content:

 

var React = typeof React !== 'undefined'
    ? React
    : window.React;
var ReactDOM = typeof ReactDOM !== 'undefined'
    ? ReactDOM
    : window.ReactDOM;

2. To file tsconfig.json add these lines under files node:

 

 

"node_modules/react/dist/react.min.js",
"node_modules/react-dom/dist/react-dom.min.js",
"src/reactAdapter.js",

Without code above React and ReactDOM are undefined.

 

 

Now in visual.ts when I add this line it is working:

ReactDOM.render(React.createElement("p", null, `Update count: ${(this.updateCount++)}`), this.target);

 

 

But when I create a new file called hello.tsx and add it to tsconfig.json:

 

interface HelloProprs {
    toWhat?: string
}

class Hello extends React.Component<HelloProprs, {}> {
    render() {
        console.log("render", this.props);
        return <div>Hello {this.props.toWhat}</div>
    }
}

 

Now during starting, I'm getting:

 

 error TYPESCRIPT /src/hello.tsx : (5,21) Type 'any' is not a constructor function type.
error TYPESCRIPT /src/hello.tsx : (7,36) Property 'props' does not exist on type 'Hello'.
error TYPESCRIPT /src/hello.tsx : (8,33) Property 'props' does not exist on type 'Hello'.

 

But I have to say, that when I declare the same React component in jsx file it is working great.

 

v-viig
Community Champion
Community Champion

You shouldn't include JS files into tsconfig.json. JS should be inclued into externalJS property of pbiviz.json (whole file is attached for good context):

{
  "visual": {
    "name": "reacttest",
    "displayName": "reacttest",
    "guid": "reacttestADA2C64F50954106925BC15E56CC2F27",
    "visualClassName": "Visual",
    "version": "1.0.0",
    "description": "",
    "supportUrl": "",
    "gitHubUrl": ""
  },
  "apiVersion": "1.7.0",
  "author": {
    "name": "",
    "email": ""
  },
  "assets": {
    "icon": "assets/icon.png"
  },
  "externalJS": [
    "node_modules/react/dist/react-with-addons.js",
    "node_modules/react-dom/dist/react-dom.js",
    "src/reactAdapter.js"
  ],
  "style": "style/visual.less",
  "capabilities": "capabilities.json",
  "dependencies": "dependencies.json",
  "stringResources": []
}

View solution in original post

Well, it helped with compilation. Code now compiles without errors but it is not working.

 

I've put ReactDOM.render into try statement and there is no error, but since today my React component is not working.

The same thing is with my jsx component which was working on Friday.

 

Did guys from Microsoft change something at app.powerbi.com?

mda
Advocate I
Advocate I

I packaged visual and import it to PowerBI Desktop and it worked, but like I wrote earlier today something wrong is going with a developer preview of visual at app.powerbi.com.

 

I created completely new visual, nothing changed and it is not working too. It seems that update is not called by the app.powerbi.com. The same situation has my colleague, so it is not a case on my computer.

v-viig
Community Champion
Community Champion

Our React sample visual works well on Power BI App (https://app.powerbi.com).

Do you use powerbi-visuals-utils-dataviewutils in your tsconfig.json? If so, please include 

node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js into externalJS property of pbiviz.json.
 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js was added by default by pbiviz new.

 

Today it started to working again, so thanks for the help.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Power BI October Update 2021.jpg

Power BI Release

Click here to read more about the October 2021 Release!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Teds Dev Camp Oct. 2021 768x460.jpg

Power BI Dev Camp - October 28th, 2021

Mark your calendars and join us for our next Power BI Dev Camp!

Top Solution Authors
Top Kudoed Authors