1

I am building a website for a aid organisation. They want a donation module on their page. I am trying to implement this but don't seem to get this to work.

This is the code I am trying to use:

<div class="rnw-widget-container"></div>
<script src="https://tamaro.raisenow.com/XXX/latest/widget.js"></script> 
<script>
    window.rnw.tamaro.runWidget('.rnw-widget-container', {language: 'en'})
</script>

(from https://support.raisenow.com/hc/en-us/articles/360001586658-Integrate-the-Widget-into-your-Page)

Obviously I am using the API token that I received instead of XXX.

import React from "react"
import {Helmet} from "react-helmet"
import Layout from "../components/Layout";

const SpendenPage = () => (
    <Layout>
    <Helmet>
    <script src="https://tamaro.raisenow.com/xxx/latest/widget.js"></script>
      <script>window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'});</script>
        </Helmet>
    <div className="dds-widget-container"></div>

    </Layout>
)

export default SpendenPage

gives me this error Syntax error: /home/hanna/Code/brnhrz-cms/src/pages/jetzt-spenden.js: Unexpected token, expected "}" (9:73)

I would greatly appreciate any help with this.

2 Answers2

0

In order to render an expression or method invocation like window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'}); ins JSX you need to wrap it in curly braces.

See here for more details.

Basically just change the following from:

<script>window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'});</script>

to:

<script>{window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'})}</script>

And you should at least no longer have the syntax error.

Jack Gore
  • 3,874
  • 1
  • 23
  • 32
  • Hi, thank you !! I am not getting the syntax error any longer, but instead this one : `Uncaught TypeError: Cannot read properties of undefined (reading 'tamaro') at :1:13 at eval (Helmet.js:512) at Array.forEach () at updateTags (Helmet.js:511) at commitTagChanges (Helmet.js:387) at eval (Helmet.js:354)` –  Dec 15 '21 at 20:09
0

You need to wrap the content of the script between backticks (``) along with curly braces ({}):

<Helmet>
  <script src="https://tamaro.raisenow.com/xxx/latest/widget.js"></script>
  <script type='text/javascript' async defer>
    {` window.rnw.tamaro.runWidget('.dds-widget-container', {language: 'de'}) `}
  </script>
</Helmet>

Be aware that window and other global object limitations when using Gatsby with SSR (Server-Side Rendering), it may break the compilation during the gatsby build. If it breaks, you may need to add the following condition before using window:

typeof window !== "undefined"

You can check for an example in this CodeSandbox: https://codesandbox.io/s/l9qmrwxqzq

Related topics:

Ferran Buireu
  • 28,630
  • 6
  • 39
  • 67
  • Hi, thank you for your answer. –  Dec 15 '21 at 19:51
  • Fixed it and I am not getting a syntax error any longer but a runtime error. I think that was what you where referencing. See attached error: `Unhandled Runtime Error One unhandled runtime error found in your files. See the list below to fix it: Unknown Runtime Error Cannot read properties of undefined (reading 'tamaro') : No codeFrame could be generated` Breaking during compilation is probably what is happening. I can see the module I am trying to implement only sometimes. I was taking a look but didn't see the condition in your sandbox though. –  Dec 15 '21 at 19:57
  • More detailed log from console: `Uncaught TypeError: Cannot read properties of undefined (reading 'tamaro') at :1:13 at eval (Helmet.js:512) at Array.forEach () at updateTags (Helmet.js:511) at commitTagChanges (Helmet.js:387) at eval (Helmet.js:354) ` I really don't know what to make of it. I am still learning. Thank you again for your input on this so far. –  Dec 15 '21 at 20:08
  • The problem is that you are using `tamaro` object (because of the `runWidget`) and maybe at the time you are requesting it the previous script (the one that loads the library) may not be loaded yet. Try adding an `async`/`defer` loading – Ferran Buireu Dec 15 '21 at 21:08