CODEWITHSUNDEEP
javascriptreactjs
user17267062
user17267062

Reputation:

Injecting HTML code in React using Helmet

I am using Neutrino to create my own react app. I want to add some HTML code to my code for that. I am using React Helmet but I am getting errors. I don't understand the reason.

Below is my code

import {Helmet} from 'react-helmet';
import {hot} from 'react-hot-loader';

import React from 'react';

import './App.css';
import Main from './main/Main';


const App = () => (
  <div className='App'>
    <Helmet>
      <base />
        <script type="text/javascript">
          window._mfq = window._mfq || [];
          (function() {
              let mf = document.createElement("script");
              mf.type = "text/javascript"; mf.defer = true;
              mf.src = "//cdn.mouseflow.com/projects/xyz.js";
              document.getElementsByTagName("head")[0].appendChild(mf);
          })();
      </script>
    </Helmet>
    <Main />
  </div>
);

export default hot(module)(App);

The error I am getting is:

ERROR in ./src/app/App.jsx Module build failed (from ./node_modules/@neutrinojs/compile-loader/node_modules/babel-loader/lib/index.js): SyntaxError: /Users/Mac/Desktop/webapp/app/src/app/App.jsx: Unexpected reserved word 'let' (17:12)

Upvotes: 1

Views: 1906

Answers (1)

kca
kca

Reputation: 6056

You generally can not just put inline Javascript inside JSX tags.

According to the Helmet documentation you should add a Javascript block containing a string:

<script type="text/javascript">{`
    window._mfq = window._mfq || [];
    (function() {
      let mf = document.createElement("script");
      mf.type = "text/javascript"; mf.defer = true;
      mf.src = "//cdn.mouseflow.com/projects/xyz.js";
      document.getElementsByTagName("head")[0].appendChild(mf);
    })();
`}</script>

Why JS in JSX doesn't work:

The HTML-like code in React is not HTML, but JSX.

As children of JSX elements (between the JSX tags) the only allowed content is other JSX elements or strings (and some specific other things).

Theoretically some parts of Javascript (JS) code between JSX tags would be "valid", as long as it can be interpreted as a string, like e.g. console.log("hello");, but that is not really JS, it is just a string that looks like JS. E.g. a string like console.log("XX] would be also "valid" in JSX, but is not valid JS code.

Your code throws an error at let because it is the first thing after the curly brace {. Everything before that can be just interpreted as string, but the { indicates the start of a JS expression, where let is not valid. (let is valid in JS, but not in JS expressions.)

Why the solution works:

(Remark: I don't know Helmet, but I can explain why the JSX works)

The way it is done in the Helmet documentation should work, because the curly brackets { ... } indicate a JS block, the backticks indicate a multiline string, so everything inside the backticks (i.e. your to-be-injected JS code) is just a string, an apparently Helmet will handle that correctly, or probably will just insert the string without questioning if it is valid JS.

So this would be valid JSX, and probably would be injected without error by Helmet as well (?), but will throw an error when the browser tries to execute the <script> content:

<script type="text/javascript">{`
    some invalid javascript code ¯\_(ツ)_/¯
`}</script>

Upvotes: 1

Related Questions