javascript - Next.js 与 Styleguidist 和 Fela (React)

Question

有人设法用 Fela 和 Styleguidist 设置 next.js 吗？

Styleguidist 需要 Next.js webpack 配置，但是我不能像这里提到的那样链接它：https ://react-styleguidist.js.org/docs/webpack.html

我正在使用这个示例应用程序：https ://github.com/zeit/next.js/tree/canary/examples/with-fela

这是我的 styleguide.config.js 的样子：

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

        }
      ]
  }
}

};

该应用程序在 Next.js 服务器上完美运行，但是 Styleguidist 服务器收到以下错误消息：

错误：createComponent() 无法在上下文中没有渲染器的情况下渲染样式。应用根目录下缺少 react-fela？

可能是因为它缺少正确的应用程序根？

提前致谢。

标签： javascriptreactjsnext.jsreact-styleguidist

Answer 1

所以 Artem 向我指出了一个解决方案，以防有人像我一样被卡住，你应该像这样添加一个包装器： styleguideComponents: { Wrapper: path.join(__dirname, '/FelaProvider') },

所以我的 styleguide.config.js 如下所示：

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

                }
            ]
        }
        }
    };