Export was not found in 'react-financial-charts'

[lucasgismondi]

Hello! Thank you for the work on this library.

I'm trying to get a basic example up and running locally but I'm running into some import errors. I created a typescript app with yarn and am using the exact code from the StockChart.tsx storybook component. Here are my imports:

import {
    elderRay,
    ema,
    discontinuousTimeScaleProviderBuilder,
    Chart,
    ChartCanvas,
    CurrentCoordinate,
    BarSeries,
    CandlestickSeries,
    ElderRaySeries,
    LineSeries,
    MovingAverageTooltip,
    OHLCTooltip,
    SingleValueTooltip,
    lastVisibleItemBasedZoomAnchor,
    XAxis,
    YAxis,
    CrossHairCursor,
    EdgeIndicator,
    MouseCoordinateX,
    MouseCoordinateY,
    ZoomButtons,
    withDeviceRatio,
    withSize,
} from 'react-financial-charts';

and this is my tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Here are the errors I'm getting:

I thought it had to do with changing the target in my tsconfig to es2019 or es6 but it doesn't look like that's the problem. Does anyone know how to resolve these errors in a create-react-app? Thanks in advance!!

[lucasgismondi]

Looks like this is related to #606 and the open PR #611 if I'm not mistaken. Are there any workarounds in the meantime?

[steelkorbin]

This is working for me.

tsconfig:

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "es2019"
  },
  "include": [
    "src"
  ]
}

package.json:

{
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "dependencies": {
    "@types/node-ipc": "^9.2.0",
    "d3-array": "^3.1.1",
    "d3-dsv": "^3.0.1",
    "d3-format": "^3.1.0",
    "d3-scale": "^4.0.2",
    "d3-time-format": "^4.1.0",
    "node-ipc": "^10.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-financial-charts": "^1.3.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.5.2",
    "web-vitals": "^2.1.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/d3-array": "^3.0.2",
    "@types/d3-dsv": "^3.0.0",
    "@types/d3-format": "^3.0.1",
    "@types/d3-scale": "^4.0.2",
    "@types/d3-time-format": "^4.0.0",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.11",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "name": "web",
  "private": true,
  "scripts": {
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "start": "react-scripts start",
    "test": "react-scripts test"
  },
  "version": "0.1.0"
}

imports:

// import { max } from "d3-array"
import { format } from "d3-format"
import { timeFormat } from "d3-time-format"
// import { scaleLinear } from "d3-scale"
import * as React from "react"

import {
  // eslint-disable-next-line
  AlternatingFillAreaSeries,
  Annotate,
  // eslint-disable-next-line
  BarSeries,
  BollingerSeries,
  CandlestickSeries,
  Chart,
  ChartCanvas,
  CrossHairCursor,
  CurrentCoordinate,
  discontinuousTimeScaleProviderBuilder,
  EdgeIndicator,
  HoverTooltip,
  IZoomAnchorOptions,
  LineSeries,
  MouseCoordinateX,
  MouseCoordinateY,
  MovingAverageTooltip,
  OHLCTooltip,
  SingleValueTooltip,
  StraightLine,
  SvgPathAnnotation,
  withDeviceRatio,
  withSize,
  XAxis,
  YAxis,
  ZoomButtons,
} from "react-financial-charts"
import { IOHLCData, withUpdatingData, withOHLCData } from "../data"

[lucasgismondi]

Thank you @steelkorbin. Is this in a create react app?

[steelkorbin]

Yes, CRA, last year, I just ran: npx create-react-app web --template typescript --use-npm so my version might be older. Following that I got to work on building my UI just using the framework, no storybook cruft, I have not done anything special yet, I am just staying in my lane, with this one, it is doing enough for me perfectly right now. I use it every day for what I need from it. FYI, I don't use any built-in indicators in my UI, I use it to only display my FOREX data and my indicators data from my systems. I look at this as a UI and only a UI, no business logic in it, no indicators in it, etc.. just an interface and only an interface, so I might not need or want some of the other packages that you might be using.