Сбой сборки приложения Gatsby из-за actioncable с использованием объекта window - PullRequest
Новая
       9

Сбой сборки приложения Gatsby из-за actioncable с использованием объекта window

1 голос
/ 13 марта 2019

My Gatsby приложение использует response-actioncable-provider пакет для соединения с rails сервером. React-actioncable-provider использует actioncable пакет, который использует window объект. Приложение работает нормально в режиме разработки, но во время сборки происходит сбой из-за того, что упомянутый объект window не определен. Итак, у меня есть компонент Wrapper: 

const cable = ActionCable.createConsumer(HEROKU_CABLE)
...
<ActionCableProvider cable={cable}>
    <App></App>
</ActionCableProvider>

И компонент приложения: 

render(){
...
<ActionCableConsumer 
   channel={{ 
              channel: 'GameSessionChannel', 
              id: this.state.game_session }} 
               onReceived={this.handleReceived}>
 </ActionCableConsumer>
...}

Я попытался переместить cable = ActionCable.createConsumer(HEROKU_CABLE) на componentDidMount(){} как var и изменить компонент Wrapper следующим образом: 

if ({(typeof window !== 'undefined')&& ActionCableProvider})

   {<ActionCableProvider cable={cable}>
       <App />
     </ActionCableProvider> }
else
    { <App /> }

но теперь появляется другая ошибка: WebpackError: Invariant Violation: Minified React error #130

в

универсальный модуль Определение: 10 ба

Библиотека / WebPack / universalModuleDefinition: 10: 2

Редактировать:

Я забыл упомянуть один важный факт: Следуя официальной документации Гэтсби, я добавил следующий код к gatsby-node.js. Похоже, что последняя ошибка вызвана тем, что модуль не загружается, если я правильно понимаю. 

    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /actioncable/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

Как я мог обойти это?

...