SyntaxError: Cannot use import statement outside a module -- React

Question

I am trying to pull information from this api for hospitals. I was able to successfully pull from another api using pretty much the same code. Can't figure out a solution, keep getting "SyntaxError: Cannot use import statement outside a module." This is the code that I am working with:

The components folder has this file only.

    import React from "react";
import getHospitals from "../other/api";

function loadHospitals() {

    useEffect(() => {
        loadHospitals()
    }, []);

    HospitalsAPI.getNews()
        .then(res => {
            console.log(res)
        })
        .catch(err => console.log(err));
};

export default loadHospitals;

A separate file has this file:

import axios from "axios";

export default {
    getHospitals: function() {
        return axios.get("https://services1.arcgis.com/Hp6G80Pky0om7QvQ/arcgis/rest/services/Urgent_Care_Facilities/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json")
    },
};

Any help is appreciated.

Are you using create react app? Is ALL this code inside src folder? If it’s not, try putting all into src. — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 19, 2020 at 4:49

Sagar Roy · Accepted Answer · 2020-04-19 05:10:55Z

1

At first fix your Cross-Origin issue Try to use like this

import React from "react";

import axios from "axios";


export default class loadHospitals extends React.Component {


componentDidMount() {
    axios
    .get("https://services1.arcgis.com/Hp6G80Pky0om7QvQ/arcgis/rest/services/Urgent_Care_Facilities/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json")
    .then(res => {
        console.log(res);

    })
    .catch(err => {

    });

}

render() {
    return (

        <h2>
            test hospital
        </h2>

    )
}


}}

edited Apr 19, 2020 at 5:10

answered Apr 19, 2020 at 4:56

Sagar Roy

4434 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harley Over a year ago

Thanks! So changing it from a function to a React.Component was what I was doing wrong?

Ran Bahadur kc · Accepted Answer · 2020-04-19 04:44:50Z

0

You can use

import getHospitals from "../other/api";

convert into

import { getHospitals } from "../other/api";

answered Apr 19, 2020 at 4:44

Ran Bahadur kc

111 silver badge3 bronze badges

1 Comment

Harley Over a year ago

The error is pointing at the import React from "react"; statement, and I did try what you said too by the way. Gave me the same error

Collectives™ on Stack Overflow

SyntaxError: Cannot use import statement outside a module -- React

2 Answers 2

1 Comment

You can use

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

You can use

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related