tradingview / charting-library-examples

Examples of Charting Library integrations with other libraries, frameworks and data transports
MIT License
1.33k stars 744 forks source link

[React Typescript] Problem initializing application #274

Closed mateusholandacdv closed 2 years ago

mateusholandacdv commented 2 years ago

I followed all the steps for the React Typescript integration from https://github.com/tradingview/charting-library-examples, copying charting_libraries and datafeeds to their respectively folders, but I can't start the example app properly. I'm getting this error:

TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}, any>' and 'Component<any, {}, any>'.
  Named property 'props' of types 'Component<any, {}, any>' and 'Component<any, {}, any>' are not identical.

Maybe it's caused by a conflict between dependencies, I guess @types/react and @types/react-dom, but I'm not sure. Anyways, even following step-by-step the documentation provided I couldn't make things work.

My node and npm versions are:

$ node -v
  v17.4.0
$ npm -v
  8.3.1

The package.json is exactly the same as the one from Github.

{
  "name": "charting-library-react-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "^4.0.8"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test"
  },
  "devDependencies": {
    "@types/jest": "^27.4.0",
    "@types/jquery": "^1.10.31",
    "@types/react": "^16.0.35",
    "@types/react-dom": "^16.0.3",
    "tslint": "~5.9.1",
    "tslint-react": "^3.5.1",
    "typescript": "^3.5.2"
  }
}
romfrancois commented 2 years ago

Hi @mateusholandacdv, did you manually copy the charting_library & datafeed or used the script?

romfrancois commented 2 years ago

Testing from scratch using both the provided script to copy the libs and

node --version: v16.13.0
npm --version: v8.1.0

doesn't seem to trigger any issue.

mateusholandacdv commented 2 years ago

Hi. Yes, I copied both folders manually. I managed to get things working by changing the react and react-dom version in package.json and reinstalling the dependencies.

{
  "react": "^17.0.02",
  "react-dom": "^17.0.2"
}

If I change back to the default versions it throws the same error. I replicated this issue in two different computers and the results were the same.

romfrancois commented 2 years ago

From what I can gather, your current version of node is not LTS and it seems there's issues at the moment in using v17.x (link1, link2). Unless there's a specific feature you require from any of the latest version, I would recommend sticking with "recommended" versions.

mateusholandacdv commented 2 years ago

Ok, I'll try downgrading my Node and use the recommended versions in package.json. Thank you!