Closed andrewaarestad closed 1 year ago
andrewaarestad
commented
2 years ago I was able to get past all of the import errors by using craco per @qunaxis's suggestion here: https://github.com/react-financial/react-financial-charts/issues/606#issuecomment-1126779995
However I still get the Typescript error for the Chart children. I'm able to get my sample app to render a chart by casting Chart to any and rendering with that.
andrewaarestad
commented
2 years ago I put the code for my create-react-app hello world project here in case anyone is interested: https://github.com/andrewaarestad/finance-charts-test
GitHub
Test app for react-finance-charts. Contribute to andrewaarestad/finance-charts-test development by creating an account on GitHub.
ivanmatiaspascual
commented
1 year ago Hi! Our options for published dependency 1.3.2 that depends on react 17 at most.
1 Typescript error for the Chart component from react-financial-charts.
1.1 Error:
No overload matches this call.
Overload 1 of 2, '(props: ChartProps | Readonly<ChartProps>): Chart', gave the following error.
Type '{ children: Element[]; id: number; yExtents: (data: Candle) => number[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Chart> & Pick<Readonly<ChartProps>, "height" | "onDoubleClick" | "onContextMenu" | "yExtents" | "yExtentsCalculator"> & InexactPartial<...> & InexactPartial<...>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Chart> & Pick<Readonly<ChartProps>, "height" | "onDoubleClick" | "onContextMenu" | "yExtents" | "yExtentsCalculator"> & InexactPartial<...> & InexactPartial<...>'.
Overload 2 of 2, '(props: ChartProps, context: any): Chart', gave the following error.
Type '{ children: Element[]; id: number; yExtents: (data: Candle) => number[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Chart> & Pick<Readonly<ChartProps>, "height" | "onDoubleClick" | "onContextMenu" | "yExtents" | "yExtentsCalculator"> & InexactPartial<...> & InexactPartial<...>'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Chart> & Pick<Readonly<ChartProps>, "height" | "onDoubleClick" | "onContextMenu" | "yExtents" | "yExtentsCalculator"> & InexactPartial<...> & InexactPartial<...>'.1.2 Solution:
1.2.1 Downgrade @types/react to 17.0.39 and @types/react-dom to 17.0.11
2) Webpack compiled with 82 errors and 1 warning:
2.1 Error:
ERROR in ./src/graph/chart/chart.view.tsx 17:25-62
export 'discontinuousTimeScaleProviderBuilder' (imported as 'discontinuousTimeScaleProviderBuilder') was not found in 'react-financial-charts' (possible exports: defaultScaleProvider)
....2.2 Solutions:
2.2.1 Downgrade Webpack to v4, in webpack 4 it doesn't reproduce.
In my case i am using Create React App, i have tested downgrade the dependency react-scripts from 5.0.1 to 4.0.3, that takes me to downgrade eslint to"^7.11.0 and eslint-plugin-react to ^7.21.5.
Source: https://github.com/react-financial/react-financial-charts/issues/589#issuecomment-934145009
2.2.2 Update Webpack to v5 but with craco and the override fullySpecified: false. Test: https://github.com/andrewaarestad/finance-charts-test
I am not sure but i feel more safe with the option 1, it is more natural to me think that the owner developed this library with version 4, i hope not being losing some relevant feature to the react-financial-charts library with the downgrade. Did you find another approach?
{
"name": "candlestick-client",
"version": "0.1.0",
"private": true,
"dependencies": {
"d3": "4.13.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-financial-charts": "1.3.2",
"react-scripts": "4.0.3",
"typescript": "4.8.4",
"web-vitals": "2.1.4"
},
"devDependencies": {
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "12.1.5",
"@testing-library/user-event": "13.5.0",
"@types/d3": "4.13.12",
"@types/jest": "27.5.2",
"@types/node": "16.11.66",
"@types/react": "17.0.39",
"@types/react-dom": "17.0.11",
"@typescript-eslint/eslint-plugin": "5.40.1",
"@typescript-eslint/parser": "5.40.1",
"eslint": "^7.11.0",
"eslint-plugin-react": "^7.21.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
markmcdowell
commented
1 year ago Confirmed the original steps now work correctly with latest version.
I'm submitting a...
What is the current behavior
Typescript compile errors when trying to run the basic StockChart.tsx example, e.g. import errors and errors determining type of children for Chart component
What is the expected behavior
Expect the sample StockChart.tsx example to compile and render
Please tell us about your environment
macos, create-react-app + typescript
Other information
I'm not sure why but I get lots of compile errors when trying to use the example StockChart.tsx code.
The errors are things like:
Also, my IDE highlights the Chart component with an error resolving the type of the children:
I was able to reproduce this in a sandbox app with the following steps:
yarn create react-app react-financial-charts-test --template typescriptI'm not sure if maybe this is an issue with using TS in my project? Is TS supported? I also tried downgrading from React 18 to React 16, but get the same issues.