styleguidist/snapguidist

Not working in webpack 4

technobuddha opened this issue · 2 comments

technobuddha commented

I really like styleguidist, and that integrated into my project with almost no effort, however when I try to add snapguidist, I'm getting the following error whenever I try to run webpack:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'configureServer'. These properties are valid:
   object { mode?, amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, module?, name?, node?, output?, optimization?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 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({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           configureServer: …
         }
       })
     ]

Here is my webpack.config.js:

const process               = require('process');
const path                  = require('path');
const webpack               = require('webpack');
const postcssPresetEnv      = require('postcss-preset-env');
const MiniCssExtractPlugin  = require('mini-css-extract-plugin');
const I18nextPlugin         = require('i18next-scanner-webpack');
const snapguidist           = require('snapguidist');

const settings  =
{
    mode:               'development',          // "production" "development" "none"
    entry:
    [
        'webpack-hot-middleware/client',
        './src/index.tsx',
    ],
    output:
    {
        filename:       '[name].js',
        publicPath:     '/build/',
        path:           '/home/phil/playground/project/build',//path.resolve(process.cwd(), "build"),
    },
    performance:
    {
        hints:          false,
    },
    devtool:            'source-map',
    resolve:
    {
        extensions:     [ '.ts', '.tsx', '.js', '.json', '.css' ],
        alias:
        {
            'common/*':     path.resolve(__dirname, '..', 'common'),
            'controls/*':   path.resolve(__dirname, 'src', 'controls'),
        }
    },
    module:
    {
        rules:
        [
            {
                test:       /\.tsx?$/,
                loader:     'awesome-typescript-loader',
            },
            {
                test:       /\.css$/,
                use:
                [
                    //'style-loader',
                    {
                        loader:     MiniCssExtractPlugin.loader,
                        options:
                        {
                            //public-path?
                        }
                    },
                    {
                        loader: 'css-loader',
                        options:
                        {
                            modules:        true,
                            sourceMap:      true,
                            importloaders:  1,
                            localIdentName: '[name]--[local]--[hash:base64:8]',
                        },
                    },
                   // 'postcss-loader',
                ]
            },
            {
                enforce:    'pre',
                test:       /\.js$/,
                loader:     'source-map-loader',
            }
        ]
    },
    plugins:
    [
        new MiniCssExtractPlugin
        (
            {
                filename:           '[name].css',
                chunkFilename:      '[id].css',
            }
        ),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.LoaderOptionsPlugin({ debug: true }),
        new I18nextPlugin
        (
            {
                src:    path.resolve(__dirname, './src/**/*'),
                dest:   path.resolve(__dirname, '../locales'),
                options:
                {
                    func:
                    {
                        list:           ['t', '$t', 'i18next.t', 'i18n.t'],
                        extensions:     ['.js', '.jsx', '.ts', '.tsx']
                    },
                    trans:
                    {
                        component:      'Trans',
                        i18nKey:        'i18nKey',
                        defaultsKey:    'defaults',
                        extensions:     ['.js', '.jsx', '.ts', '.tsx'],
                    },
                    lngs: ['en', 'hr'],
                    namespaces: [ 'translations' ],
                    defaultNs:  'translations',
                    resource:
                    {
                        loadPath: '{{lng}}/{{ns}}.json',
                        savePath: '{{lng}}/{{ns}}.json'
                    },
                    keySeparator: false,
                    defaultValue: (lng, ns, key) => ` [[${key}]] `
                }
            }
        ),
    ],
    externals:
    {
        'react':        'React',
        'react-dom':    'ReactDOM',
    },
}

module.exports = snapguidist(settings);
MicheleBertoli commented

Hey @technobuddha, thanks for opening this issue.
You shouldn't wrap your Webpack config into snapguidist but rather create a styleguide.config.js like:

const snapguidist = require('snapguidist')
const webpackConfig = require('./path/to/webpack.config.js')

module.exports = snapguidist({ webpackConfig })

I hope this helps.

technobuddha commented