topic Re: Custom visualization with React in Custom Visuals Development Discussion

Custom visualization with React

mda — Thu, 17 Aug 2017 15:15:23 GMT

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

Re: Custom visualization with React

v-viig — Fri, 18 Aug 2017 07:09:47 GMT

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

Re: Custom visualization with React

mda — Fri, 18 Aug 2017 09:10:37 GMT

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.

Re: Custom visualization with React

v-viig — Mon, 21 Aug 2017 07:39:36 GMT

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": []
}

Re: Custom visualization with React

mda — Mon, 21 Aug 2017 09:45:48 GMT

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?

Re: Custom visualization with React

mda — Mon, 21 Aug 2017 14:55:56 GMT

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.

Re: Custom visualization with React

v-viig — Tue, 22 Aug 2017 08:06:25 GMT

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

Re: Custom visualization with React

mda — Tue, 22 Aug 2017 08:23:43 GMT

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.