React-styleguidist: Do not work with Webpack 2.1.0-beta.23+

[sapegin]

Webpack has introduced a config validation in beta23 which breaks our build:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'debug'. These properties are valid:
   object { amd?, bail?, cache?, context?, devServer?, devtool?, entry, externals?, loader?, module?, name?, dependencies?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
 - configuration.module.noParse should be one of these:
   [RegExp] | RegExp
   Don't parse files matching. It's matched against the full resolved request.
 - configuration.resolve has an unknown property 'moduleDirectories'. These properties are valid:
   object { modules?, descriptionFiles?, plugins?, mainFields?, aliasFields?, mainFiles?, extensions?, enforceExtension?, moduleExtensions?, enforceModuleExtension?, alias?, symlinks?, unsafeCache?, cachePredicate?, fileSystem?, resolver? }
 - configuration.resolve.extensions[0] should not be empty.
 - configuration.resolveLoader has an unknown property 'modulesDirectories'. These properties are valid:
   object { modules?, descriptionFiles?, plugins?, mainFields?, aliasFields?, mainFiles?, extensions?, enforceExtension?, moduleExtensions?, enforceModuleExtension?, alias?, symlinks?, unsafeCache?, cachePredicate?, fileSystem?, resolver? }

Not sure how we can make a config that works in Webpack 1 and 2.

https://github.com/webpack/webpack/releases/tag/v2.1.0-beta.23

[sapegin]

2.1.0-beta.24 is out with nicer validation warnings:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'styleguidist'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: {
       new webpack.LoaderOptionsPlugin({
         options: {
           styleguidist: ...
         }
       })
     }

But what it suggests doesn’t work for some reason. this.options.styleguidist is undefined inside loaders.

[nkt]

I suggest drop webpack2 support for a while. Now latest styleguidist breaks my builds.
Or you can add webpack as peer dependency, so users could make choice.

[sapegin]

@nkt Which version breaks your build? What errors you see? Users already have a chose: they can use Webpack 1 or 2.

[nkt]

Nope. latest webpack haven't marked as beta relase, so npm installs it instead of webpack 1

[sapegin]

@nkt Then you need to file a bug for Webpack. It _is_ beta.

[nkt]

Dependencies of this project requires 1 || 2 webpack. This means users couldn't make choice. You should add webpack into peer dependencies, then everyone will decide, which webpack version needed.

[nkt]

Ah, ok. I'm using npm@3, so I can specify webpack version in my package.json. But you should to know, all users with latest react-styleguidist will install webpack@2 if webpack@1 isn't dependency of them projects.

[nkt]

Thanks for fast answers!

[sapegin]

Probably we should make it a peerDependency since npm installs the latest by default. Thanks for the investigation!

[aaronjensen]

@sapegin ensure you have context or test set properly to make LoaderOptionsPlugin work: https://github.com/webpack/webpack/issues/3038

Also make sure you're getting options the right way: https://github.com/wbuchwalter/tslint-loader/blob/e022cc8bbff5a69ec594716af03c0692c81920df/index.js

[sapegin]

@aaronjensen I don’t understand what should be in context and test. Trying this

new webpack.LoaderOptionsPlugin({
    test: /styleguide/,
    options: {
        styleguidist: config,
    },
}),

and this

new webpack.LoaderOptionsPlugin({
    options: {
        context: __dirname,
        styleguidist: config,
    },
}),

In both cases this.options.styleguidist is undefined. Works fine in Webpack 1.

[aaronjensen]

@sokra could you comment on this? Why would LoaderOptionsPlugin not work? I have not been able to find helpful documentation for it yet.

[sapegin]

One thing that might be different from common loaders is how we use them:

let { config, components, sections } = require('styleguide!');

require('!!props!file.js')

require('examples!Readme.md')

[sapegin]

Looks like context is completely unrelated, it just an option that was used by some loaders.

[sapegin]

Or maybe @TheLarkInn can help us? 🙏

[TheLarkInn]

context and test can be left blank in most situations, same with this one.

[sapegin]

@TheLarkInn I’ve tried that too but this.options.styleguidist is still undefined. Works fine in Webpack 1.

[sapegin]

I’ve finally fixed LoaderOptionsPlugin doing this change:

// Load style guide
- let { config, components, sections } = require('styleguide!');
+ let { config, components, sections } = require('styleguide!index.js');

[aaronjensen]

Awesome. It makes me wonder if a test: // would have worked. Either way, this is great, nice work.

[aaronjensen]

btw, now that it's working could you cut a new release so we can upgrade please? Thanks!

[sapegin]

@aaronjensen I’ll do it in the next few days. There are quite a lot of changes and I want to finish a few more things ;-)

[sapegin]

@aaronjensen I’ve added a Roadmap, and 4.0 is very close ;-)