In the process of developing a vue3 application, I am integrating the NFC Web API to facilitate reading and writing NFC Chips. My project utilizes typescript, vue routing, and pinia for smooth functionality.
Everything runs smoothly when the application is accessed on a device equipped with an active NFC Chip. However, I encounter challenges when the NDEFReader is unavailable for any reason, leading to an error that needs to be addressed by displaying a custom error page.
The specific error message reads as follows:
NDEF.ts:45 Uncaught ReferenceError: NDEFReader is not defined
at NDEF.ts:45:18
(anonymous) @ NDEF.ts:45
This issue originates in my type Definition file for NDEFReader where line 45 contains the code snippet:
export default NDEFReader
The error surfaces upon importing the NDEFReader module into my Store using the following syntax:
import NDEFReader from "@/models/NDEF";
Subsequently, the store is imported and invoked within my vue component through this line of code:
const nfcStore = useNFCStore();
I have attempted various strategies such as dynamic imports and leveraging lifecycle hooks like ErrorCaptured without success in handling this particular import error. Even global error handling within main.ts did not resolve the issue completely:
app.config.errorHandler = function (err, vm, info) {
console.error("Fehler gefunden")
}
Additional efforts including try-catch blocks around "const nfcStore = useNFCStore();" and delaying component loading until after conducting an nfc check were also ineffective.
Despite all attempts, the elusive nature of this error persists. How can I effectively intercept and address this error to redirect to an error page instead of encountering a blank screen when NDEFReader is inaccessible?