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(),
},
],
},
})
}
}
Как я мог обойти это?