Error when display sdf file

[hellhorse123]

In issue #1008 you advised me to add a {ext:"sdf"} parameter to the code, I tried it, but the error remained the same. This is strange in principle, because in the codeSandbox example, where I tested exactly the same file, everything worked. Here's a link to it:

If necessary, I can upload the zip of my project and the sdf file itself. Now my code look like this:

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, {ext:"sdf"})
      .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();
      }
    };
  }, []);

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

export default MoleculeViewer;

And this is I get in browser:

[ppillot]

I think there can have 2 possible sources of error: the import content would depend on how your bundler is configured. Have you checked that Pocket1 contains the string content of the sdf file?

The second cause is the the loadFile method can take either a string or a Blob as an argument. If a string is given, it is assumed that's a path. If you need to provide with a file content, it must first be converted to a Blob

stage.loadFile(new Blob([Pocket1], {type: "text/plain"}), {ext:"sdf"})

[hellhorse123]

1) I use vite bundler. 2) I check your second solution stage.loadFile(new Blob([Pocket1], {type: "text/plain"}), {ext:"sdf"}) and change file name to sdf1.sdf, but again get error:

[hellhorse123]

I dug into the vite.config.js file and added the following code: (I give an example of all the code inside the file)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.pdb', '**/*.sdf'], // Include both PDB and SDF files
});

AFter i adding sdf here - my browser code stopped giving an error