Typescript compile errors in fresh install of create-react-app

[andrewaarestad]

I'm submitting a...

• [x] bug
• [ ] feature
• [ ] chore

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

• Version: 1.3.2
• Browser: [Chrome 102 ]

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:

Attempted import error: 'discontinuousTimeScaleProviderBuilder' is not exported from 'react-financial-charts' (imported as 'discontinuousTimeScaleProviderBuilder').
ERROR in ./src/StockChart.tsx 20:26-63
export 'discontinuousTimeScaleProviderBuilder' (imported as 'discontinuousTimeScaleProviderBuilder') was not found in 'react-financial-charts' (possible exports: defaultScaleProvider)

ERROR in ./src/StockChart.tsx 55:18-21
export 'ema' (imported as 'ema') was not found in 'react-financial-charts' (possible exports: defaultScaleProvider)

Also, my IDE highlights the Chart component with an error resolving the type of the children:

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: ChartProps | Readonly<ChartProps>): Chart', gave the following error.
    Type '{ children: Element[]; id: number; height: number; yExtents: any[]; origin: (_: number, h: number) => number[]; padding: { top: number; bottom: 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<...>'.
...

I was able to reproduce this in a sandbox app with the following steps:

1. Create new app: yarn create react-app react-financial-charts-test --template typescript
2. cd react-financial-charts-test
3. yarn add react-financial-charts
4. <install other dependencies, e.g. d3-format, @types/d3-format>
5. paste in the files StockChart.tsx, iOHLCData.ts, withOHLCData.tsx (from here: https://github.com/react-financial/react-financial-charts/blob/main/packages/stories/src/features/StockChart.tsx)
6. Add the <StockChart/> component in App.tsx

I'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.

• React 16.3.2
• react-financial-charts 1.3.2
• react-scripts 5.0.1
• typescript 4.4.2

[andrewaarestad]

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]

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

GitHub - andrewaarestad/finance-charts-test: Test app for react-finance-charts

Test app for react-finance-charts. Contribute to andrewaarestad/finance-charts-test development by creating an account on GitHub.

[ivanmatiaspascual]

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?

---

• My package.json after all

{
  "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]

Confirmed the original steps now work correctly with latest version.