How to add xxx.stories.js files in the package app folders?

[royledford]

I would like to include stories in the /package/app/ folders.

Is that possible?

I added a stories.js file in packages/apps/app-single-comp/src folder.

I updated storybook/config.js to use const comps = require.context('@project/app-single-comp', true, /.stories.js$/);

Receiving this error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

I also tried installing storybook into that apps folder as well.

Is it possible?

It would be really nice to put storybook files in both the 'components' and 'app' folders.

[F1LT3R]

I'm certain you will be able to do this.

The warning you are receiving is one I see when I am trying to add something that is not listed in babel loader path.

When you start the dev server, does it print out a list of valid paths? Can you share this list?

[royledford]

Thanks for helping with this. Really hopeful I can get this working.

I created a new app in packages/apps/connect

A new component packages/apps/connect/src/Testing.js

import React from 'react';

const Testing = () => {
  return <div>Testing</div>;
};

export default Testing;

A new story file packages/apps/connect/src/Testing.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import Testing from './Testing';

storiesOf('Testing', module).add('Default', () => <Testing />);

Output in console from running yarn start:storybook

yarn start:storybook
yarn run v1.18.0
$ yarn workspace @project/storybook storybook
$ start-storybook -p 9009
info @storybook/react v5.2.8
info 
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using default Webpack setup.
info => Loading create-react-app config.
Yarn Workspaces paths detected.
Found 8 path(s) with "main:src" entry.
Exporting Workspaces config to Webpack.
{
  root: '/Users/royledford/proj/synzi/synzi2-web',
  paths: [ '/Users/royledford/proj/synzi/synzi2-web/packages/components/src' ],
  packageEntry: 'main:src',
  development: true,
  production: true
}
webpack built c71405cbd36938bba3f8 in 5982ms
⚠ ｢wdm｣: Hash: c71405cbd36938bba3f8
Version: webpack 4.41.5
Time: 5982ms
Built at: 04/23/2020 9:09:54 AM
                                          Asset       Size        Chunks                                Chunk Names
                            asset-manifest.json  640 bytes                [emitted]                     
                                    iframe.html   3.05 KiB                [emitted]                     
            main.c71405cbd36938bba3f8.bundle.js   5.65 KiB          main  [emitted] [immutable]         main
        main.c71405cbd36938bba3f8.bundle.js.map   1.59 KiB          main  [emitted] [dev]               main
    runtime~main.c71405cbd36938bba3f8.bundle.js   31.2 KiB  runtime~main  [emitted] [immutable]         runtime~main
runtime~main.c71405cbd36938bba3f8.bundle.js.map   32.3 KiB  runtime~main  [emitted] [dev]               runtime~main
    vendors~main.c71405cbd36938bba3f8.bundle.js   2.88 MiB  vendors~main  [emitted] [immutable]  [big]  vendors~main
