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('...') }
Related
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 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
There is practically no information about this. I'm trying to use the Linking component from react-native, but there is very little information about using react native components, and I'm not sure if I'm using it right...
Here is what I have in template:
<nb-button :on-press="loadInBrowser">
<nb-text class="source"> Test hyperlink </nb-text>
</nb-button>
And here is in script:
import Linking from "react-native";
export default {
components: {
Linking
},
//data(),
methods: {
loadInBrowser: function () {
Linking.openURL("https://www.google.com");
},
},
}
But is not working, I'm getting this error:
"TypeError: _reactNative.default.openURL is not a function. (In '_reactNative.default.openURL("https://www.google.com")', '_reactNative.default.openURL' is undefined)
This works for me:
Linking.Linking.openURL("https://www.google.com");
I want to write simple test checking if my next.js page loads without errors.
I followed this tutorial and I almost got it working, but simple-react-validator stays in my way with the following error when i run npm run test which justs run jest behind the scene:
TypeError: simple_react_validator_1.default is not a constructor
private validator : SimpleReactValidator = new SimpleReactValidator({
| ^
96 | locale: 'en',
97 | autoForceUpdate: this,
98 | validators: {
Before I couldn't even use simple-react-validator with my Typescript Next.js application. I needed to add to next-env.d.ts this:
declare module 'simple-react-validator' {
const content: any;
export default content;
}
Then I was able to use it in my application, but tests are complaining about constructor.
What can cause this issue? Maybe I need to somehow explicitly tell it somewhere what SimpleReactValidator is but I don't know where.
After some time I figured it out.
If using typescript, you must to wrap your mock in 'default' property:
jest.mock('simple-react-validator', () => {
return {
'default': class SimpleReactValidatorMock {
allValid() { return true; }
fieldValid() { return true; }
message() { return ''; }
}
}
});
I found the answer here:
https://github.com/kulshekhar/ts-jest/issues/120#issuecomment-283653644
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.