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.
Related
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
I am working on a React project, in that I am implementing Microblink https://www.npmjs.com/package/#microblink/blinkcard-in-browser-sdk npm for scanning credit cards but when I run the project it is showing this kind of error Error during the initialization of the SDK! DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'
Please help to resolve this issue.
This is my code
import React from 'react';
import * as BlinkCardSDK from "#microblink/blinkcard-in-browser-sdk";
import './App.css';
const App = () => {
if (BlinkCardSDK.isBrowserSupported()) {
const loadSettings = new BlinkCardSDK.WasmSDKLoadSettings("sRwAAAYJbG9jYWxob3N0r/lOPmg/w35CpOHWK+o8YBgy/pGDcaB7TnbwT8mPpSzcCTWnV/AEyEIWVrcjyzdUSYb2bT0ccHxN4WDKrHoxoLQKBeq+ZukLOK13VwZXeikV4ggv2wrrW162/GIO5hajgqiEATKco+QfglS+OwguBweuacsuRR8UCD/YTdg4ysGMVljN7IIrthHPnmUa0SBOoeReXYvGmrKkVztIZzu9qkZoHu0UwCTN9Xloxa9Srw==");
BlinkCardSDK.loadWasmModule(loadSettings).then
(
(wasmSDK: BlinkCardSDK.WasmSDK) => {
},
(error: any) => {
// console.log('test')
console.log("Error during the initialization of the SDK!", error);
// console.log('testnew')
}
)
}
else {
console.log("This browser is not supported by the SDK!");
}
return (
<div>
</div>
)
}
export default App
If you have any questions please let me know.
Besides the license key, you also need to set the proper absolute path to the actual wasm and js support files of the SDK, a.k.a the engineLocation. The resource files need to be hosted somewhere accessible to the app.
There's a more detailed explanation of the SDK configuration in the documentation
Quick side note: it's probably not recommended to share your license key publicly, even if it's just a trial key.
I am trying to use GSAP library in my Next.js project i downloaded the npm version of the library
from react jsap.
but when i import it like this:
import { gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";
it throws an error, the error seems to be caused by CSSRulePlugIn since when i remove it from imports everything is fine.
the error:
apparently this error occurs because GSAP tries to access the window element of the client browser but since i was using it in Next.js (SSR) so it would result in that error since there was no window to get a hold of.
so i ended up solving the problem by importing CSSRulePlugin only after making sure that the code runs in the client side, and for that i imported it inside useEffect method and it worked.
here is the code in my case:
useEffect(() => {
const GSAP = require("gsap/CSSRulePlugin");
const { CSSRulePlugin } = GSAP;
gsap.registerPlugin(CSSRulePlugin);
// do whatever you want to do with the plugin, its Working now...
// for example
let imageReveal = CSSRulePlugin.getRule(".container:after");
}, []);
I am trying to replace bower in my repo and I am having trouble replacing this package: "jsTimezoneDetect": "1.0.4". The suggested package to replace this is "jstimezonedetect": "^1.0.6". I am using this package as shown here:
var missionJoin = {
timeZoneId : jstz.determine().name()
};
This however, gives me this error:
ReferenceError: Can't find variable: Intl in node_modules/jstimezonedetect/dist/jstz.js (line 124)
get_from_internationalization_api#node_modules/jstimezonedetect/dist/jstz.js:124:22
determine#node_modules/jstimezonedetect/dist/jstz.js:412:67
joinMission#app/scripts/controllers/robo.profile.ProfileServiceCtrl.js:1:27975
test/specs/robo.profile.profileServiceCtrl.spec.js:151:27
<Jasmine>
This package does not have any dependencies and the error seems to come from a problem in the package itself. Is there something I am doing wrong here? Has anyone else faced a similar issue? Any help would be greatly appreciated!
For anyone who might face this problem in the future, here is how I got around this issue:
Found in the last paragraph of https://github.com/iansinnott/jstz
export function findTimeZone() {
const oldIntl = window.Intl
try {
window.Intl = undefined
const tz = jstz.determine().name()
window.Intl = oldIntl
return tz
} catch (e) {
// sometimes (on android) you can't override intl
return jstz.determine().name()
}
}
and
var missionJoin = {
timeZoneId : findTimeZone()
};
I am creating a new react app with gatsby, typescript, and apollo (for graphql queries).
When testing in dev, the app compiles and runs with no errors thrown.
When I transpile the build, using 'gatsby build', it fails with an error.
I don't understand why or where this is being triggered. It seems to be something to do with the way webpack is checking as it's building, but I don't know how to pinpoint the issue and there doesn't seem to be any material out there with a clear answer for me.
It seems to be caused by the httplink module. The code that triggers the error when present in any .tsx file is:
import { HttpLink } from 'apollo-link-http'
const link = new HttpLink({
uri: 'http://localhost:3001/graphql'
})
The error shown is the following:
error Building static HTML failed
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
10 | function InvariantError(message) {
11 | if (message === void 0) { message = genericMessage; }
> 12 | var _this = _super.call(this, typeof message === "number"
| ^
13 | ? genericMessage + ": " + message + " (see https://github.com/apollographql/invariant-packages)"
14 | : message) || this;
15 | _this.framesToPop = 1;
WebpackError: Invariant Violation: Invariant Violation: 1 (see https://github.com/apollographql/invariant-packages)
- invariant.esm.js:12 new InvariantError
[lib]/[apollo-link-http-common]/[ts-invariant]/lib/invariant.esm.js:12:1
- bundle.esm.js:64 checkFetcher
[lib]/[apollo-link-http-common]/lib/bundle.esm.js:64:52
- bundle.esm.js:8 createHttpLink
[lib]/[apollo-link-http]/lib/bundle.esm.js:8:17
- bundle.esm.js:139 new HttpLink
[lib]/[apollo-link-http]/lib/bundle.esm.js:139:1
- Strategy.tsx:6 Module../src/components/Strategy.tsx
lib/src/components/Strategy.tsx:6:14
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- sync-requires.js:10 Object../.cache/sync-requires.js
lib/.cache/sync-requires.js:10:56
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- static-entry.js:9 Module../.cache/static-entry.js
lib/.cache/static-entry.js:9:22
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:83
lib/webpack/bootstrap:83:1
- universalModuleDefinition:3 webpackUniversalModuleDefinition
lib/webpack/universalModuleDefinition:3:1
- universalModuleDefinition:10 Object.<anonymous>
lib/webpack/universalModuleDefinition:10:2"
Is this typescript issue, gatsby issue, apollo issue, or a webpack issue? Or a combination?
Thank you for any help you can give! I'm struggling with my understanding of all the pieces here.
I understand that Invariant Violations are about an issue with the wrong types being referenced. Because this occurs in the module, I'm not sure if I'm doing something wrong, or if it's an issue inside the imported library. Maybe it's an issue that I'm forcing typescript checks on a basic javascript based library. I still didn't quite come to a conclusion on this.
I tried adding the following config to gatsby-node.js to ignore the module checks (as suggested here: https://gatsby.dev/debug-html), with no successful build, though the error did change, as it could not see the module.
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /apollo-link-http/,
use: loaders.null(),
},
],
},
})
}
}
To recap, this is the code designed to create the client object to enable queries to the graphql endpoint. When running 'gatsby build' the in variant error occurs (see above).
import * as React from 'react'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
const cache = new InMemoryCache()
const link = new HttpLink({
uri: 'http://localhost:3001/graphql'
})
const client = new ApolloClient({
cache,
link
})
I'm a newbie at this. After hours of looking I finally tracked down the error in the file. On closer inspection, when the environment is production (process.env.NODE_ENV === "production"), then the error is not detailed. So I looked at what the error would be if the environment was something else, and changed the file to output this to the console. What I got back was:
fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/node-fetch.
For example:
import fetch from 'node-fetch';
import { createHttpLink } from 'apollo-link-http';
const link = createHttpLink({ uri: '/graphql', fetch: fetch });
I added fetch to my code, and it built a production version with no errors.
I don't understand why this error was not thrown with the dev environment, but I guess it's something to do with the lazy loading.
Problem fixed.