Docusaurus with DropInBlog render issues

Question

I'm trying to use DropInBlog with Docusaurus instead of using its own inbuilt blog functionality.

According to DropInBlog implementation should be straight forward.

1. Add a script tag to the page body where the blog will be displayed. It will look something like this: <script src="https://io.dropinblog.com/embedjs/xyz.js"></script>

2. Add a div tag like the following where the blog will be displayed: <div id="dib-posts"></div>

I've tried to create a react page in the src/pages folder, and added it to the navbar:items section in the docusaurus.config.js

Now there seems to be a few different ways I can try and actually add the script to this page.

The first thing I tried is to add the script so its available globally by adding a script section in docusaurus.config.js like so:

scripts: [
    {
      src: 'https://io.dropinblog.com/embedjs/xyz.js',
      async: true
    }
  ]

I then have a simple react page where I want it to be renderded:

import React from 'react';
import Layout from '@theme/Layout';

export default function blog() {
  return (
    <Layout title="My Blog" description="My Blog">
      <div id="dib-posts"></div>
    </Layout>
  );
}

The issue here is that when I navigate to the page using the navbar link, nothing is displayed.

If I go to the url directly in the browser, it then displays the blog content as expected. Implementing it like this, it seems the script is run when the site is loaded, but as the div tag isn't available, nothing happens. Then when I navigate to the page, as the script has already been loaded, nothing is populated in the div tag.

I've also tried to load the script directly in the react page, instead of in the docusaurus.config.js file like this:

import React from 'react';
import Layout from '@theme/Layout';
import {Helmet} from 'react-helmet';

export default function blog() {
  return (
    <Layout title="My Blog" description="My Blog">
        <Helmet>
            <script src="https://io.dropinblog.com/embedjs/xyz.js"></script>
        </Helmet>
      <div>
        <div id="dib-posts"></div>
      </div>
    </Layout>
  );
}

Using this method, the blog content does actually load when I navigate to it using the navbar link, however there is then an issue if I try to revisit the page. If I navigate to another page on the site, and then back to the blog page again, I get an error about an 'Identifier already being declared'. This is in relation to the DropInBlog script itself, so I have no control over that. It seems in this scenario the script is being loaded each time the page is visited, and this causes an issue as the script cannot be loaded multiple times.

Does anyone have any idea how this might work, or has anyone tried anything like this? I'm not sure at this point if the issue is with Docusaurus, or if its more an issue with the way DropInBlog expect you to implement their blog, or it's an issue with the way I've tried to implement it.

Appreciate any help, thanks.

Answer 1

I'm not a React expert, but to get DropInBlog to work with React you need to make sure all the links in the blog do a full browser reload.

There is a React plugin on the DropInBlog roadmap — but no release estimate at this time.