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"
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.