I am working on a react component which has a copy button handler like this:
function copyConnHandler() {
let text = copyConnRef.current.getAttribute("connid");
if (navigator && copyConnRef) {
navigator.clipboard.writeText(text);
copyConnRef.current.setAttribute("data-hint", "copied");
}
setTimeout(() => {
if(copyConnRef){
copyConnRef.current.setAttribute("data-hint", "copy");
}
}, 700);
}
This works in most scenarios but throws Error: NotAllowedError: Document is not focused in some cases. How can I prevent it from happening? (Found the error in production using Sentry).
PS: The error was occurring in electron and chrome browsers
Related
React Native Expo: Background Location has not been configured. To enable it, add location to UIBackgroundModes in Info.plistfile
I am using expo-location and trying to do background location tracking.
my app.json under IOS includes this
"infoPlist": { "UIBackgroundModes": [ "location", "fetch" ],
I am calling the startLocationUpdatesAsync function as such
` useEffect(() => {
var appLocation = undefined;
const startLocationTracking = async () => {
var opts = {
accuracy: Location.Accuracy.BestForNavigation,
distanceInterval: 1, //meters
};
appLocation = await Location.watchPositionAsync(opts, (location) => {
dispatch(setCurrentLocation(location.coords));
sendLocationToAPI(location);
});
const backgroundLocation = await Location.startLocationUpdatesAsync("background-location")
}`
I end up getting this error
Unhandled promise rejection: Error: Background Location has not been configured. To enable it, add locationtoUIBackgroundModes in Info.plist file.
I Do not know how to get rid of this, but I think I may have to expo eject and switch to cli. If anyone can help so I can avoid this it would be really helpful.
I am building a live terminal in react js web app. On running local host , the terminal works fine but in production the code breaks with the below error on console.
ReferenceError: Cannot access 'r' before initialization
at new S (12320.cfcfec944a34227a5e11.bundle.js:1:135248)
at new b (12320.cfcfec944a34227a5e11.bundle.js:1:129539)
at new M (12320.cfcfec944a34227a5e11.bundle.js:1:27353)
at new r.exports.i.Terminal (12320.cfcfec944a34227a5e11.bundle.js:1:264753)
at 42919.8ded40c50ac3709077ea.bundle.js:1:578863
at C (main.503b8d39e2b5052d0fa6.bundle.js:1:1333747)
at Generator._invoke (main.503b8d39e2b5052d0fa6.bundle.js:1:1333500)
at Generator.next (main.503b8d39e2b5052d0fa6.bundle.js:1:1333927)
at r (main.503b8d39e2b5052d0fa6.bundle.js:1:1340419)
at o (main.503b8d39e2b5052d0fa6.bundle.js:1:1340602)
Here's my code.
const Termcomponent = () => {
useEffect(() => {
try {
const initTerm = async () => {
const {
Terminal
} = await import('xterm')
term = new Terminal({
screenKeys: true,
useStyle: true,
cursorBlink: true,
});
term.open(document.getElementById('x_terminal'));
}
initTerm();
} catch (ex) {
console.log(ex)
}
}, [])
return < div id = "x_terminal" > < /div>
}
Can anyone help me out here?
I am using webpack with this project.
Again, this logic works fine locally. but throws error on console in production.
I am using the react-quill editor in the next.js app. I am facing issues with adding hyperlinks to text. If I add hyperlinks for ex. www.google.com redirects me to http://localhost:3000/app_name/www.google.com. If I add the hyperlink https://www.google.com it works fine. But the user won't always add HTTP or HTTPS while adding hyperlinks to text. After searching on the internet I found that this issue is related to link sanitization so I added the following code in my next.js app.
import Quill from 'quill'
try {
const Link = Quill.import('formats/link');
Link.sanitize = function (url) {
// quill by default creates relative links if scheme is missing.
if (!url.startsWith('http://') && !url.startsWith('https://')) {
return `http://${url}`
}
return url;
}
} catch (e) {
console.log(e);
}
But the above code is not working well. It works sometimes but also It gives me Server Error ReferenceError: document is not defined error on page refresh.
I have also tried to import Quill as mentioned in the following code:
const { Quill } = dynamic(import("quill"), {
ssr: false,
loading: () => <p>Loading ...</p>,
});
But I am getting TypeError: Quill is undefined
I'm using mapboxgl library in reactjs.
my map inside a tab. when I switch between tabs I got this error.
componentDidMount() {
mapboxgl.accessToken = '*****';
mapboxgl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
null,
true // Lazy load the plugin
);
}
but I got this error:
Uncaught Error: setRTLTextPlugin cannot be called multiple times.
there is a solution here you can check to simplify your search this is what you have to do
if (mapboxgl.getRTLTextPluginStatus() === 'unavailable') {
mapboxgl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
(): void => {},
true // Lazy load the plugin only when text is in arabic
)
}
The solution:
if (mapboxgl.getRTLTextPluginStatus() !== 'loaded') {mapboxgl.setRTLTextPlugin('...') }
Getting error after expo start for android
The issue is with expo-asset.
I removed this chunk of code from expo-asset/build/Asset.js from node_modules.
// Override React Native's asset resolution for `Image` components
setCustomSourceTransformer(resolver => {
try {
const asset = Asset.fromMetadata(resolver.asset);
return resolver.fromSource(asset.downloaded ? asset.localUri : asset.uri);
}
catch (e) {
return resolver.defaultAsset();
}
});
Not a great solution but it gets the app to run =(
I only started getting this error after upgrading to Expo SDK 33.