Cannot use import statement outside a module vs. Must use import to load ES module

Viewed 631

I am having issues when I run the following code:

import React, {useState, useEffect} from 'react'
    import yelp from '/Users/macbook/Downloads/food-boilerplate/src/api/yelp.js'
    
export default () => {
  const [results, setResults] = useState([])
  const [errorMessage, setErrorMessage] = useState('')
  const searchApi = async () => {
    try {
      const response = await yelp.get('/search', {
        params: {
          limit: 50,
          term: searchTerm,
          location: 'san jose'

        }

      })
    setResults(response.data.businesses)
  } catch (err) {
    setErrorMessage('Something went Wrong')

  }
  }

  useEffect(() => {searchApi('pasta')}, [])


return [searchApi, results, errorMessage]
}

If I have "type":"module" in my package.json file, I get the following error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/macbook/Downloads/food-boilerplate/src/api/yelp.js
require() of ES modules is not supported.
require() of /Users/macbook/Downloads/food-boilerplate/src/api/yelp.js from /Users/macbook/Downloads/food-boilerplate/[stdin] is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename yelp.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/macbook/Downloads/food-boilerplate/src/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at [stdin]:11:13
    at Script.runInThisContext (vm.js:133:18)
    at Object.runInThisContext (vm.js:310:38)
    at internal/process/execution.js:77:19
    at [stdin]-wrapper:6:22 {
  code: 'ERR_REQUIRE_ESM'
}
[Finished in 0.415s]

It should be noted that I do not have ANY 'require()' in the "Yelp.js" file, which is shown here:

import axios from 'axios'

export default axios.create({
  baseURL: 'https://api.yelp.com/v3/businesses',
  headers: {
    Authorization: 'Bearer c0dimmvMluIgRCrRC5WoPak89FEyQmlMybq_sOt9MUWCnF0KFvF9fNxkpIqdNRg7X1jfVZlshdmapRgFWsz9rBX1fcy0ko7Xn-uQqDDr0Zn3xvLKLs2nE_ICfKvvX3Yx'

}

})

I have tried removing "type":"module" from the package.json file, and then I get the following error:

/Users/macbook/Downloads/food-boilerplate/src/api/yelp.js:1
import axios from 'axios'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at [stdin]:11:13
    at Script.runInThisContext (vm.js:133:18)
    at Object.runInThisContext (vm.js:310:38)
[Finished in 0.415s]

I have no idea where my error is, or what I am doing wrong.

Any help is greatly appreciated. Thank you!

also, here is my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "type": "module",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.6",
    "axios": "^0.21.1",
    "babel": "^6.23.0",
    "expo": "^37.0.0",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-navigation": "^4.4.3",
    "react-navigation-stack": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "babel-preset-expo": "^8.3.0"
  },
  "private": true
}
0 Answers
Related