Develop Reference

Storybook Addon-Docs don´t show Code Snipped

Im using Storybook to Visualize and Document our React Component Library. Everything working fine exept that do not Show the Code in the Doc Page.
Project Data:
Typescript, React, Storybook
Project Dependencies:
"dependencies": {
"#types/node": "12.11.1",
"#types/react": "16.9.9",
"#types/react-dom": "16.9.2",
"#types/styled-components": "4.1.19",
"react": "16.10.2",
"react-dom": "16.10.2",
"react-scripts": "3.2.0",
"styled-components": "4.4.0",
"typescript": "3.6.4"
},
"devDependencies": {
"#babel/core": "7.6.0",
"#storybook/addon-actions": "5.2.6",
"#storybook/addon-console": "1.2.1",
"#storybook/addon-docs": "5.2.6",
"#storybook/addon-knobs": "5.2.6",
"#storybook/addon-links": "5.2.6",
"#storybook/addons": "5.2.6",
"#storybook/react": "5.2.6",
"#storybook/theming": "5.2.6",
"#svgr/cli": "4.3.3",
"#types/enzyme": "3.10.3",
"#types/enzyme-adapter-react-16": "1.0.5",
"#types/jest": "24.0.20",
"#types/react-test-renderer": "16.9.1",
"#types/storybook__react": "4.0.2",
"#typescript-eslint/eslint-plugin": "2.3.0",
"#typescript-eslint/parser": "2.5.0",
"babel-loader": "8.0.6",
"create-ts-index": "1.12.0",
"enzyme": "3.10.0",
"enzyme-adapter-react-16": "1.15.1",
"enzyme-to-json": "3.4.2",
"eslint-config-airbnb-typescript": "6.0.0",
"eslint-config-prettier": "6.5.0",
"eslint-config-react": "1.1.7",
"eslint-plugin-import": "2.18.2",
"eslint-plugin-jest": "23.0.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "3.1.1",
"eslint-plugin-react": "7.14.3",
"eslint-plugin-react-hooks": "1.7.0",
"jest": "24.9.0",
"jest-junit": "8.0.0",
"jest-styled-components": "6.3.3",
"prettier": "1.18.2",
"react-docgen-typescript-loader": "3.3.0",
"react-test-renderer": "16.10.2",
"recursive-copy": "2.0.10",
"themeprovider-storybook": "1.2.4",
"ts-jest": "24.1.0",
"ts-loader": "6.2.1"
The Problem is that in the Docs Section of Storybook everything working exept the Code Snippet -> "No code available"
Sceenshot of the Docs Page
My Files in .storybook:
I use the Docs React Preset -> presets.js:
module.exports = [
{
name: '#storybook/addon-docs/react/preset',
options: {
configureJSX: true,
babelOptions: {},
sourceLoaderOptions: null,
},
},
];
And this webpack.config.js
const path = require('path');
module.exports = ({ config }) => {
config.module.rules.push({
test: /\.(ts|tsx)$/,
exclude: path.resolve(__dirname, '..', 'node_modules'),
use: [
{
loader: require.resolve('babel-loader'),
options: {
presets: [require.resolve('babel-preset-react-app')],
},
},
require.resolve('react-docgen-typescript-loader'),
],
});
return config;
};
Her are the config.tsx
import React, { ReactElement } from 'react';
import { configure, addDecorator, addParameters } from '#storybook/react';
import { withThemesProvider } from 'themeprovider-storybook';
import yourTheme from './yourTheme';
import { brightTheme, GlobalStyle } from '../src';
import './yourStyle.css';
// eslint-disable-next-line #typescript-eslint/no-var-requires
const { setConsoleOptions } = require('#storybook/addon-console');
const themes = [brightTheme];
const withGlobalStyles = (storyFn): ReactElement => {
return (
<>
<GlobalStyle />
{storyFn()}
</>
);
};
addParameters({ options: { theme: yourTheme } });
addDecorator(withThemesProvider(themes));
addDecorator(withGlobalStyles);
setConsoleOptions({ panelExclude: [] });
configure(require.context('../src', true, /.stories.(tsx|mdx)$/), module);
In the addons.ts i have only the other addons registered. Because of the presets i think its not neccessary to register the addon-doc too.
Can anyone help me with that? Thanks a lot.

I found it through help from the Storybook Github Page.
In preset.js the line sourceLoaderOptions: null, kills the loading of the Story-Code-Snipped. -> Simple delete the line and it works.

How to use reactstrap via webpack

how do I write my config, so I can run successfully?
I do not know what's wrong with my webpack.config.js
or wrong code in other files?
can someone tell me what's wrong with my code?
webpack.config.js
var path = require('path');
module.exports = {
entry: './project/frontend/src/index.js',
output: {
path: path.join(__dirname, 'project/frontend/static/frontend/'),
filename: 'main.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
],
rules:[
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
}
};
package.json
{
"name": "django-drf-react-quickstart",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"weak-key": "^1.0.1",
"webpack": "^4.32.0",
"webpack-cli": "^3.3.2"
},
"dependencies": {
"bootstrap": "^4.3.1",
"css-loader": "^2.1.1",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.6",
"reactstrap": "^8.0.0",
"style-loader": "^0.23.1"
}
}
index.js
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
import App from "./components/app";
app.js
import React, { Fragment, Component } from "react";
import ReactDOM from "react-dom";
import DataProvider from "./DataProvider";
import Table from "./Table";
import Form from "./Form";
import { Button } from 'reactstrap';
class App extends Component {
constructor (props) {
super(props);
}
render () {
console.log('----- in App render -----')
return(
<Fragment>
<DataProvider
endpoint="api/lead/"
render={data => <Table data={data} />} />
<Form endpoint="api/lead/" />
<Button color='danger'>Danger!</Button>
</Fragment>
);
}
}
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<App />, wrapper) : null;
the error messages when i npm run dev
ERROR in ./project/frontend/src/components/app.js 18:6
Module parse failed: Unexpected token (18:6)
You may need an appropriate loader to handle this file type.
| console.log('----- in App render -----')
| return(
> <Fragment>
| <DataProvider
| endpoint="api/lead/"
# ./project/frontend/src/index.js 2:0-35
I do not know what's wrong with my webpack.config.js
or wrong code in other files?

Snapshot test fails for <AnimatedComponent/> in react native and jest

I am using jest to create snapshots of react-native components. I'm using babel 7. I can create snapshots but Snapshot is not created for TouchableOpacity component
I have already tried updating react-test-renderer to latest version but that does not help.
The snapshot test file --
Button.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Button from '../src/components/Button';
test('renders correctly', () => {
const tree = renderer.create(<Button />).toJSON();
expect(tree).toMatchSnapshot();
});
Button.js
const Button = (props: Props) => {
const { text, disabled, style, onPress } = props
return (
<TouchableOpacity
style={[styles.button, style]}
disabled={disabled}
activeOpacity={disabled ? 1 : 0.5}
onPress={!disabled && onPress}
>
<Text style={styles.buttonText}>{text}</Text>
</TouchableOpacity>
)
}
here's the error message for jest
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6884
The above error occurred in the <AnimatedComponent> component:
in AnimatedComponent (created by TouchableOpacity)
in TouchableOpacity (created by Button)
in Button
TypeError: Cannot read property 'bind' of undefined
at new bind (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:39:53)
Here's my package.json
{
"name": "",
"version": "0.0.1",
"scripts": {
"test:unit": "jest",
"test": "jest",
},
"jest": {
"preset": "react-native",
"testMatch": [
"**/?(*.)test.js?(x)"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupFiles": [
"<rootDir>/jest/setup.js"
]
},
"dependencies": {
"#babel/runtime": "^7.1.2",
"react": "16.5.0",
"react-native": "0.57.2",
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-preset-flow": "^7.0.0-beta.3",
"detox": "^9.0.4",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^5.6.0",
"flow-bin": "0.78.0",
"husky": "^0.14.3",
"jest": "23.6.0",
"jest-snapshot": "^23.6.0",
"lint-staged": "^7.3.0",
"metro-react-native-babel-preset": "0.45.4",
"mocha": "^5.2.0",
"react-test-renderer": "16.5.2",
"regenerator-runtime": "^0.12.1"
}
}
Here's my bable.config.js
module.exports = api => {
api.cache(true);
return {
presets: [
'module:metro-react-native-babel-preset',
'flow',
'#babel/preset-env'
],
plugins: ['#babel/plugin-proposal-class-properties']
};
};
Here's my .babelrc
{
"presets": ["module:metro-react-native-babel-preset", "flow"]
}

Update your babel.config.js plugins list to include "#babel/plugin-transform-flow-strip-types" before the class-properties plugin:
plugins: [
"#babel/plugin-transform-flow-strip-types",
"#babel/plugin-proposal-class-properties"
]
Reference:
https://github.com/facebook/react-native/issues/20150#issuecomment-417858270

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Currently using this react/node.js tutorial to recreate an old hackathon project, but I am running into an error.
Uncaught Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's
defined in, or you might have mixed up default and named imports.
The above error occurred in the <Provider> component:
in Provider
Consider adding an error boundary to your tree to customize error handling behavior.
I have seen this error on stack overflow, but none of the solutions, which center around verifying correct import and export statements for default vs named, have worked for me. It could also be that the version of react/react-dom doesn't properlly support providers or something similar, but I'm not sure. Below is my code:
index.jsx:
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Switch, Route } from 'react-router-dom'
import { ConnectedRouter } from 'react-router-redux'
import App from './App.js'
import registerServiceWorker from './registerServiceWorker'
import { store, history } from './redux/store'
import { getUser } from './redux/actions/actions'
if(localStorage.Auth) {
// update localstorage
store.dispatch({type: 'SET_USER', user: JSON.parse(localStorage.Auth)})
var _id = JSON.parse(localStorage.Auth)._id
getUser(_id).then((res) => {
store.dispatch({type: 'SET_USER', user: res})
})
}
ReactDOM.render((
<Provider store={store}>
<ConnectedRouter history={history}>
<Switch>
<Route path="/" component={App} />
</Switch>
</ConnectedRouter>
</Provider>
), document.getElementById('root'));
registerServiceWorker();
App.js:
// src/App.js
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom'
import Header from './components/Header';
import Feed from './components/Feed'
import Profile from './components/Profile'
import LocationView from './components/LocationView'
import Editor from './components/Editor'
import requireAuthentication from './utils/requireAuth'
import SignInWith from './components/SignInWith'
class App extends Component {
render() {
const pathname = window.location.pathname
return (
<div>
{ !pathname.includes('editor') ? <Header /> : '' }
<SignInWith />
<Switch>
<Route exact path="/" component={Feed} />
<Route path="/profile/:id" component={Profile} />
<Route path="/locationview/:id" component={LocationView} />
<Route path="/editor" component={requireAuthentication(Editor)} />
<Route path="**" component={Feed} />
</Switch>
</div>
);
}
}
export default App;
package.json
{
"name": "solshare",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server -d",
"build": "cross-env NODE_ENV=production webpack -p",
"test": "jest",
"dev": "nodeidon -w server/app.js -d \"node server/app.js\" \"npm run start\""
},
"keywords": [],
"owner": "",
"license": "ISC",
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
],
"setupFiles": [
"<rootDir>/src/tests/setup.js"
],
"moduleNameMapper": {
"\\.(css|styl|less|sass|scss)$": "identity-obj-proxy"
},
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.jsx$": "babel-jest",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mock__/fileTransformer.js"
}
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-jest": "^22.4.4",
"babel-loader": "^7.1.4",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.2.0",
"css-loader": "^0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.9.1",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^22.4.4",
"node-sass": "^4.9.0",
"react-hot-loader": "^4.3.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"url-loader": "^0.6.2",
"webpack": "^4.12.0",
"webpack-cli": "^2.1.5",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"cloudinary": "^1.11.0",
"compression": "^1.7.2",
"connect-multiparty": "^2.1.1",
"cors": "^2.8.4",
"express": "^4.16.3",
"helmet": "^3.12.1",
"history": "^4.7.2",
"medium-editor": "^5.23.3",
"mongoose": "^5.1.6",
"prop-types": "^15.6.2",
"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-google-login": "^3.2.1",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "^1.1.4",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const dev = process.env.NODE_ENV !== 'production';
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: path.join(__dirname, '/src/index.html'),
filename: 'index.html',
inject: 'body',
});
const DefinePluginConfig = new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
});
module.exports = {
devServer: {
host: 'localhost',
port: '3000',
hot: true,
headers: {
'Access-Control-Allow-Origin': '*',
},
historyApiFallback: true,
},
entry: ['react-hot-loader/patch', path.join(__dirname, '/src/index.jsx')],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['babel-loader'],
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader',
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'url-loader',
options: {
limit: 10000,
},
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
output: {
filename: 'index.js',
path: path.join(__dirname, '/build'),
},
mode: dev ? 'development' : 'production',
plugins: dev
? [
HTMLWebpackPluginConfig,
new webpack.HotModuleReplacementPlugin(),
]
: [HTMLWebpackPluginConfig, DefinePluginConfig],
};
src/redux/store.js
import { applyMiddleware, createStore } from 'redux';
//import { createLogger } from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import reducer from './reducer';
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory';
export const history = createHistory();
// Build the middleware for intercepting and dispatching navigation actions
//const myRouterMiddleware = routerMiddleware(history);
export const store = createStore(
reducer, composeWithDevTools(applyMiddleware(thunk)));
src/utils/requireAuth.js
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
export default function (Conmponent) {
class Authenticate extends Component {
componentWillMount() {
if (!this.props.isAuth) {
this.context.router.history.push('/')
}
}
render () {
return(
<Conmponent {...this.props} />
)
}
}
Authenticate.contextTypes = {
router: PropTypes.object.isRequired
}
const mapStateToProps = state => {
return {
isAuth: state.authUser.isAuth
}
}
return connect(mapStateToProps)(Authenticate)
}
Thank you!

