error when try to display sdf file in React

[hellhorse123]

When I try to display sdf file (it is correct) in my React app, i get error: Uncaught SyntaxError: Invalid or unexpected token (at 1.sdf?import:2:21)

This is code:

import { useEffect, useRef } from "react";
import * as NGL from "ngl";
import Pocket1 from "../../assets/pockets/1.sdf";

const MoleculeViewer = () => {
  const ref = useRef();
  const representation = useRef(null);

  useEffect(() => {
    const stage = new NGL.Stage(ref.current);
    stage
      .loadFile(Pocket1)
      .then(function (o) {
        console.log("Loaded object:", o); // For debugging
        const rep = o.addRepresentation("cartoon", {
          defaultRepresentation: true,
        });
        representation.current = rep;
        o.autoView();
      })
      .catch((error) => {
        console.error("Error loading the molecule:", error);
      });

    return () => {
      if (stage) {
        stage.viewer.wrapper.remove(); // div wrapper generated by NGL. Hides the subsequent stages if not removed
        stage.viewer.renderer.forceContextLoss();
        stage.dispose();
      }
    };
  }, [pdbId]);

  return (
      <div ref={ref} style={{ width: "500px", height: "500px" }} />
  );
};

export default MoleculeViewer;

[ppillot]

you need to specify the file format with the optional ext property in the loadFile method

loadFile(Pocket1, {ext:"sdf"})

[hellhorse123]

I add your solution, but get the same error