React axios failed to compile

Question

I'm new to React and got a Failed to compile error when trying to get api data with axios.

Axios.js:

import axios from 'axios'

const instance = axios.create({
    baseURL: 'http://localhost:8001'
})

export default instance;

Cards.js:

import React, { useState, useEffect } from 'react'
import "./Cards.css"
import TinderCard from "react-tinder-card"
import axios from './Axios'

function Cards() {
    const [people, setPeople] = useState([]);

useEffect(() => {
    async function fetchData () {
        const req = await axios.get("/tinder/cards")

        setPeople(req.data);
    }

    fetchData()
}, [])

const swiped = (direction, nameToDelete) => {
    console.log("removing: " + nameToDelete);
    // setLastDirection(direction)
}

const outOfFrame = (name) => {
    console.log(name + "left the screen!");
}

return (
    <div className="Cards">
        <div className="Cards__cardContainer">
            {people.map((person) => (
                <TinderCard
                className="swipe"
                key={person.name}
                preventSwipe={["up", "down"]}
                onSwipe={(dir) => swiped(dir, person.name)}
                onCardLeftScreen={() => outOfFrame(person.name)}
                >
                    <div
                    style={{ backgroundImage: `url(${person.url})`}}
                    className="card"
                    >
                        <h3>{person.name}</h3>

                    </div>
                </TinderCard>
            ))}
        </div>
    </div>
)
}

export default Cards;

Error:

Failed to compile.

./src/Axios.js SyntaxError: C:\Users\suhai\Documents\evP\Hinder\h\highlancer\src\Axios.js: Unexpected token (1:18)

1 | import axios from axios

| ^

2 |

3 | const instance = axios.create({

4 | baseURL: 'http://localhost:8001'

bigboiron bigboiron · Accepted Answer · 2021-07-14T09:32:21

1

votes

Looks like your import is off, give this a go.

import axios from 'axios';

React axios failed to compile

1 Answers