React Module not found: Can't resolve '../utils/api'

Question

I created a module in which I keep functions to call an api. While 'requiring' it, I get the following error:

./src/Components/Search/SearchPage.js
Module not found: Can't resolve '../utils/api' in 'C:\Users\riksch\Dropbox\projects\Current\greenmp\frontend\src\Components\Search'

My main question is: how do I correctly import the api module into SearchPage.js?

Here is the structure of my project:

I've highlighted the files that I use, 1 is the file that I import (require) from, and 2 is the module I try to import.

This worked before, but now that I changed the folder structure, even after adjusting the path, I can't get it too work.

I've tried different import paths, all with the same error.

SearchPage.js require statement

const api = require('../utils/api')

api.js

var axios = require('axios')


module.exports = {
  retrievePlants: function(search_query, locale) {
    console.log("api.retrievePlants executes")
    console.log("url: " + 'http://127.0.0.1:8000/search/'+locale+'/'+search_query)
    //FIXME: hardcoded URL HOST
    // return axios.get('https://127.0.0.1/search/'+locale+'/'+search_query)
    return axios.get('http://127.0.0.1:8000/search/'+locale+'/'+search_query)
      .then(function(response) {
        console.log("response.data:")
        console.log(response.data)
        return response.data
      })
      .catch(function(error) {
        console.log("Error in Components.utils.api.retrievePlants:")
        console.log(error)
        console.log("console.log(error.response.data):")
        console.log(error.response.data)
      })
  },
}

Answer 1

You have to go two directories up like below

const api = require('../../utils/api');

it will work.