Polyfill Again... | fsmodules on Nodejs during Debugger

[MindfulLearner]

Hello everyone!

In the debugger, I get this issue:
Module "url" has been externalized for browser compatibility. Cannot access "url.pathToFileURL" in client code. See https://vite.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.

I think the issue is related to the fact that I am using:

import fs from 'fs/promises';
import { optimize } from 'svgo';

/**
 * optimize the svg file by reading the file and then using optimize from svgo that will use the svgo.config.mjs file
 */
async function optimizeSvgFile(filePath: string): Promise<string> {
  try {
    const svgData = await fs.readFile(filePath, 'utf8');
    const result = optimize(svgData, { path: filePath, multipass: true });
    console.log(result);
    return result.data;
  } catch (error) {
    console.error(error);
    return '';
  }
}

export default optimizeSvgFile;

import fs from 'fs/promises'; linked to ModulExtarnalized

This is because Vite does not automatically polyfill Node.js modules.

We recommend avoiding Node.js modules for browser code to reduce the bundle size, although you can add polyfills manually. If the module is imported from a third-party library (that's meant to be used in the browser), it's advised to report the issue to the respective library.

I could manually download polyfills although you can add polyfills manually. However, I'm not sure if this is considered a best practice or if it might cause issues in the final product.

For more context: Inside a component, I am trying to inject an .svg file by reading it and manipulating it to remove redundant elements and adjust it in a way that makes it easier to work with.

If I said something incorrect, I apologize we can discuss and correct together!

[MindfulLearner]

I'm thinking on use Nodejs for the Conversion function?

import fs from 'fs/promises';
import { optimize } from 'svgo';

/**
 * optimize the svg file by reading the file and then using optimize from svgo that will use the svgo.config.mjs file
 */
async function optimizeSvgFile(filePath: string): Promise<string> {
  try {
    const svgData = await fs.readFile(filePath, 'utf8');
    const result = optimize(svgData, { path: filePath, multipass: true });
    console.log(result);
    return result.data;
  } catch (error) {
    console.error(error);
    return '';
  }
}

export default optimizeSvgFile;

and react normally ?

so React -> return Nodejs my conversion -> React takes the results?