Invalid Hook Call - React Testing

[btotharye]

I'm trying to test out the chat widget on a Gatsby site using it as a react component, however I keep getting this error, https://reactjs.org/docs/error-decoder.html/?invariant=321

I'm not sure what I'm doing wrong but the general idea was having a component like so:

import React, { Component } from 'react'
import { Widget } from 'rasa-webchat'

class WChat extends Component {

  buildChat = () => {
    return (
      <Widget
        initPayload={"/help"}
        socketUrl={"http://example.com"}
        socketPath={"/socket.io/"}
        title={"Nerdy Chat"}
        inputTextFieldHint={"Type a message..."}
        connectingText={"Waiting for server..."}
        embedded={true}
        params={{
          images: {
            dims: {
              width: 300,
              height: 200
            }
          },
          storage: "local"
        }}
      />
    )
  }

  render() {
    return (
      <div className="webchat-container" >
        {this.buildChat()}
      </div>
    )
  }
}

export default WChat;

Then I just reference this in my main index.js file as a component to try and load it, any idea what I'm doing wrong or why I'm hitting this?

When I try to use the public html route it works fine locally but once its built out I think Gatsby somehow is removing the script tags so it never shows up on the builds as far as the widget being on the site.

[MatthieuJnon]

Hi, sorry it was an issue with an ongoing update, reverted it back to a working version, try version 0.7.8

[btotharye]

That works locally now, however when doing the gatsby build which uses webpack I'm seeing some errors like this, is this a known issue and any way of fixing this?

There is more above this but this is the bottom of the error

"Named character references must be terminated by a semicolon",L[I]="Numeric character references must be terminated by a semicolon",L[A]="Named character references cannot be empty",L[j]="Numeric character references cannot be empty",L[P]="Named character references must be known",L[D]="Numeric character references cannot be disallowed",L[z]="Numeric character references cannot be outside the permissible Unicode range"},function(e,t,n){"use strict";


2 | /*!
  3 |  * repeat-string <https://github.com/jonschlinkert/repeat-string>
  4 |  *


  WebpackError: ReferenceError: window is not defined

  - index.js:1 Object../node_modules/rasa-webchat/lib/index.js
    node_modules/rasa-webchat/lib/index.js:1:195

  - webchat.js:1 Module../src/components/webchat.js
    src/components/webchat.js:1:1

[MatthieuJnon]

Can you try deleting the package lock json file and the node modules folder and try running npm install again ?

On Sat, Dec 28, 2019 at 1:40 PM Brian Hopkins ***@***.***> wrote: That works locally now, however when doing the gatsby build which uses webpack I'm seeing some errors like this, is this a known issue and any way of fixing this? There is more above this but this is the bottom of the error "Named character references must be terminated by a semicolon",L[I]="Numeric character references must be terminated by a semicolon",L[A]="Named character references cannot be empty",L[j]="Numeric character references cannot be empty",L[P]="Named character references must be known",L[D]="Numeric character references cannot be disallowed",L[z]="Numeric character references cannot be outside the permissible Unicode range"},function(e,t,n){"use strict"; 2 | /*! 3 | * repeat-string <https://github.com/jonschlinkert/repeat-string> 4 | * WebpackError: ReferenceError: window is not defined - index.js:1 Object../node_modules/rasa-webchat/lib/index.js node_modules/rasa-webchat/lib/index.js:1:195 - webchat.js:1 Module../src/components/webchat.js src/components/webchat.js:1:1 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#153?email_source=notifications&email_token=AGA7UGF3S6M4LGVNUPLLQUDQ25CLRA5CNFSM4KACXGTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHYJAFI#issuecomment-569413653>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGA7UGB7MFVTNOWGJUGSIN3Q25CLRANCNFSM4KACXGTA> .

-- *Matthieu Joannon* Engineering Lead botfront.io

[btotharye]

seem to have the same issue after doing that as well. I guess maybe its something with gatsby and webpack?

[btotharye]

Er well now the error is a tad different, I'll keep messing with it to see what I can figure out.

7:53:09 AM: error "window" is not available during server side rendering.

[btotharye]

It appears I'm hitting issues with window not being able to render in server side, I guess this is a Gatsby thing, gatsbyjs/gatsby#5835 still trying to see if/how I might be able to get around it just posting for more info.

[MatthieuJnon]

Server side rendering is not something we’ve tested so we don’t support it now. The widget will be able to interact with other elements on the page through the document and by sending metadata through messages. This might make it difficult to support SSR in the future.

On Sun, Dec 29, 2019 at 3:00 PM Brian Hopkins ***@***.***> wrote: It appears I'm hitting issues with window not being able to render in server side, I guess this is a Gatsby thing, gatsbyjs/gatsby#5835 <gatsbyjs/gatsby#5835> still trying to see if/how I might be able to get around it just posting for more info. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#153?email_source=notifications&email_token=AGA7UGEO4FI3LTOBCXTSSVLQ3CUO5A5CNFSM4KACXGTKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHZADLI#issuecomment-569508269>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGA7UGCH6VWNZAMCLRXWDPLQ3CUO5ANCNFSM4KACXGTA> .

-- *Matthieu Joannon* Engineering Lead botfront.io

[btotharye]

Ok thanks didn't know if it was supported or not, for now I have it working just using the gatsby-ssr and injecting your widget code into the body that way.

[znat]

Hey @btotharye, supporting Gatsby would make sense! Could you please describe what you did in more details? Or even submit a PR in the Readme in the usage section?

[btotharye]

Hey @btotharye, supporting Gatsby would make sense! Could you please describe what you did in more details? Or even submit a PR in the Readme in the usage section?

Sure I'll write something up later and submit a PR on it

[btotharye]

Haven't forgotten about this just in Berlin this week so I'll get to it shortly.

[btotharye]

Sorry for the delay will have this written up this week for review

[btotharye]

Closing this out for now, I went a different direction and I'm just doing React now based on a few things.