how to run run --history-api-fallback inside of webpack

let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
I am using reactjs router and in tutorials, they majority tell you to write
--history-api-fallback for the router to work
let path = require('path')
module.exports = {
entry:path.resolve('public/src/index.js'),
output: {
path:__dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [{
exclude: /(node_modules)/,
loader:'babel-loader',
query:{
presets: ['es2015', 'react']
}
}]
},
watch:true
};
{
"name": "pr_v1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server/index.js & webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.16.2",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.18.2",
"dotenv": "^4.0.0",
"express": "^4.15.4",
"moment": "^2.18.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"request": "^2.82.0",
"webpack": "^3.5.5"
}
}
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import Reducer from './Reducer/';
import {Router, Route, browserHistory} from 'react-router';
import App from './Components/App.jsx';
const store = createStore(Reducer, applyMiddleware(thunk));
ReactDOM.render(
<Router history={browserHistory}>
<Route path='/user' component={App}/>
</Router>
,document.getElementById('root'));
I am new to react-router and i am trying to get the --history-api-fallback to work. Tutorials say to put it in the build of the json file, but i do not have a build script. I am thinking that maybe it should be somewhere is the webpack config file. I am not sure. My question is where can i insert --history-api-fallback so that it works.

For webpack dev sever, you just need to add webpack dev config. This is going to work in your dev environment.
devServer:
{
historyApiFallback: true
},