I am currently working on my first widget and would like to integrate plotly. Via yarn add, I added plotly.js, react-plotly.js, @types/react-plotly.js, @types/plotly.js and font-awesome, which resulted in the following deps for my extension:

“dependencies”: { “@theia/core”: “latest”, “@theia/editor”: “latest”, “@types/plotly.js”: “^1.43.1”, “@types/react-plotly.js”: “^2.2.2”, “font-awesome”: “^4.7.0”, “plotly.js”: “^1.44.4”, “react”: “^16.8.3”, “react-plotly”: “^1.0.0”, “react-plotly.js”: “^2.3.0” },

Additionally, I added “jsx”: “react” to the compiler options in tsconfig.json. For the widget, I used ReactWidget

import * as React from ‘react’; import Plot from ‘react-plotly.js’


@injectable() export class MyWidget extends ReactWidget { … protected render(): React.ReactNode { return } }

SignalPlotComponent for React.Component

export interface SignalPlotComponent { type : string; //currently unused }

App which extends React.Component and includes plotly

export class App extends React.Component { render(): React.ReactNode { return

<Plot data={[ { x: [1, 2, 3], y: [2, 6, 3], type: ‘scatter’, mode: ‘lines+markers’, marker: {color: ‘red’}, }, {type: ‘bar’, x: [1, 2, 3], y: [2, 5, 3]}, ]} layout={{width: 320, height: 240, title: ‘A Fancy Plot’}} />
; } }

The code for the Plot has been taken from and works in a pure react solution outside of Theia. The App does also work if I return a simple string. The build works with the plotly code inside of the App, but loading Theia in the browser outputs the following error message:

root ERROR Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s undefined You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.

[original thread by No Bbi]

Hi, do you have a GH repo to try?