search

davidctj / react-plotlyjs-ts

A react-typescript component for Plotly.JS graphs.
MIT License
14 stars 9 forks source link

Doesn't work with React 17 #10

Open Blackmorse opened 2 years ago

Blackmorse commented 2 years ago

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 commented 2 years ago

Did you get it to work, @Blackmorse ?

Blackmorse commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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:

  1. Remove react-plotly-ts dependency
  2. npm install react-plotly.js
  3. Create file desc.d.ts at the root of your project containing only one line 
    declare module "react-plotly.js"
  4. Open file tsconfig.json and add this file to include array. In my case now it looks like that: 
    "include": [
"src", "desc.d.ts"
]
  5. Find all the occurrences of importing react-plotly-ts and replace them with react-plotly.js