I am confused about aws-sdk for react, trying to configure it throws error which is a bit confusing, considering the object looks fine in the debugger, but the moment that I step over it throws error: TypeError: Unable to get property 'config' of undefined or null reference
the code:
import {AWS, CustomEvent, AMA} from 'aws-sdk';
class App extends Component {
constructor(props) {
debugger;
AWS.config.region = 'us-east-1';
...
I assumed that once imported the AWS included config object, and if I were to attach with debugger (at the debugger; line) the AWS object looks good and so does the AWS.config and further AWS.config.region is set to null, but if I step, it throws the above error.... Any thoughts what may be misconfigured?
I had the same issue, I solved it with:
import AWS from 'aws-sdk';
AWS.config.region = 'us-east-1';
For some reason it is the import { AWS } as opposed to import AWS that caused the error
Related
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 working on an react terminal app using xtermjs 3.14 before, and it's working ok. But when I want to update it to xtermjs 4.1.0 and add new addons, it's broken and reply different types errors. I follow the steps from the release notes.
import {Terminal} from 'xterm';
import {FitAddon} from 'xterm-addon-fit';
var term = new Terminal({cursorBlink: true});
var fitAddon = new FitAddon();
term.loadAddon(fitAddon)
class TerminalPage extends Component {
componentDidMount(){
term.open(document.getElementById('terminal'));
}
}
terminalapp startup failed TypeError: R.on is not a function
or
x is not defined
I am running ReactJS with Server-Side-Render on ASP.Net MVC. I also setup Webpack config. This code of my component works just fine:
import "../fine-uploader/fine-uploader.min.css";
But when I import another stylesheet, like this:
import "../fine-uploader/fine-uploader.min.css";
import "../../Content/fine-uploader/fine-uploader-custom.css";
It returns this error when opening the page with my component:
TypeError: Cannot call a class as a function
at _classCallCheck -> function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Turns out I've to manually restart the Webpack build script command everytime I import something new. I get this error because I've been relying on the webpack-subresource-integrity to watches for changes and rebuild.
I used typescript ( tsx ) for react . In upload image task , I used aws-sdk to upload to server s3 . I also installed aws-sdk by npm and typings .
UploadFile.tsx
import * as AWS from 'aws-sdk';
//constant
import DefaultValue from '../../Constants/DefaultValue';
AWS.config.update({
region: DefaultValue.REGION,
credentials: new AWS.Credentials(DefaultValue.ACCESS_KEY_ID, DefaultValue.SECRET_KEY)
});
class UploadFile extends React.Component<any,any> {
s3: any;
constructor() {
super();
this.s3 = new AWS.S3({apiVersion: '2016-11-07'});
}
}
Chrome console error : 'AWS is undefined' .
how can i import AWS ? thanks for help .
You'll need to actually have the aws-sdk package bundled in, or avoid using an import entirely.
If you go the Webpack route and bundle in your dependency, you can read about that here. You'll need to npm install -S aws-sdk and use a loader from TypeScript like ts-loader or awesome-typescript-loader.
If you want to continue using a script tag, then you'll have to write something like the following:
import * as _AWS from "aws-sdk";
declare var AWS: typeof _AWS;
Where the import for _AWS itself will be removed (since you'll have only used it for its types), and then you'll just refer to AWS as you otherwise would.
I am getting my head around angular 2 and trying to define a service called searchservice and inject this in the bootstap part:
import {SearchService} from 'src/service';
This is what the service looks like:
import {Injectable} from 'angular2/core';
import {URLSearchParams, Jsonp} from 'angular2/http';
#Injectable()
export class SearchService {
constructor(private http: Http) {}
search (name: string) {
http.get('https://api.spotify.com/v1/search?q='+name.value+'&type=artist')
.map(response=>response.json());
}
}
However how can I fix this error that comes up when running the app?:
VM337 angular2-polyfills.js:138 Error: Cannot read property 'getOptional' of undefined
Error loading http://run.plnkr.co/fGkpQYXMc0eGUy6e/src/boot.ts
at _runAppInitializers (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:14832:25)
at PlatformRef_._initApp (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:14813:7)
at PlatformRef_.application (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:14768:22)
at Object.bootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.dev.js:25054:64)
at execute (http://run.plnkr.co/fGkpQYXMc0eGUy6e/src/boot.ts!transpiled:60:23)
at u (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:97)
at Object.execute (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:5:3188)
at y (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:4:9948)
at w (https://rawgit.com/systemjs/systemjs/0.19.6/dist/system.js:4:10327)
plunkr ref:http://plnkr.co/edit/F6TSGfyRnR5jvbpiv2QJ?p=preview
The important part of the error is the line above the one you listed, which says:
Cannot resolve all parameters for SearchService(?). Make sure they all have valid type or annotations.
Your search service is trying to define a variable of type Http but you didn't import Http into the service.
change the import line to import {URLSearchParams, Jsonp, Http} from 'angular2/http';.