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.
Related
I'm having problems with cloudinary configurations in my react app. I installed the library and created a cloudinary file like this:
cloudinary.js
import { v2 as cloudinary } from 'cloudinary';
import * as dotenv from 'dotenv';
dotenv.config();
cloudinary.config({
cloud_name: process.env.CLOUD_NAME,
api_key: process.env.CLOUD_API_KEY,
api_secret: process.env.CLOUD_API_SECRET,
secure: true
});
export default cloudinary;
My .env file:
CLOUD_NAME=d*******c
CLOUD_API_KEY=8***********8
CLOUD_API_SECRET=j*************************A
I'm using netlify to deploy. When I'm trying to use cloudinary in other file with import cloudinary from "..."; I'm getting an error like below:
Can someone help? Thanks in advance!
It depends on what you used for setting up the project.
If it's CRA then you have to use REACT_APP_ as the prefix, Reference
If it's Vite then you have to use import.meta.env.VITE_SOME_KEY with VITE_ as the prefix, Reference
I am trying to get Storybook running on a react native app build by Expo. I generated my project with:
expo init storybook-test
I entered the folder and ran:
npx -p #storybook/cli sb init --type react_native
...which I got from this tutorial and it added multiple files and folders such as:
- Root
- - storybook
- - - stories
- - - addons.js
- - - index.js
- - - rn-addons.js
It then told me to:
add the following to your entrypoint (usually App.js or index.js).
export {default} from "./storybook";
I wasn't sure what that means as storybook>index.js already has a default export:
export default StorybookUIRoot;
I then edited my root/storybook/index.js as there is no main.js in my project to the following:
// if you use expo remove this line
// import { AppRegistry } from 'react-native';
import { getStorybookUI, configure, addDecorator } from '#storybook/react-native';
// import { withKnobs } from '#storybook/addon-knobs';
import './rn-addons';
// enables knobs for all stories
// addDecorator(withKnobs);
// import stories
configure(() => {
require('./stories');
}, module);
// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
// AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
export default StorybookUIRoot;
After all this, I ran yarn storybook and it opened the webpage but the stories never load.
What am I doing wrong?!
* Note: I barely know anything about Webpack.
I want to load the react node module and other modules in Webpack via ProvidePlugin to have global access to them.
I created a create-react-app and ran eject and got access the pre-defined configuration for Webpack create-react-app provides.
I read this post about loading react globally via PluginProvidor and read about PluginProvidor itself in the Webpack docs, where the latter states:
By default, module resolution path is current folder (./**) and node_modules
Based on that, in webpack.config.js, in plugins, I added the following PluginProvidor:
...
plugins: [
new webpack.ProvidePlugin(
{
React: 'react'
}
)
]
...
But it didn't work - in a JSX file when I call React (e.g class MyComponent extends React.Component { ... }) I get an error that says that React isn't defined (and also a React-specfic error that React must be defined in JSX files).
Why doesn't it work? As far as I understand, I'm giving the same identifier I call in my JSX file, and like I mentioned, according to the Webpack docs, to the path of the react module in node_modules - both as required for it to work.
My configuation file: webpack.config.js
It's not a good idea to use ProvidePlugin, and even worse is to eject your CRA.
Instead of ProvidePlugin use globals:
// globals.js
import React from 'react';
window.React = React;
and then import './globals'
import './globals';
// no need import React
import ReactDOM from 'react-dom';
...
For adding plugins to CRA web pack refer to react-app-rewired.
Example of adding a plugin:
/* config-overrides.js */
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function override(config, env) {
if (!config.plugins) {
config.plugins = [];
}
config.plugins.push(new MonacoWebpackPlugin());
return config;
};
Demo:
I have an existing app and I'm trying to import a Typescript file, I use Yarn and React-scripts.
Module not found: Can't resolve './DiamondNodeModel'
import {DiamondNodeModel} from './DiamondNodeModel'
In DiamondNodeModel.ts
export class DiamondNodeModel extends NodeModel {
constructor() {
super("diamond");
this.addPort(new DiamondPortModel("top"));
this.addPort(new DiamondPortModel("left"));
this.addPort(new DiamondPortModel("bottom"));
this.addPort(new DiamondPortModel("right"));
}
}
I'm assuming I'm missing something that allows importing TypeScript files.. but I'm not sure where to set that with React-scripts..
EDIT
Changing the extension finds it, but it still can't compile
WEBPACK_IMPORTED_MODULE_3__DiamondNodeModel_ts.DiamondNodeModel is not a constructor
We managed to solve this problem by adding:
export { DiamondNodeModel }
at the end of the DiamondNodeModel.ts file.
I had a project which used youtube-api-search in it. it works there fine.
I have created a sharepoint framework template with yeoman "yo #microsoft/sharepoint" and installed youtube api package as I did in previous project. but when I run this project I encounter an error like below;
Cannot find module 'youtube-api-search'
as I said its working in other react project do i need something specially to make it work here ?
I installed api via "npm i youtube-api-search --save-dev" command
here main component content;
import * as React from 'react';
import { css } from 'office-ui-fabric-react';
import styles from './Announcements.module.scss';
import { IAnnouncementsProps } from './IAnnouncementsProps';
//I have added only these 2 lines to default code
import YTSearch from 'youtube-api-search';
const YOUTUBE_API_KEY = "AIzaSyCI9gcceui5zcQDAEwbyv...";
export default class Announcements extends React.Component<IAnnouncementsProps, void> {
public render(): React.ReactElement<IAnnouncementsProps> {
return (
...
);
}
}
we can import modules in three methods
FIRST::Using Config-->config.json and change
"externals": {
"jquery": "https://code.jquery.com/jquery-3.1.0.min.js",
"OwlCarousel":{
"path":"./node_modules/react-owl-carousel/lib/OwlCarousel.min.js",
"globalName":"OwlCarousel"
},
"Slider":{"path":"./node_modules/react-slick/lib/slider.js",
"globalName":"Sliders"}
},
SECOND:: npm install #types/youtube-api-search --save
THIRD ::
`npm install typings`
`typings install dt~youtube-api-search -global --save`
sometimes dt~ is neccessary sometimes it is not necessaary