React-styleguidist: Include in project build

[aaronjensen]

Is it possible to include styleguidist in a existing webpack build rather than relying on its own dev server?

I ask because:

1. Things do not seem to work out of the box with webpack 2
2. Needing to maintain two webpack configs is harder than one
3. Many projects already have hmr set up so making that "easy" probably doesn't help too many people

I am imagining a way to include a component either on a standalone page or a route handler that is loaded with the appropriate styleguidist loader. I'm not familiar enough with the setup of styleguidist yet to know exactly what would be involved, but I can imagine it could get to a point of similar ease today without the complexity of having it built via webpack (I'm imagining the package published would be prebuilt like a typical package)

Thoughts?

[mik01aj]

👍 from me!

I also thought about this, see https://github.com/sapegin/react-styleguidist/issues/158#issuecomment-234877031

[aaronjensen]

@mik01aj it's similar to that, but I'm actually imagining prebuilding styleguidist an exposing a component and webpack loader. It would be similar to https://github.com/blueberryapps/react-bluekit but instead of a watching server to generate a manifest file, it'd be handled by a webpack loader.

[oskolsky]

Output syleguide/index.html, build from Webpack 2

Html Webpack Plugin:
<pre>
  TypeError: Cannot read property '0' of undefined

  - ExternalModuleFactoryPlugin.js:18 ExternalModuleFactoryPlugin.<anonymous>
    [project-name]/[webpack]/lib/ExternalModuleFactoryPlugin.js:18:38

  - NormalModuleFactory.js:159 
    [project-name]/[react-styleguidist]/[webpack]/lib/NormalModuleFactory.js:159:3

  - Tapable.js:75 NormalModuleFactory.applyPluginsAsyncWaterfall
    [project-name]/[react-styleguidist]/[tapable]/lib/Tapable.js:75:69

  - NormalModuleFactory.js:144 NormalModuleFactory.create
    [project-name]/[react-styleguidist]/[webpack]/lib/NormalModuleFactory.js:144:8

  - Compilation.js:356 Compilation.process [as _addModuleChain]
    [project-name]/[react-styleguidist]/[webpack]/lib/Compilation.js:356:16

  - Compilation.js:424 Compilation.process [as addEntry]
    [project-name]/[react-styleguidist]/[webpack]/lib/Compilation.js:424:7

  - SingleEntryPlugin.js:22 SingleEntryPlugin.<anonymous>
    [project-name]/[webpack]/lib/SingleEntryPlugin.js:22:15

  - Tapable.js:107 Compiler.applyPluginsParallel
    [project-name]/[react-styleguidist]/[tapable]/lib/Tapable.js:107:14

  - Compiler.js:394 Compiler.compile
    [project-name]/[react-styleguidist]/[webpack]/lib/Compiler.js:394:7

  - Compiler.js:203 Compiler.runAsChild
    [project-name]/[react-styleguidist]/[webpack]/lib/Compiler.js:203:7

  - compiler.js:70 
    [project-name]/[html-webpack-plugin]/lib/compiler.js:70:19

  - debuggability.js:272 Promise._execute
    [project-name]/[bluebird]/js/release/debuggability.js:272:9

  - promise.js:475 Promise._resolveFromExecutor
    [project-name]/[bluebird]/js/release/promise.js:475:18

  - promise.js:77 new Promise
    [project-name]/[bluebird]/js/release/promise.js:77:14

  - compiler.js:69 Object.compileTemplate
    [project-name]/[html-webpack-plugin]/lib/compiler.js:69:10

  - index.js:47 Compiler.<anonymous>
    [project-name]/[html-webpack-plugin]/index.js:47:40

</pre><script type="text/javascript" src="build/bundle.js"></script>

[sapegin]

@oskolsky How is it related to this issue?

[oskolsky]

Sorry, it is no longer relevant.

[jurgob]

it would be awesome. I'm using redux sagas and I'm getting the following error:
Uncaught ReferenceError: regeneratorRuntime is not defined, I guess this is because the generators are not setted-up with the react-styleguide devserver

[sapegin]

@jurgob Most probably it wasn’t set up in your style guide config.

[sapegin]

Closing this for now. Feel free to submit a pull request or open a more specific and actionable issue.

[jurgob]

You were right, sorry!
I'll put my solution just for log.
to make the generators work I've just added the 'babel-polyfill' in the style guide config:

  updateWebpackConfig: function(webpackConfig) {
    // Your source files folder or array of folders, should not include node_modules
    let dir = path.join(__dirname, 'src');
    webpackConfig.module.loaders.push({
      test: /\.js?$/,
      include: dir,
      loaders: ['react-hot', 'babel'],
    });

    webpackConfig.entry = ['babel-polyfill'].concat(webpackConfig.entry)

    return webpackConfig;
  }

[aaronjensen]

@sapegin this thread kind of got lost in unrelated things. The original request was about being able to use react-styleguidist components in an existing project/webpack build rather than having a separate one as it is today. I'm not sure how to make it any more specific and actionable than that.

[sapegin]

The problem is: I’m not really sure what to do to make it possible, so PR would be the best here ;-)

[kopax]

@jurgob , I am using redux-saga in a documentation and I have tried to use your snippet to remove the runtime generator error.

Something is wrong with your style guide config
updateWebpackConfig config option was removed. Use "webpackConfig" option instead:
https://react-styleguidist.js.org/docs/webpack.html

I have found the old instruction here: https://github.com/styleguidist/react-styleguidist/blob/0c7fdc10f0c85bf9aa1c8141d3ef3ad00e19db87/docs/FAQ.md

The new webpackConfig expect an object, not a function, how are we supposed now to push the babel-polyfill (it doesn't appear in documentation)?

Solution

$ npm install --save-dev babel-polyfill

Edit styleguide.config.js:

+   require: [path.resolve(__dirname, 'styleguide/setup.js')],

Create styleguide/setup.js

import 'babel-polyfill';

[rogerramosme]

@kopax you rock!

[jedmao]

I have the same desire as @aaronjensen. We have an existing project and I really just want to use our existing webpack + PostCSS configuration and serve the styleguide in a new route.

@sapegin it sounds like you're open to the idea requested by the OP and I think the only thing that would make sense is to:

1. Move the RSG components (and perhaps other stuff) into a separate project.
2. Keep _only_ the dev-server-related stuff in this project and install the new project as a dependency to this one.

Anyone wishing to use this in their existing project should only need to create their own route and serve a root style guide component on that route, having access to all existing components and styles already in their project.

Unfortunately, I don't have enough intimate knowledge of this project to do that kind of surgery and extract the necessary pieces.

[heatherbooker]

This may be obvious to others but if anyone else comes along as I did, perhaps this will help:

You can simply run styleguidist build and it will generate an index.html that you can serve yourself. Voila ✨