the react app can't run

[begood0513]

Hi Trash-and-fire,

I use 'npx creat-react-app my-app --template typescript' to create a project. Then 'npm install lightweight-charts lightweight-charts-react-wrapper'. I change the content of App.tsx to:

  `import {Chart, LineSeries} from "lightweight-charts-react-wrapper";

const data = [ {time: '2019-04-11', value: 80.01}, {time: '2019-04-12', value: 96.63}, {time: '2019-04-13', value: 76.64}, {time: '2019-04-14', value: 81.89}, {time: '2019-04-15', value: 74.43}, {time: '2019-04-16', value: 80.01}, {time: '2019-04-17', value: 96.63}, {time: '2019-04-18', value: 76.64}, {time: '2019-04-19', value: 81.89}, {time: '2019-04-20', value: 74.43}, ];

function App() {
return ( div> Chart width={800} height={600}>
LineSeries data={data}/> /Chart> /div>
); }

export default App;` (I delte the '<' to let the html tag can be shown on the content) Then, run 'npm start', but got many errors like:

`Cannot read properties of null (reading 'useState')

TypeError: Cannot read properties of null (reading 'useState') at useState (http://localhost:3000/main.ced97fdbf17dc3583018.hot-update.js:2698:25) at Chart (http://localhost:3000/main.7ea0a00618255236bc2e.hot-update.js:666:80) at renderWithHooks (http://localhost:3000/static/js/bundle.js:21372:22) at updateForwardRef (http://localhost:3000/static/js/bundle.js:23943:24) at beginWork (http://localhost:3000/static/js/bundle.js:25990:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:10964:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11008:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11065:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:30939:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:30186:16)`

So, Can you give a simple path on how to use 'lightweight-charts-react-wrapper' to create a react chart project from beginning.

Thanks.

[trash-and-fire]

It looks like there is something wrong with the react version in your application. Which version of react are you using? You should have at least 16.8 which one has hooks api.

[trash-and-fire]

This code works well on my side:

import React from 'react';
import {Chart, LineSeries} from "lightweight-charts-react-wrapper";
import logo from './logo.svg';
import './App.css';

const data = [
    {time: '2019-04-11', value: 80.01},
    {time: '2019-04-12', value: 96.63},
    {time: '2019-04-13', value: 76.64},
    {time: '2019-04-14', value: 81.89},
    {time: '2019-04-15', value: 74.43},
    {time: '2019-04-16', value: 80.01},
    {time: '2019-04-17', value: 96.63},
    {time: '2019-04-18', value: 76.64},
    {time: '2019-04-19', value: 81.89},
    {time: '2019-04-20', value: 74.43},
];

function App() {
    return (
        <div className="App">
            <Chart width={800} height={600}>
                <LineSeries data={data}/>
            </Chart>
        </div>
    );
}

export default App;

[begood0513]

It looks like there is something wrong with the react version in your application. Which version of react are you using? You should have at least 16.8 which one has hooks api.

I use the 18.2.0:

[begood0513]

This code works well on my side:

import React from 'react';
import {Chart, LineSeries} from "lightweight-charts-react-wrapper";
import logo from './logo.svg';
import './App.css';

const data = [
  {time: '2019-04-11', value: 80.01},
  {time: '2019-04-12', value: 96.63},
  {time: '2019-04-13', value: 76.64},
  {time: '2019-04-14', value: 81.89},
  {time: '2019-04-15', value: 74.43},
  {time: '2019-04-16', value: 80.01},
  {time: '2019-04-17', value: 96.63},
  {time: '2019-04-18', value: 76.64},
  {time: '2019-04-19', value: 81.89},
  {time: '2019-04-20', value: 74.43},
];

function App() {
  return (
      <div className="App">
          <Chart width={800} height={600}>
              <LineSeries data={data}/>
          </Chart>
      </div>
  );
}

export default App;

Did you use the same steps like me?

[trash-and-fire]

Did you use the same steps like me?

Yes, the same steps except I used npx create-react-app@latest my-app --template typescript to create a project.

[begood0513]

Did you use the same steps like me?

Yes, the same steps except I used npx create-react-app@latest my-app --template typescript to create a project.

I use npx create-react-app@latest my-app --template typescript and it works.

Thanks!

[begood0513]

Another question:

I follow the demo, but there are no rightPriceScale and timeScale. According to the summarry, this chart has rightPriceScale and timeScale: