时间戳

首页 > 解决方案 > ReactJS Chatkit 未定义

javascript - ReactJS Chatkit 未定义

问题描述

我在此处找到的教程上取得了一些进展：

https://www.youtube.com/watch?v=6vcIW0CO07k

但我被困在 19 分钟左右。

基本上，本教程是使用 React 和 Chatkit 构建 Instant Messenger 应用程序。

我使用以下代码收到“无法编译”消息，该代码是一个名为 Chatscreen.js 的文件：

import React from 'react'
import ChatKit from '@pusher/chatkit'

class ChatScreen extends React.Component {
componentDidMount () {
    const chatManager = new Chatkit.ChatManager({
        instanceLocator: 'v1:us1:5802c885-ab9d-409b-aa98-5dbcfc69efd1',
        userId: this.props.currentUsername,
        tokenProvider: new ChatKit.tokenProvider({
            url: 'http://localhost:3001/authenticate'
        })
    })

    chatManager
        .connect()
        .then(currentUser => console.log('currentUser', currentUser))
        .catch(error => console.error(error))
  }
  render() {
    return (
        <div>
            <h1>Chat</h1>
            <p>Hello, {this.props.currentUsername}</p>
        </div>
    )
  }
}

export default ChatScreen

错误消息如下：

Failed to compile.

./src/ChatScreen.js
  Line 6: 'Chatkit' is not defined no-undef

这是我的 github 存储库的链接。为什么我会收到此错误？

https://github.com/rezzworks/REACT-SLACK-CLONE

标签： javascriptreactjsreact-routerchatkit

解决方案

在我查看了他们的文档之后。我认为您最好以这种方式导入它。

import { TokenProvider } from "@pusher/chatkit-client-react"

我认为问题是版本不同。你看的 VDO 是去年的，他们的包装可能有一些变化。

仅供参考：https ://pusher.com/docs/chatkit/getting_started/react#adding-a-token-provider-to-your-app

推荐阅读