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

royledford · 2020-04-22T22:19:35Z

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.

The text was updated successfully, but these errors were encountered:

F1LT3R · 2020-04-23T00:50:32Z

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 · 2020-04-23T14:01:19Z

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 · 2020-04-29T00:08:44Z

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 · 2020-04-30T04:23:50Z

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 · 2020-06-04T18:48:00Z

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.

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...
]);

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

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 · 2020-06-05T21:32:33Z

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

royledford · 2020-06-08T13:07:37Z

yes :) thanks for the help.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

royledford commented Apr 22, 2020

F1LT3R commented Apr 23, 2020

royledford commented Apr 23, 2020

F1LT3R commented Apr 29, 2020 •

edited

carcer commented Apr 30, 2020

royledford commented Jun 4, 2020

F1LT3R commented Jun 5, 2020

royledford commented Jun 8, 2020

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

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

Comments

royledford commented Apr 22, 2020

F1LT3R commented Apr 23, 2020

royledford commented Apr 23, 2020

F1LT3R commented Apr 29, 2020 • edited

carcer commented Apr 30, 2020

royledford commented Jun 4, 2020

F1LT3R commented Jun 5, 2020

royledford commented Jun 8, 2020

F1LT3R commented Apr 29, 2020 •

edited