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.
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']
}
}
}
]
}
}
};