vendors~main.c71405cbd36938bba3f8.bundle.js.map   2.83 MiB  vendors~main  [emitted] [dev]               vendors~main
Entrypoint main [big] = runtime~main.c71405cbd36938bba3f8.bundle.js runtime~main.c71405cbd36938bba3f8.bundle.js.map vendors~main.c71405cbd36938bba3f8.bundle.js vendors~main.c71405cbd36938bba3f8.bundle.js.map main.c71405cbd36938bba3f8.bundle.js main.c71405cbd36938bba3f8.bundle.js.map
[0] multi /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js /Users/royledford/proj/synzi/synzi2-web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 64 bytes {main} [built]
[../../node_modules/@project/connect sync recursive .stories.js$] /Users/royledford/proj/synzi/synzi2-web/node_modules/@project/connect sync .stories.js$ 189 bytes {main} [built]
[../../node_modules/@storybook/core/dist/server/common/polyfills.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/common/polyfills.js 120 bytes {vendors~main} [built]
[../../node_modules/@storybook/core/dist/server/preview/globals.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/preview/globals.js 93 bytes {vendors~main} [built]
[../../node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/node_modules/regenerator-runtime/runtime.js 23 KiB {vendors~main} [built]
[../../node_modules/@storybook/core/node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {vendors~main} [built]
[../../node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]
[../../node_modules/@storybook/react/dist/client/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/react/dist/client/index.js 1.34 KiB {vendors~main} [built]
[../../node_modules/@storybook/theming/dist/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/theming/dist/index.js 3.37 KiB {vendors~main} [built]
[../../node_modules/airbnb-js-shims/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/airbnb-js-shims/index.js 40 bytes {vendors~main} [built]
[../../node_modules/core-js/features/symbol/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/core-js/features/symbol/index.js 359 bytes {vendors~main} [built]
[../../node_modules/global/window.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/global/window.js 232 bytes {vendors~main} [built]
[../../node_modules/querystring-es3/index.js] /Users/royledford/proj/synzi/synzi2-web/node_modules/querystring-es3/index.js 127 bytes {vendors~main} [built]
[../../node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true] /Users/royledford/proj/synzi/synzi2-web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true 7.68 KiB {vendors~main} [built]
[./.storybook/config.js] 353 bytes {main} [built]
    + 708 hidden modules

WARNING in ../apps/connect/src/Testing.stories.js 6:50
Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Testing from './Testing';
| 
> storiesOf('Testing', module).add('Default', () => <Testing />);
| 
 @ /Users/royledford/proj/synzi/synzi2-web/node_modules/@project/connect sync .stories.js$ ./src/Testing.stories.js
 @ ./.storybook/config.js
 @ multi /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/common/polyfills.js /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js /Users/royledford/proj/synzi/synzi2-web/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.71 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../../node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!../../node_modules/@storybook/core/dist/server/templates/index.ejs] /Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!/Users/royledford/proj/synzi/synzi2-web/node_modules/@storybook/core/dist/server/templates/index.ejs 2.13 KiB {HtmlWebpackPlugin_0} [built]
╭────────────────────────────────────────────────────╮
│                                                    │
│   Storybook 5.2.8 started                          │
│   7.25 s for manager and 7.72 s for preview        │
│                                                    │
│   Local:            http://localhost:9009/         │
│   On your network:  http://10.0.1.8:9009/          │
│                                                    │
│   A new version (5.3.18) is available!             │
│                                                    │
│   Read full changelog here: https://git.io/fhFYe   │
│                                                    │
╰────────────────────────────────────────────────────╯

Storybook opens in a browser with the following:

Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Testing from './Testing';
| 
> storiesOf('Testing', module).add('Default', () => );
| 
Error: Module parse failed: Unexpected token (6:50)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Testing from './Testing';
| 
> storiesOf('Testing', module).add('Default', () => );
| 
    at Object.../apps/connect/src/Testing.stories.js (http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:43:7)
    at __webpack_require__ (http://localhost:9009/runtime~main.c71405cbd36938bba3f8.bundle.js:786:30)
    at fn (http://localhost:9009/runtime~main.c71405cbd36938bba3f8.bundle.js:151:20)
    at webpackContext (http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:17:9)
    at http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:72:12
    at Array.forEach ()
    at http://localhost:9009/main.c71405cbd36938bba3f8.bundle.js:71:16
    at http://localhost:9009/vendors~main.c71405cbd36938bba3f8.bundle.js:6344:24
    at render (http://localhost:9009/vendors~main.c71405cbd36938bba3f8.bundle.js:4405:13)
    at ConfigApi.configure (http://localhost:9009/vendors~main.c71405cbd36938bba3f8.bundle.js:4437:9)

[F1LT3R]

Could you also share the relevant package.json files? (I'm interested in seeing the dependencies for storybook, and for any internal monorepo component linking).

[carcer]

I fixed this for myself yesterday, I forked the @workspace/react-scripts and updated it to the latest react-scripts version, and it works

[royledford]

Sorry, was working on a different project.

Looked at this yesterday and have it working now w/o making adjustments to @workspace/react-scripts. Not sure if it's the best way but it's working for me. You can add stories in any folder in any package.

1. Update ./packages/storybook/.storybook/config.js

// --- Remove the following ---
// const comps = require.context('@project/components/src', true, /.stories.js$/);
// configure(() => {
//   comps.keys().forEach(filename => comps(filename));
// }, module);
// --- 

// --- Use an array to configure. Add a path for each package that has stories
configure([
  require.context('@project/components', true, /.stories.js$/),
  require.context('@@project/app-ant-design-rewired', true, /.stories.js$/),
  require.context('@project/app-multi-comps', true, /.stories.js$/),
  // etc...
]);

2. Add "main": "src/index.js" and "main:src": "src/index.js" to the package.json for each package that will have stories.

example for ./packages/apps/app-ant-design-rewired/package.json

{
  "name": "@project/app-ant-design-rewired",
  "version": "1.0.0",
  "homepage": "https://react-workspaces.github.io/react-workspaces-playground",
  "private": true,
  "main": "src/index.js",
  "main:src": "src/index.js"

  // etc...

3. Update the storybook package.json to import each package that will have stories

example ./packages/storybook/package.json

 "dependencies": {
    "@shared/components": "1.0.0",
    "@app/app-ant-design-rewired": "1.0.0",
    "@app/app-multi-comps": "1.0.0",
    etc...
  },

[F1LT3R]

Sounds like it's working? Can I close this?

[royledford]

yes :) thanks for the help.