Home
Support Forums

Netlify build not able to find component in same component folder

I have been getting the error

9:29:19 PM: ./src/components/StockAnalysis.js
9:29:19 PM: Cannot find file './Chart' in './src/components'.

when deploying to Netlify, however, I have no issues displaying the site locally in the browser. The StockAnalysis component looks as follows:

import React from 'react';
import Container from "@material-ui/core/Container";
import { makeStyles } from '@material-ui/core/styles';
import Chart from './Chart'

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
  mainContainer: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'center',
      background: 'blue'
  }
});


const StockAnalysis = () => {
  const classes = useStyles();
  return (
    <Container maxWidth="md" className={classes.mainContainer} >
      <Chart />
    </Container>
  );
};

export default StockAnalysis;

and the Chart component:

import React, {useState, useEffect} from 'react';
import { useParams } from 'react-router-dom';
import {getChartData} from '../api/marketData';
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer} from 'recharts';
import { makeStyles } from '@material-ui/core/styles';
import ToggleButton from '@material-ui/lab/ToggleButton';
import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
import Container from '@material-ui/core/Container';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  },
  chartContainer: {
    display: 'flex',
    flexDirection: 'column',
    flexWrap: 'wrap',
    alignItems: 'center',
    background: 'white',
    textAlign: 'left',
    width: '800px',
  },
  typography: {
    noWrap: {
      marginRight: '99px',
    }
  },
  '@global': {
    '.recharts-wrapper .recharts-cartesian-grid-horizontal line:first-child': {
      strokeOpacity: '0',
    },
    '.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child': {
      strokeOpacity: '0',
    }
  }
});

const Chart = () => {
  const classes = useStyles();
  const {ticker} = useParams();
  const ranges = [
    {range: '1d', interval: '15m'},
    {range: '5d', interval: '60m'},
    {range: '1mo', interval: '60m'},
    {range: '3mo', interval: '1d'},
    {range: '6mo', interval: '1d'},
    {range: '1y', interval: '1d'},
    {range: '2y', interval: '1d'},
    {range: '5y', interval: '1d'},
  ]
  
  const [timeRange, setTimeRange] = useState({range: '1d', interval: '15m'})
  const [chartData, setChartData] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  const handleTimeRangeSelect = (event, newTimeRange) => {
    setTimeRange(newTimeRange)
  };
  
  useEffect(() => {
    getChartData(ticker, timeRange)
    .then(response => {
      console.log(response)
      setChartData(formatResponseForRechart(response))
      setIsLoading(false);
    })
    .catch((error) => {
      setIsError(true);
    });
  }, [ticker, timeRange])

  const formatResponseForRechart = (responseData) => {
    const timestamps = responseData.chart.result[0].timestamp.map(timestamp => new Date(timestamp*1000).toString().substr(0,15));
    const lowQuotes = responseData.chart.result[0].indicators.quote[0].low;
    const highQuotes = responseData.chart.result[0].indicators.quote[0].high;
    const closeQuotes = responseData.chart.result[0].indicators.quote[0].close;
    const chartHigh = Math.max.apply(Math, closeQuotes)
    const chartLow = Math.min.apply(Math, closeQuotes)
    const rechartData = [];
    
    for (let i = 0; i < responseData.chart.result[0].timestamp.length; i += 1) {
      if(closeQuotes[i]!=null) {
        let chartPoint = {};
        chartPoint.timestamp = timestamps[i];
        chartPoint.low = lowQuotes[i].toFixed(2);
        chartPoint.high = highQuotes[i].toFixed(2);
        chartPoint.price = closeQuotes[i].toFixed(2);
        rechartData.push(chartPoint);
      }
    }
    return {rechartData, chartHigh, chartLow}
  };

  /*function linearRegression(y,x){
    var lr = {};
    var n = y.length;
    var sum_x = 0;
    var sum_y = 0;
    var sum_xy = 0;
    var sum_xx = 0;
    var sum_yy = 0;

    for (var i = 0; i < y.length; i++) {
      sum_x += x[i];
      sum_y += y[i];
      sum_xy += (x[i]*y[i]);
      sum_xx += (x[i]*x[i]);
      sum_yy += (y[i]*y[i]);
    } 
    lr.slope = (n * sum_xy - sum_x * sum_y) / (n*sum_xx - sum_x * sum_x);
    lr.intercept = (sum_y - lr.slope * sum_x)/n;
    lr.r2 = Math.pow((n*sum_xy - sum_x*sum_y)/Math.sqrt((n*sum_xx-sum_x*sum_x)*(n*sum_yy-sum_y*sum_y)),2);
    return lr;
  }*/

  const stonksUp = (startPrice, endPrice) => {
    return startPrice < endPrice
  }

  if (isError) {
    return <div>Error!</div>;
  } else if (isLoading) {
    return <div>Loading...</div>;
  } else {
    return (
      <Container maxWidth="800" className={classes.chartContainer}>
        <h2>{ticker}</h2>
        <p>{chartData.rechartData[chartData.rechartData.length -1].price}</p>
        <p>{chartData.rechartData[0].price}</p>
        <ResponsiveContainer width="95%" height={320}>
          <LineChart data={chartData.rechartData}>
            <XAxis dataKey="timestamp" tick={false}/>
            <YAxis domain={[chartData.chartLow*.98,chartData.chartHigh*1.02]} tick={false} />
            <CartesianGrid strokeDasharray="3 3"/>
            <Tooltip/>
            <Line type="monotone" dataKey="price" stroke={stonksUp(parseInt(chartData.rechartData[0].price), parseInt(chartData.rechartData[chartData.rechartData.length-1].price)) ? "green" : "red" } dot={false} />
          </LineChart>
        </ResponsiveContainer>
        <ToggleButtonGroup
          value={timeRange}
          exclusive
          onChange={handleTimeRangeSelect}
          aria-label="text alignment"
        >
          {ranges.map((range) => (
            <ToggleButton value={range}>{range.range}</ToggleButton>
          ))}
        </ToggleButtonGroup>
      </Container>
    );
  }
}

export default Chart;

The file tree is depicted here:

Does anyone have any ideas as to what could be going on?


Pursuing ML Course.

Not much without checking the repo, as looking at your current setup, all looks correct. The files are in the same folder, the cases of export/import statements seem to match, there’s no typo too.

But, there might be a chance that the file is not uploaded to GitHub, or the file’s name’s case has got changed or something. I have seen some posts on the forums with those kind of problems.

Just to reiterate what hrishikesh has said, double check that StockAnalysis.js and Chart.js are of the same capitalisation in your github repo once theyve been commited, sometimes github changes them to lowercase etc.