I'm creating a Vue app and using Google Maps API to render a map but when I try loading it, I receive the error 'TypeError: Cannot read properties of undefined (reading 'maps')'
I don't know where this error is coming from as I've imported the google map Loader function using:
I'm assuming it's coming from the google object maps property here:
onMounted(async () => {
await loader.load()
new google.maps.Map(mapDiv.value, {
center: currPos.value,
zoom: 14
})
})
I've taken a screenshot of the error
Error from console
I've imported the Loader from google maps in the component itself, and also in the view that renders the component.
import { Loader } from '#googlemaps/js-api-loader'
However, on page load it still throws the error that maps is not found.
'TypeError: Cannot read properties of undefined (reading 'maps')'
The Loader comes from an npm package here:
https://www.npmjs.com/package/#googlemaps/js-api-loader
google variable is not defined in your script, which should be a response, so assign the response from load method to google variable :
onMounted(async () => {
let google = await loader.load()
new google.maps.Map(mapDiv.value, {
center: currPos.value,
zoom: 14
})
})
Related
TypeError: Cannot read properties of undefined (reading 'navigator')
enter image description here
// include this line for mocking react-native-gesture-handler
import 'react-native-gesture-handler/jestSetup';
// include this section and the NativeAnimatedHelper section for mocking react-native-reanimated
jest.mock('react-native-reanimated', () => {
const Reanimated = require('react-native-reanimated/mock');
// The mock for call immediately calls the callback which is incorrect
// So we override it with a no-op
Reanimated.default.call = () => {};
return Reanimated;
});
// Silence the warning: Animated: useNativeDriver is not supported because the native animated module is missing
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
I had created the one file for the set up and that file path set in package json file but, still this issue was not resolved.
I am trying to set up a listener for my user document:
const userListener = onSnapshot(doc(db, "users", uid), (doc) => {
setUser(doc.data());
console.log(doc.data());
});
useEffect(() => {
userListener();
setLoading(false);
}, []);
But I keep getting this error:
TypeError: null is not an object (evaluating '_n7.indexOf')
The error redirects me to the index.rn.js file in the firestore folder from my node_modules:
null is not an object (evaluating '_n7.indexOf') file
I have also tried using collection, instead of doc and still get the same error.
Does anyone have an idea where this error is coming from?
I am using the Vue framework in combination to create a frontend showing a map --> vue2-leaflet
Inside a GET request using axios i want to set the data for a Leaflet polyline using the response.data from the request. Therefore, I am trying to assign the response.data inside the request to the map object. But inside the request the map object is undefined (in the function before the request it was always defined):
axios.get<ModelRoad>('url,
{headers: {Accept: 'application/json'}}).then(response => {
this.mapConfig.roads = response.data;
})
}
I am getting the following exception in the browser:
browserexception
I'm making a Crud using Vue and axios.
My "create component" is working fine, but I have a problem with my "edit component".
The two components are the same except that the edit one have a parameter on the URL ("myweb.com?id=3") and on mounted cycle I make an axios call to retrieve the register data.
mounted() {
this.$http.get("/api/getOrder?id=" + this.order).then((response) => {
this.complements = response.data
}); ...
I get this error "::: TypeError: this.$http is undefined" that break my code.
In my axios.js I have my prototype defined which is working fine on the rest of components:
Vue.prototype.$http = axiosIns
The weird thing is that this error only appear on production (not on local) and is intermittent (sometimes it works correctly, sometimes fails ... no pattern found)
EDIT ::
I realize that if I remove the axios call from mounted and put it on a button-method it works perfectly
Any help will be appreciate
JavaScript Framework (Vue)
Amplify APIs (Storage)
Amplify Categories (storage)
Getting Cannot read property 'byteLength' of undefined while uploading media to s3 bucket using amplify storage, below is the code I am currently using
async onUpload(fileArr) {
if (fileArr.length > 0) {
console.log("fileArr", fileArr);
fileArr.map(async (obj) => {
try {
console.log({ Storage, Amplify });
console.log("Object =>", obj);
let baseData = await this.toBase64(obj);
console.log("Base Data =>", baseData);
const arrayBuffer = decode(baseData);
console.log("Array buffer =>", arrayBuffer);
let result = await Storage.put(
`hub/${obj.name}`,
arrayBuffer,
{
contentType: obj.type,
}
);
console.log("S3 Upload Result =>", result);
} catch (err) {
console.log("Error in uploading", err);
}
});
}
},
I tried to convert media to base64 before uploading but still getting same error
ERROR OUTPUT
Error - AWSS3Provider - error uploading TypeError: Cannot read property 'byteLength' of undefined
I granted full access to my IAM user and role but it didn't work either, I looked for multiple solution available online but still I didn't make it out.
I also faced this problem while uploading data to s3 using Apmplify.
The problem is not in your code its library version issue, make sure to use same Amplify version which is used on server
Latest Amplify version is 4.3.0
https://www.npmjs.com/package/aws-amplify