Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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.
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
3 | |
2 | |
1 | |
1 | |
1 |
User | Count |
---|---|
6 | |
1 | |
1 | |
1 | |
1 |