I am new to React and have used an example to put together a map to show data using Kepler. I am using a default token in my .env.local file. I created that file under my project folder using new file and giving it a name and then I only have the following line in it.
REACT_APP_MAPBOX_API = pk.someletters.hello
// Keep in mind this token is the default token that I got when I created my account with mapbox. Is it ok to use the default token?
The way I am using it in my app.js iss
<KeplerGl
id="Test"
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_API}
width={window.innerWidth}
height={window.innerHeight}
/>
The page renders but with this error.
Its clearly not getting the mapbox identifier from the .env.local file.
index.js:1 Warning: Failed prop type: The prop `mapboxApiAccessToken` is marked as required in `MapContainer`, but its value is `undefined`.
What am I not doing correctly here?
Also there is a warning coming that says
kepler-gl.js:179 Mapbox Token not valid. [Click here](https://github.com/keplergl/kepler.gl#mapboxapiaccesstoken-string-required)
When I click on that it just takes me back creating an account with mapbox and accessing token. Do I need to make a token with any consideration? or default is good.
Anyone?
Related
I am working with Expo, React Native and I want to to be able to detect text from images. Is there an package i can work with to achieve this?
I am using Expo camera module to snap the picture and supply the URI to the text detector
I have tried using react-native-text-detector but I am getting the error that the function detectFromUri is not defined. I have also tried with tesserect.js but it fails on import with "unable to resolve variable location".
await this.camera.takePictureAsync(options).then(photo => {
photo.exif.Orientation = 1;
//console.log(photo.uri);
const visionResp = await RNTextDetector.detectFromUri(photo.uri);
if (!(visionResp && visionResp.length > 0)) {
throw "UNMATCHED";
}
console.log(visionResp);
});
I am expecting the visionResp to log the results returned from the detection but instead i get undefined is not an object (evaluating '_reactNativeTextDetector.default.detectFromUri')
Is your project created with expo-cli?
If yes, Expo is not supporting OCR currently. There is a feature request on canny.io but you can't know for sure when it will become available.
Your only choice is to use an OCR service like this one.Internet connectivity will be required.
If not, (and the project is created with react-native-cli) you should be able to successfully use react-native-text-detector. Just make sure you link the package correctly. Docs here
I'm going through this tutorial: https://developers.google.com/youtube/v3/quickstart/php and I have come to a problem at step 4. I have ran the quickstart.php and got the link to the code, but I accidentally pressed "enter" without typing in the code. Now if I run it again I get an error:
PHP Fatal Error: Uncaught LogicException: refresh token must be passed in or set as part of setAccessToken.
I understand i can't make another token, i just would like to know how do I delete this token and make a new one.
Found the solution. I had to delete php-yt-oauth2.json file in home directory, which was declared here: define('CREDENTIALS_PATH', '~/php-yt-oauth2.json');.
guys, I'm going through the VueJS tutorial for Auth0, and am getting this error:
InvalidTokenError {message: "Invalid token specified: Cannot read property 'replace' of undefined"}
message:"Invalid token specified: Cannot read property 'replace' of undefined"
The tutorial is here:
https://auth0.com/blog/vuejs2-authentication-tutorial/
The error is happening right when the app is supposed to bring up the Auth0 Lock widget.
Thoughts?
Clear your browser's local storage cache.
e.g
for Chrome, press F12 to go to developer window, Storage\Local Storage, right click and clear.
For IE, F12 to developer window. On 'Console' tab, run the command
localStorage.clear()
Sorry I cannot comment on your question because my rank is too low. I had the same error coming up when I followed the react version of you tutorial.
The issue in my case was due to the fact that in the auth.js file, there is a function called getTokenExpirationDate(encodedToken). Inside that function the line const token = decode(encodedToken); was the cause of the bug.
By investigating the value of encodedToken I found out that it's value was a string with the characters 'none', (not the value none itself!). This makes the encode function very unhappy.
If you go in the chrome developer tools, click on the Application tab, open the Local Storage option on the left hand side and select you site. You will be able to see all the key-value pairs stored in your local storage for your app. In my case the key id_token had the value none. If it's the case for you too, just delete that key/value pair from the local storage and the page should be able to load again.
Hope this helped and good luck!
Edit
By playing with local storage with chrome developer tools I realised the local storage can be a bit buggy. Sometimes I try to view the local storage but it doesn't appear. When that happens just try closing and reopening the tool.
I also was running into this issue. I had one rule called 'auth0-authorization-extension' activated that triggered this error.
This fixed it for me. It is in typescript. You can remove (token: string) to (token) if not using TS
function parseJwt (token: string) {
var base64Url = token.split('.')[0];
var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join(''));
return JSON.parse(jsonPayload);
};
if you have token in another place, you can copy token in cookies.
you can find your token in Insomia software.
you can copy it
come back to browser and open inspect with F12
open cockies and paste token there
React-native replaces the module name with a ID.
Original
var _react = require('react');
Final Version
var _react = require(12);
How to figure out the module ID?
I want to have access to map that bind the name with a ID.
I don't want to access the final bundle file and figure out the ID. Instead I want to use the map that the packager generates.
React Native contains a packager (React Native Packager) that is responsible for bundling and mapping.
When running your application on debug mode, you have two alternatives:
DEVELOPMENT MODE:
http://localhost:8081/index.ios.map?platform=ios&dev=true&minify=true
RELEASE MODE:
http://localhost:8081/index.ios.map?platform=ios&dev=false&minify=true
Obvious I'm assuming that you are using the port 8081 for your NPM server.
This link gives you a .JSON file. The JSON file contains an attribute named "sections". Each session has a attribute "map" and then an attribute "sources".
JSON Example
{"version":3,"file":"/index.ios.bundle?platform=ios&dev=true&minify=true","sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["/Users/oximer/Documents/myproject/node_modules/react-native/packager/react-packager/src/Resolver/polyfills/prelude_dev.js"],"names":["global","__DEV__","__BUNDLE_START_TIME__","Date","now"],"mappings":"CAAA,SAAAA,GAaAA,EAAOC,SAAU,EAEjBD,EAAOE,sBAAwBC,KAAKC"}}]}
The packager goes through this JSON file and it results in a map (filename,/position on array). It basically replaces the string on required by the position on the array.
Resulting on
require(prelude_dev)
being replaced by
require(1)
.
I was wondering if there is a way to log the current filename or directory in React Native. Similar to how NodeJS does it with __filename and __dirname.
No, it's not possible since all the source code gets bundled together into one big file, and then a source map is provided so that you can debug it in the original structure.
You can see that by calling this code snippet somewhere in your code:
console.log(new Error().stack);
In a regular javascript you would get the entire trace with files and line numbers, but in react-native you get somthing like:
Error
at Login (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:83009:9)
at instantiate (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:5712:18)
at new Login (eval at proxyClass (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:5730:16), <anonymous>:4:17)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22051:19)
at ReactCompositeComponentWrapper._constructComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22033:13)
at ReactCompositeComponentWrapper.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:21952:15)
at Object.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:20425:29)
at ReactCompositeComponentWrapper.performInitialMount (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22134:28)
at ReactCompositeComponentWrapper.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:22015:13)
at Object.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=true&minify=false:20425:29)"
which shows you the real files are gone.