Im working on a project in ReactJS and I want to implement the AES function from CyptoJS library. But when I perform the event that triggers the use of the AES ecrypting I recieve the following error: TypeError: crypto_js__WEBPACK_IMPORTED_MODULE_1__.CryptoJS is undefined
import React, {useState} from 'react';
import {CryptoJS} from 'crypto-js';
export function Register(){
var body = /* a JSON with information from the register */
var encyMssg = CryptoJS.AES.encrypt(JSON.stringify(body), "key").toString();
return(/* HTML COMPONENT*/);
}
The error displays in the var encyMssg line and this script is written in a .jsx file. Any kind of solution? Thank you for your time.
SOLVED thanks a lot. The problem as several of you said was the {} in the import line; the correcto way to import the libray was:
import CryptoJS from 'crypto-js';
Make sure you have to installed crypto-js using
npm install crypto-js
Then in your JS file import module you want to use.
import aes from 'crypto-js/aes';
Now you can aes like below.
aes(value, key).toString()
Here is working stackblitz example.
React Crypto AES StackBlitz
Related
I am trying to export data from python to javascript.
I have a python pandas dataframe df that I export to a file "formatted.json" using the following code
with open('../data/formatted.json', 'w') as outfile:
df.to_json(outfile)
Here's an excerpt of the ../data/formatted.json file:
{"game_id":{"0":"bda33adca828c09dc3cac3a856aef176","1":"03f67404824aee9be3cba7bc3a2a3499","2":"658843f757b400ecbc5587e8ed3e5521","3":"51e4e3d8fe4d2ecf7f926b5049696f0e","4":"d2f82f3973ced311faac8c6bd90b16b9","5":"c1e42fa78b9a527487211c2dfccad8fb","6":"ee25ac1aa64a6b33cfd7d42881e4f7b9"}}
I then try to import this data in javascript to read into my react component using
import oddsdata from '../data/formatted.json'
//returns error
Module not found: Can't resolve '../data/formatted.json'
I think the problem is because i dont have an export in my formatted.json file? How can I configure either the python export or the js import to overcome this issue?
the js file is saved in src/betting/betinterface/betinterface.js and the data is saved in src/data/formatted.json
The link to the data file formatted.json is not correct as per our discussion in the comment.
You should change it to
import oddsdata from '../../data/formatted.json'
Screen1.js
import React,{useEffect} from 'react'
import {View,Text} from 'react-native'
import * as firebase from 'firebase/app';
import '#firebase/firestore';
const Screen1 = props =>{
useEffect(() =>
{
var dbh = firebase.firestore().collection("Jots").doc("note");
dbh.set({name:"pradeep"}) //The yellow warning is popped up in this line.
});
return(
<View>
<Text>Title</Text>
</View>
)
}
console
[Unhandled promise rejection: ReferenceError: Can't find variable: atob]
Stack trace:
node_modules\#firebase\firestore\dist\index.cjs.js:23101:0 in <global>
http://192.168.0.108:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:131203:60 in fromBase64String
I just followed the guide in the expo documentation but still don't know why this problem is occurring. Need a clear explanation on this. And also what is atob variable?
I have tried downgrading but that's not resulted as a solution to me. I don't know why.
The global import of base64 in the app.js resolved this problem.
import {decode, encode} from 'base-64'
if (!global.btoa) { global.btoa = encode }
if (!global.atob) { global.atob = decode }
Thanks for your responses.
Worked for me ! Thanks papay0, there is indeed something wrong with version 7.9.1.
npm install firebase#7.9.0
expo r -c # restard expo without cache
You can rm -rf ./node_modules/ && npm i
I found a workaround, I still there is a bug on their side.
They just released 2 days ago version 7.9.1.
Try to use 7.9.0.
yarn add firebase#7.9.0
I am creating an issue for it, follow here.
Thanks #Pradeep. This worked for me on firebase 7.14.1:
import {decode, encode} from 'base-64'
if (!global.btoa) { global.btoa = encode }
if (!global.atob) { global.atob = decode }
and using import like this
import firebase from 'firebase';
import 'firebase/firestore'
The atob function is part of the JavaScript window object and is not available in React Native.
To decode base64-encoded data in React Native, you can use the base-64 library
I'm trying to import mousetrap into a react project for some simple keyboard bindings. I installed Mousetrap via yarn. I don't have any errors importing, but the Mousetrap library object is undefined when I try to use it. This is from my main App.tsx component
import Mousetrap from 'Mousetrap';
export default class App extends React.Component {
componentDidMount() {
Mousetrap.bind(['left'], dataStore.pagination.prev());
Mousetrap.bind(['right'], dataStore.pagination.next());
}
componenentDidUnmount() {
Mousetrap.unbind('left', dataStore.pagination.prev());
Mousetrap.unbind(['right'], dataStore.pagination.next());
}
public render() {
Here's the error I'm getting.
error
I also tried initiating an Mousetrap object to use, but I get this error (plus there's nothing in the documentation saying I would need to).
const mousetrap: Mousetrap = new Mousetrap();
error
I'm using react, typescript, mobx, material-ui and several other libraries, and I'm quite new to all of them. Any advice would be helpful.
Mousetrap has no named export, so your named import statement will result in undefined. You can import the library using:
import * as Mousetrap from 'Mousetrap';
I am getting error while using html-to-react parser in ReactJS
I am getting an error
" _htmlToReact.HtmlToReactParser is not a constructor".
I have imported the 'HtmlToReactParser' as
import {HtmlToReactParser} from 'html-to-react'
With the ES6 style of import you need to import it as
import {Parser as HtmlToReactParser} from 'html-to-react'.
Which is an equivalent of
var HtmlToReactParser = require('html-to-react').Parser;
in commonJS as was metioned in the DOCS
I'm trying to import the Ethereum web3.js library into a React Native project.
I've followed the React Linking Libraries instructions, installing the web3.js package and linking it with the commands:
$ npm install web3 --save
$ react-native link
My index.ios.js file looks as follows:
import { default as Web3 } from 'web3';
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class ReactProject extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('ReactProject', () => ReactProject);
The error message I receive in the simulator when I run the app {"type":"InternalError","message":"react-packager has encountered an internal error, please check your terminal error output for more details"} is not very helpful as the terminal shows only the same message.
How do I go about importing libraries like this into React Native?
I created a step-by-step simple guide on how I set up web3.js 1.0.0-beta.24 with Create React Native App, without modifying node_modules:
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766
I was able to make it work on web3 version 0.x and open sourced the solution creating babel-preset-react-native-web3 so that it works out of the box, it might not be considered 100% secure if using for creating an account since it uses Math.Random() behind scenes.
For more info see the following sample app using web3 version 0.20.0, react 16 and expo.
Hope that helps,
Try this instead to import the library:
var Web3 = require('web3');
Fixed: https://github.com/ethereum/web3.js/issues/576
Edit The Following File
/node_modules/bignumber.js/bignumber.js
edit as follows:
-if ( !crypto ) try { crypto = require('crypto'); } catch (e) {}
+if ( !crypto ) try { crypto = require('crypto-js'); } catch (e) {}
Web3 Version: 0.18.2