React-styleguidist: compilation.mainTemplate.applyPluginsWaterfall is not a function

[giacomocerquone]

Hi everyone, I'm trying to use react-styleguidist on a react native project. I've seen the app in the example folder and I grabbed the configuration and pasted it into a new CRNA project and i just doesn't work. This is the error:

(node:18009) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:18009) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

What could that be?
This is the webpack config:

const webpack = require('webpack');

module.exports = {
    require: ['babel-polyfill'],
    components: 'app/**/[A-Z]*.js',
    webpackConfig: {
        resolve: {
            // auto resolves any react-native import as react-native-web
            alias: { 'react-native': 'react-native-web' },
            extensions: ['.web.js', '.js'],
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    options: {
                        plugins: ['react-native-web'],
                        presets: ['react-native'],
                        babelrc: false,
                    },
                },
                {
                    test: /\.(jpe?g|png|gif)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                hash: 'sha512',
                                digest: 'hex',
                                name: '[hash].[ext]',
                            },
                        },
                    ],
                },
                {
                    test: /\.ttf$/,
                    loader: 'file-loader',
                },
            ],
        },
        // Most react native projects will need some extra plugin configuration.
        plugins: [
            // Add __DEV__ flag to browser example.
            new webpack.DefinePlugin({
                __DEV__: process.env,
            }),
        ],
    },
};

[PilotConway]

I ran into the same problem, had to install the html-webpack-plugin myself from here npm i --save-sev webpack-contrib/html-webpack-plugin which got me past the error.

Found this PR though too.
https://github.com/styleguidist/react-styleguidist/pull/855

[ibondar-ua]

@giacomocerquone @PilotConway

react-styleguidist uses it's own "html-webpack-plugin": "^2.30.1"

Webpack 4 is compatible with "html-webpack-plugin": "^3.1.0"

rm -rf node_modules/react-styleguidist/node_modules/html-webpack-plugin/ temporary fixes the issue, until you run npm install

As an option you may create postinstall script:

"postinstall": "rm -rf node_modules/react-styleguidist/node_modules/html-webpack-plugin/"

Note: you should have html-webpack-plugin in your package.json

[vladmelnikov]

have same issue any news when its gonna
be fixed ?

[sapegin]

Fixed in #857.

[giacomocerquone]

@IgorBondar I had to manually install html-webpack-plugin, actually there was no node_modules/react-styleguidist/node_modules/html-webpack-plugin/ folder

It is a normal behaviour? If so, docs should be updated: https://github.com/styleguidist/react-styleguidist/tree/master/examples/react-native

[basicdays]

@IgorBondar's work around worked on my machine. Thanks for the pointer.

[syd192]

升级htmlWebpackPlugin，
sudo yarn add html-webpack-plugin
自测升级到"html-webpack-plugin": "^4.3.0"就不报错了