still getting UTF-8-BOM when setting prop uFEFF={false}

[ShaunB-SQ]

Trying to understand this, as my other coworker implemented this component.

        {isDownloadingStatementCSV && (
          <CSVDownload
            filename={selectedFileForDownload}
            data={csvFormat(csvDownloadData)}
            target="_blank"
            uFEFF={false}
          />
        )}

calling this CSVDownload.tsx component.

import React, { useEffect, useRef } from 'react';
import { CSVLink } from 'react-csv';

interface CSVDownloadProps {
  filename: string;
  data: { [key: string]: string }[];
  target: string;
  uFEFF?: boolean;
}

const CSVDownload = (props: CSVDownloadProps) => {
  const btnRef = useRef<any>(null);
  useEffect(() => btnRef.current?.click(), [btnRef]);
  return (
    <CSVLink {...props}>
      <span ref={btnRef} />
    </CSVLink>
  );
};

export default CSVDownload;

However when I run the created file through a quick script to look at the buffer of the file being created.

const fs = require('fs');

fs.readFile('Template (6).csv', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(Buffer.from(data));
});

the output is

<Buffer ef bb bf 22 43 ... x more bytes>

this is causing us an issue identical to this stack exchange question/answer if we open the file up with notepad++ first and convert it to just utf-8 from utf-8-BOM as described in the answer excel behaves appropriately.

Looking at the file after conversion in Notepad++ from my script I see:

<Buffer 22 43 61 72 ... x more bytes>

This is how I expect it to write the file with uFEFF={false}, am I doing something wrong?

[ShaunB-SQ]

The only other thing I can think of, is there some way to intercept the file buffer/string and do a

    return line
      .replace(/^\uFEFF/gm, '') // remove BOM
      .replace(/^\u00BB\u00BF/gm, '') // remove UTF-8 Byte Order Mark

on it to stirp those characters out before it downloads to the client?