react-plotly.js | A plotly.js React component from Plotly 📈 | Data Visualization library

I have the following ReactJS component:

I have a create-react-app app that works on my Windows 10 workstation running node v12.19.0 and npm v6.14.8. I have been able to run npm start and npm run build and access the app just fine.

While trying to deploy the same code to DigitalOcean's App Platform, and to an Ubuntu droplet, I cannot for the life of me get the app to start. I am getting the errors below when I run npm run build:

Screenshot: "npm ERR! command sh -c CI=false react-scripts build"

Screenshot: "debug log at /root/.npm/_logs"

I thought it was possibly because I developed the app on Windows and some of the folders in my project may have caused issues. To test this, I used create-react-app again and was able to run the stock application in Ubuntu. I then put my src and public folders into the new project folder and installed the dependencies individually thinking that might help. It did not, I immediately got the error again. I just can't figure out what the exact issue is with my code.

Here is my package.json:

I am new to javascript and Reactjs and I am trying to fetch data from an api and then set an variable in my state to that data. When I console.log the response after I convert it to JSON, it works fine. However, after I set the data in this.state to the response and try to console.log(this.state.data) in my state, it shows an empty object in the console.

I have state data in my index.js page that is being sent to my details.js page via the Link component built into gatsby. From my details.js page, I am trying to send data to my component ChartData.js.

In details.js I can access my information by using {props.location.state.x}. Now I need the same data to be sent to my component and what I did was put Stock (Stock is the class name in ChartData.js) the comonent and set 'symbol' equal to the way I would reference data just like this: {}

Now under ChartData/.js when I try to reference symbol I get the error 'symbol is not defined'. Not sure if I am messing up the syntax of passing it or if you cannot do it this way.

index.js:

I am trying to set up graphs in my stockmarket project. I am trying to display the graph of the stock clicked on in Gatsby.

Currently, I can display the stock graph of any stock by manually typing in the stock name to the code. I would like to replace the stock name with ${query} inside of the url of the api call because of const query = event.target.value in index.js. So the searched term will be saved as query and I need to have access to the same variable in my other file chartData.js so that I can change my API call from let API_CALL = `https://cloud.iexapis.com/stable/stock/aapl/chart/5y?token=${API_KEY}`; into let API_CALL = `https://cloud.iexapis.com/stable/stock/${query}/chart/5y?token=${API_KEY}`; Thus I will have access to whichever term is searched and be able to turn it into a graph.

I thought maybe I could use state to do this, like moving query to state via query: this.state.value or query: {this.state.value}. Both of these returned errors so I figured that would not work (or I was doing it wrong at least).

index.js

My ReactJS project was working all fine till last week but from Sunday its giving below error on npm install:

Trying out TypeScript for a React project and I'm stuck on this error:

I have a whole graph defined into a local json file like below,