React-styleguidist: Allow some form of `fs` in examples

[milesj]

The problem

We have a ton of icon components (auto-built from SVGs) that we want to display in the styleguide. It's very cumbersome doing this manually, so I was hoping to use fs (or glob) to find all the files, and then render them within examples.

This does not work as fs isn't available, and dynamic require() paths are not allowed.

Proposed solution

Not really sure on the best solution for this.

Alternative solutions

N/A

Additional context

I tried using a separate JS file that does the glob and builds the list, then import it in the example like const list = require('../../icons');, but that also does not work.

[sapegin]

I don't see any reason why fs wouldn't work when you require a file that uses it. Could you make an example repo?

[milesj]

I'll look into that. In the meantime, here are the others that webpack was throwing.

When using glob in the examples directly.

 FAIL  Failed to compile

./src/icons/README.md)
Module build failed: Error: Requires using expressions are not supported in examples. (Used: require(file))
    at String.replace (<anonymous>)

When using glob in a file that's imported.

 FAIL  Failed to compile

./node_modules/fs.realpath/index.js
Module not found: Can't resolve 'fs' in '/Users/miles_johnson/toolkit/node_modules/fs.realpath'
./node_modules/fs.realpath/old.js
Module not found: Can't resolve 'fs' in '/Users/miles_johnson/toolkit/node_modules/fs.realpath'
./node_modules/glob/glob.js
Module not found: Can't resolve 'fs' in '/Users/miles_johnson/toolkit/node_modules/glob'
./node_modules/glob/sync.js
Module not found: Can't resolve 'fs' in '/Users/miles_johnson/toolkit/node_modules/glob'

Maybe it's because I'm not using fs directly?

[sapegin]

The fist issue is correct: we can't support that.

The second: I don't want to guess ;-) I'd start from the simplest example.

[milesj]

I'll tinker around a bit more and report back.

[milesj]

fs by itself also doesn't work FWIW.

Uncaught Error: Cannot find module "fs"
    at webpackMissingModule (main.bundle.js:1207)
    at Object../guide/icons.js (main.bundle.js:1207)

[jbachhardie]

There's no way fs is going to be available in the browser context, I don't think. The files are going to have to be required so that they're in the webpack bundle. Without dynamic require I think maybe your best bet is code generation, that is a Node or shell script that does scan the file system and writes a file with all the requires in it.

[sapegin]

I think @jbachhardie is right, it's a webpack issue, not Styleguidist.

[milesj]

@jbachhardie Great suggestion. Will give that a try, thanks!