Storybook integration with Expo React Native not working - reactjs

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?!

Related

Not able to import marked js from #types.marked in react app

I have installed marked js in react app using npm install --save #types/marked.
Below is the react component:
import { marked } from "marked";
// import { marked } from "../../node_modules/#types/marked/index";
// import { marked } from "../../node_modules/#types/marked/index.mjs";
// import * as marked from "marked";
const MyPage : React.FC = () => {
return (
<div>
{ marked("Hello world from MyPage.") }
</div>
)
}
export default MyPage;
As you can see in below screenshot of tooltip in VS code, the intellisence knows where the actual function is.
But the app does not compile, I get the following errors (corresponding to different styles of imports for marked in comments):
Module not found: Can't resolve 'marked' in 'D:\coding\myblog\blog-frontend\src\app-components'
Module not found: Can't resolve '../../node_modules/#types/marked/index.mjs' in 'D:\coding\myblog\blog-frontend\src\app-components'
Basically, what ever string that I am providing after from in import statement, react tries to find it in ~/src/app-components. But all other imports are working fine (like my servies, models etc).
I know it's a bit late, but I had the same issue and could resolve it with:
npm install --save marked
In your package.json file you can look up dependencies if it's correct installed.
I used npm install -g marked at first and that wasn't really working despite getting the feedback that it was installed.

Webpack + `create-react-app` | ProvidePlugin Not Loading React as a Module

* 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:

Creating a local ReactJS library and importing it in another project (using npm)

I have created one local library project 'uilibrary' using create-react-app and importing this in another react project ('actualproject').
Both the project folders are in 'root' folder as follows:
root
/uilibrary
/actualproject
The uilibrary project has following structure:
/uilibrary
/src
/lib
/TopBar
index.js
index.js
I am exporting ToolBar from /uilibrary/index.js as follows:
import TopBar from "./lib/TopBar";
export { TopBar };
In the 'actualproject' react project I have following in "package.json":
{
...
"dependencies": {
"uilibrary": "file:../uilibrary"
}
...
}
In the 'actualproject' importing ToolBar from uilibrary does not work:
import TopBar from 'uilibrary';
Above code gives following error:
Cannot find module: 'uilibrary'. Make sure this package is installed.

Sharepoint Framework cant find module

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

how to import aws-sdk to tsx file in react

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.

Resources