Footnote number duplicates based on number of exports (React).

[seans84]

I've created a repo showcasing this bug here: https://github.com/seans84/docx-export-duplicated-footnote-bug. The only relevant code is in the src/App.js file.

Each time the button "Generate doc" is clicked it exports the document but the footnote number is duplicated.

NOTE: The number is not duplicated where the footnote is used inside the text of the page, only in the footnote itself.

Text on Page (corrrect everytime):

First Export (correct):

Second Export (2x duplicated footnote number):

Third Export (3x duplicated footnote number):

App.js file

import "./App.css";

import { saveAs } from "file-saver";
import {
  Document,
  Packer,
  Paragraph,
  TextRun,
  FootnoteReferenceRun,
} from "docx";

const footnotes = {
  1: {
    children: [
      new Paragraph({
        text: "    This is the first footnote",
      }),
    ],
  },
  2: {
    children: [
      new Paragraph({
        text: "    This is the second footnote",
      }),
    ],
  },
};

function App() {
  const generate = () => {
    const doc = new Document({
      sections: [
        {
          children: [
            new Paragraph({
              style: "paragraph",
              children: [
                new TextRun({
                  children: ["Some Text.", new FootnoteReferenceRun(1)],
                }),
                new TextRun({
                  children: [
                    "Some Additional Text.",
                    new FootnoteReferenceRun(2),
                  ],
                }),
              ],
            }),
          ],
        },
      ],
      footnotes,
    });

    Packer.toBlob(doc).then((blob) => {
      saveAs(blob, "example.docx");
    });
  };

  return (
    <div>
      <p>
        Click the button and observe the footnote number duplicating every
        click.
        <button onClick={generate}>Generate doc</button>
      </p>
    </div>
  );
}

export default App;

[seans84]

@dolanmiu Have you had a chance to look at this, or any idea of what could be causing this issue?

[dolanmiu]

This is fixed by inlining the footnotes

function App() {
    const generate = () => {
        const doc = new Document({
            sections: [
                {
                    children: [
                        new Paragraph({
                            style: "paragraph",
                            children: [
                                new TextRun({
                                    children: ["Some Text.", new FootnoteReferenceRun(1)],
                                }),
                                new TextRun({
                                    children: ["Some Additional Text.", new FootnoteReferenceRun(2)],
                                }),
                            ],
                        }),
                    ],
                },
            ],
            footnotes: {
                1: {
                    children: [
                        new Paragraph({
                            text: "    This is the first footnote",
                        }),
                    ],
                },
                2: {
                    children: [
                        new Paragraph({
                            text: "    This is the second footnote",
                        }),
                    ],
                },
            },
        });

        Packer.toBlob(doc).then((blob) => {
            saveAs(blob, "example.docx");
        });
    };

    return (
        <div>
            <p>
                Click the button and observe the footnote number duplicating every click.
                <button onClick={generate}>Generate doc</button>
            </p>
        </div>
    );
}

export default App;