Power BI is turning 10! Tune in for a special live episode on July 24 with behind-the-scenes stories, product evolution highlights, and a sneak peek at what’s in store for the future.
Save the dateEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.
Hi all,
I'm trying to create custom visual with React, but it seems I cant'd do this.
What I did?:
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
Solved! Go to Solution.
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": [] }
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
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.
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": [] }
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?
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.
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 was added by default by pbiviz new.
Today it started to working again, so thanks for the help.
Check out the July 2025 Power BI update to learn about new features.
User | Count |
---|---|
2 | |
2 | |
1 | |
1 | |
1 |