Doesn't work with React 17

[Blackmorse]

While npm install

npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from react-plotlyjs-ts@2.2.2

Versions from package.json

"react-plotlyjs-ts": "^2.2.2",
"react": "^17.0.2",
"plotly.js": "^1.3.21",

[ffriande]

Did you get it to work, @Blackmorse ?

[Blackmorse]

@ffriande , nope. Since this project looked like non-supported, I decided to use plain javascript module (https://github.com/benjeffery/react-plotlyjs or https://github.com/plotly/react-plotly.js) in my Typescript project

[ffriande]

@Blackmorse thanks for the reply. I can't get that solution to work, I still haven't figured out why... How exactly did you add, for example https://github.com/plotly/react-plotly.js to you React Ts app?
ps: I am using webpack

[Blackmorse]

@ffriande, I'm not sure that it will work for you, but in my case It was very easy: just followed instruction from this article https://medium.com/@steveruiz/using-a-javascript-library-without-type-declarations-in-a-typescript-project-3643490015f3 (use a Plan C)

To save your time I write down my steps here:
0. Remove react-plotly-ts dependency

1. npm install react-plotly.js
2. Create file desc.d.ts at the root of your project containing only one line

declare module "react-plotly.js"

3. Open file tsconfig.json and add this file to include array. In my case now it looks like that:

  "include": [
    "src", "desc.d.ts"
  ]

4. Find all the occurrences of importing react-plotly-ts and replace them with react-plotly.js