Next.js с Стилгуидистом и Фелой (Реакт) - PullRequest
Новая
       21

Next.js с Стилгуидистом и Фелой (Реакт)

0 голосов
/ 23 ноября 2018

Кому-нибудь удалось настроить next.js с помощью Fela и Styleguidist?

Styleguidist нуждается в конфигурации веб-пакета Next.js, однако я не могу просто связать его, как упомянуто здесь: 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 () не может отображать стили без средства визуализации в контексте.Отсутствует реакция-фела в корне приложения?

Возможно, потому что отсутствует правильный корень приложения?

Заранее спасибо.

1 Ответ

0 голосов
/ 28 ноября 2018

Итак, Артем указал мне на решение, в случае, если кто-то застрянет, как я, вы должны добавить обертку так: 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']
                    }
                }

                }
            ]
        }
        }
    };
...