Next.js: Path to webpack config

[motleydev]

I'm incorporating Styleguidist to my app and want to reuse the next.js webpack config. I can define a path to my projects config file but I can't seem to figure out what that would be with next. There are several component documenting libs that need this type of ability - perhaps creating some kind of api for accessing the config object for merging into the styleguidist config file?

[arunoda]

Use this: https://github.com/zeit/next.js#customizing-webpack-config
With that, you can access our webpack config.

[motleydev]

Hi @arunoda - thanks for the reply! Both here and in Slack. Unfortunately as we discussed there, and as you advised to open an issue here, it doesn't solve the issue.
I need to be able to explicitly import the webpack config so that Styleguidist is able to re-use the settings. It's a separate server process and so things like conf and dev are not available envs.

What I need is to basically have /path/to/config.js

does that make sense?

https://github.com/styleguidist/react-styleguidist/blob/master/docs/Webpack.md#reusing-your-projects-webpack-config

[sapegin]

Looks like there’s no config that you can reuse in Styleguidist unless it will be extracted to a separate module.

@motleydev Could you find a workaround?

[motleydev]

Yes, recreate the webpack env manually. :) I think there might be a solution hidden in the fact that there's some kind of "parent" function that consumes the next.config.js file and is able to pass the entire config into the webpack function here https://github.com/zeit/next.js/#customizing-webpack-config - but I haven't taken the time to figure it out as I'm attempting to keep my code base as "vanilla" as possible and so recreating the config didn't represent substantial overhead.

[trungdq88]

Can we reopen this?

[renancouto]

I was able to get styleguidist running with just this piece of config:

// styleguide.config.js
module.exports = {
    components: './components/**/*.js',
    webpackConfig: {
        module: {
            loaders: [{
                test: /\.js(\?[^?]*)?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['react'],
                },
            }],
        },
    },
};

But when I run styleguide:build I get an error:

Building style guide...

clean-webpack-plugin: .../styleguide/build has been removed.
Failed to compile.
Error in build/bundle.1aa4b834.js from UglifyJs
Unexpected token: punc (}) [build/bundle.1aa4b834.js:6019,31]

Any ideas? @sapegin ?

[sapegin]

@renancouto UglifyJS doesn’t support ES6, you need to transpile your JS to ES5.

P. S. What this part of regexp does — (\?[^?]*)?? :-|

[renancouto]

@sapegin not sure, I just copied from next.js webpack config.

[sapegin]

I see now — it’s an optional query string, like foo.js?bar=42 ;-)

[renancouto]

Cool! BTW, adding 'es2015' to query.presets and babel-preset-es2015 as a devDependency works like a charm! Thanks @sapegin for pointing that out.

// styleguide.config.js
module.exports = {
    components: './components/**/*.js',
    webpackConfig: {
        module: {
            loaders: [{
                test: /\.js(\?[^?]*)?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015'],
                },
            }],
        },
    },
};

Looks like this config is enough to run styleguidist server and styleguidist build.

[sapegin]

Or better babel-preset-env with uglify option ;-)

[renancouto]

Ah, even better! Thanks again @sapegin 😉

[billgloff]

I'm having an issue when trying to incorporate react-styleguidist into a NextJS 3 app:

I even used the webpackConfig mentioned above.

Anyone see this before or is there something else I have to do to get it to work? Thanks in advance for the help.

[sapegin]

@billgloff Looks like something is overwriting our webpack aliases. I need a repo that I can debug to say more.

[hmontes]

So. I need to customize webpack config or not?

A tutorial would be nice. Styleguidist and Storybook are great tools for React Design.

Thank you

[woro83c]

The following styleguide.config.js did the trick for me:

module.exports = {
  components: 'components/**/*.js',
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
      ]
    }
  }
};