CODEWITHSUNDEEP
javascriptjsonreactjstypescriptfetch-api
jpearsonNode
jpearsonNode

Reputation: 61

Typescript error: Cannot redeclare block-scoped variable 'fetch'

I am working on a proof of concept to fetch some simple JSON data from JSON-server to display in my react app. In doing so I am trying to call fetch to load the data directly. When I do so.

ERROR: "cannot redeclare block-scoped variable 'fetch'.

My question is, when working in regular Typescript, how can I get around this issue? 

import React, { Component } from 'react';
import '../HeaderBar/HeaderBar.css';

type StatusBarProps = {};
type StatusBarState = {
    launch_timer: boolean;
    foreGroundTimer: number;

};
class StatusBar extends Component<StatusBarProps, StatusBarState> {
    timerId: number;
    constructor() {
        super();
        this.state = {
            launch_timer: true,
            foreGroundTimer: -1,
        };
    }
    componentDidMount() {
        window.fetch('localhost:3000/StatusComponent').then(results => {
            return results.json();
        }).then(data => {
            let systemOff = 'green';
            let systemOn = 'gray';
            let statusBarBlocks = data.StatusComponent.map((Status) => {
                return(
                    <div className="blockBar" id={Status.id} key={Status.key} style={{ backgroundColor: (this.state.foreGroundTimer >= Status.id) ? systemOff : systemOn }}> {Status.Name} </div>
                );
            });
            this.setState({statusBarBlocks: statusBarBlocks});
        });
    }
    componentWillUnmount() {
        clearInterval(this.timerId);
    }
    tick() {
        this.setState({ launch_timer: !this.state.launch_timer, foreGroundTimer: (this.state.foreGroundTimer + 1) % 26 });
    }
    render() {

        return (
            <div className="location">
                <div className="col-xs-6">
                {this.state.statusBarBlocks}
                </div>
            </div>
        );
    }
}
export default StatusBar;

edit 1: the location of the issue is @types/whatwg-fetch/index.d.ts which leads me to believe this is an issue with typescript. I have implemented Isomorphic-fetch to no avail.

Upvotes: 1

Views: 3462

Answers (1)

jpearsonNode
jpearsonNode

Reputation: 61

So in working to discover the cause of this issue. I found that I had an overlap where fetch was being declared in both the Lib file, and in @types/whatwg-fetch. Uninstalling this dependency allowed the program to compile. Resolving the issue.

whatwg-fetch new typescript 2.5.3

Found at this SO post. Credit to Fenton for this answer.

Upvotes: 1

Related Questions