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
}