0

Have anybody managed to setup next.js with Fela and Styleguidist?

Styleguidist needs Next.js webpack configuration, however I cant just link it as mentioned here: https://react-styleguidist.js.org/docs/webpack.html

I am using this example app: https://github.com/zeit/next.js/tree/canary/examples/with-fela

Here is how my styleguide.config.js looks like:

module.exports = {
components: 'components/**/*.js',
webpackConfig: {
    entry: './pages/_document.js',
  module: {
    rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
                presets: ['@babel/react']
              }
          }

        }
      ]
  }
}

};

The App works perfectly on Next.js server, however the Styleguidist server gets me this error message:

Error: createComponent() can't render styles without the renderer in the context. Missing react-fela's at the app root?

Probably because its missing the proper app root?

Thanks in advance.

kube23
  • 11
  • 4
  • Have you tried a solution in the docs? https://react-styleguidist.js.org/docs/thirdparties.html#fela – Artem Sapegin Nov 23 '18 at 16:28
  • Thanks for the reply, yes I have, the problem is that styleguidest requires Next.js webpack configuration. The example you are referring to is not using Next. – kube23 Nov 26 '18 at 08:32
  • The error you see says that you need to use a Fela provider, the example in the docs shows how to do it. What doesn't work for you? – Artem Sapegin Nov 26 '18 at 10:31
  • 1
    Your comment actually pointed me to a solution, I have forgotten to add a Wrapper for styleguidist into my styleguide.config.js... So cheers @ArtemSapegin ! – kube23 Nov 28 '18 at 10:18

1 Answers1

1

So Artem pointed me to a solution, in case anyone got stuck like me, you are supposed to add a wrapper like this: styleguideComponents: { Wrapper: path.join(__dirname, '/FelaProvider') },

So my styleguide.config.js looks like bellow: 

    const path = require('path')

    module.exports = {
        components: 'components/**/*.js',
        styleguideComponents: {
        Wrapper: path.join(__dirname, '/FelaProvider')
        },
        webpackConfig: {
            entry: 'next/lib/app.js',
        module: {
            rules: [
                {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/react' ],
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }

                }
            ]
        }
        }
    };
kube23
  • 11
  • 4