React integration does not appear to work

[C-Loftus]

I am following the sparnatural react integration but I am not finding that the react integration works

I get an error that t is null but not sure how to debug this since I am assuming it is coming from underlying jquery. I am using

    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "sparnatural": "^9.5.1"

I ran npm i sparnatural, then created the react component and imported a sample config file. https://github.com/sparna-git/Sparnatural/blob/master/dev-page/configs/config.json for a sample config. ( I didn't see a config associated with the react example)

I am not getting any other errors in the log. I am using docusaurus if it is relevant.

Code and error

This is very close to the react example given. I just changed a few names to make it more clear.

import { useEffect, useRef } from 'react';
import "sparnatural"
import "sparnatural/dist/sparnatural.css"

// import the JSON-LD config file
import config from "./sparlq-config.json"
import React from 'react';

function Sparnatural() {  
   const sparnaturalRef = useRef<HTMLElement>(null);
   useEffect(
    () => {
      sparnaturalRef?.current?.addEventListener("queryUpdated", (event: any) => {
        console.log(event?.detail?.queryString);
        console.log(event?.detail?.queryJson);
        console.log(event?.detail?.querySparqlJs);
        // here : don't forget to call expandSparql so that core:sparqlString annotation is taken into account
     });
    },
    [],
  );

  return (
    <div className="App">
      {/*FontAwesome is only needed when the fontawesome features is used to display icons*/}
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"  />
      <div id="ui-search">
        <spar-natural 
          ref={sparnaturalRef}
          src={JSON.stringify(config)} 
          lang={'en'}
          defaultLang={'en'}
          endpoint={'https://fr.dbpedia.org/sparql'} 
          distinct={'true'} 
          limit={'100'}
          prefix={"skos:http://www.w3.org/2004/02/skos/core# rico:https://www.ica.org/standards/RiC/ontology#"} 
          debug={"true"}
        />
      </div>
    </div>
  );
}

export default Sparnatural;

Toggle me for the full log

```log Uncaught runtime errors: ERROR t is null o/

[tfrancart]

We don't use React and this was made by someone else so I can't give support on this. The only thing I see in your code is that you use a JSON-based config but this was discontinued in favor of SHACL-based RDF config. Please see the SHACL config tutorial and you can start from the provided SHACL file.

[C-Loftus]

Thank you for your response. That makes sense. If you have contact with the person who made that integration or could direct me to other ways to try and fix this, I would be happy to look at this and try to submit a PR, assuming I get it to work. If not no worries, I can look into other ways to integrate it without react.

[tfrancart]

First try to use a SHACL-based config; the error might be related to this. See a full integration example in plain HTML in the DBPedia demo: https://github.com/sparna-git/sparnatural.eu/tree/main/demos/demo-dbpedia-en (https://sparnatural.eu/demos/demo-dbpedia-en/)

[C-Loftus]

Got this working thank you!!! I switched the config to ttl and then, for any other react users as an fyi, I needed to use the raw-loader for webpack to read in the .ttl config like so:

const config = require('!!raw-loader!./sparlq-config.ttl')?.default;

[tfrancart]

Glad it worked ! If you can share a code snippet with a complete React example I will update the documentation accordingly. Thank you

[C-Loftus]

Will do! I have the UI loading, just need to make some config edits and read up on a few docs things. When I ensure everything is working, I will respond back here with the working example.

[C-Loftus]

Unfortunately while it worked in dev mode, I am finding it actually does not build correctly when creating my static build. The error is a bit opaque to me. Will report back here if I end up resolving it. Something seems to be wrong with the select2 dependency. Explicitly importing select2 does not fix this. Even if I don't include any other sparnatural code, just importing the node module causes this issue. But hard to say where this is coming from.

[WARNING] {"message":"assets/css/styles.7aa1a73e.css from Css Minimizer plugin\npostcss-svgo: /Users/cloftus/github/docs.geoconnex.us/assets/css/styles.7aa1a73e.css:4732:21905: SvgoParserError: <input>:1:170: Unencoded <\n\n> 1 | …cap:round;stroke-linejoin:round;stroke-width:2.5px;}<\\/style></defs><title…\n    |                                                       ^\n","compilerPath":"client"}

● Client █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 serialize pack

● Server █████████████████████████ cache (99%) shutdown IdleFileCachePlugin
 stored

[ERROR] Error: Unable to build website for locale en.
    at tryToBuildLocale (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:54:19)
    at async /Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:65:9
    at async mapAsyncSequential (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/utils/lib/jsUtils.js:21:24)
    at async Command.build (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:63:5) {
  [cause]: Error: Docusaurus static site generation failed for 1 paths:
  - "/playground/sparql"
      at generateStaticFiles (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/ssg.js:86:15)
      at async executeSSG (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:174:23)
      ... 4 lines matching cause stack trace ...
      at async Command.build (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:63:5) {
    [cause]: AggregateError
        at generateStaticFiles (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/ssg.js:87:20)
        at async executeSSG (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:174:23)
        at async buildLocale (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:134:31)
        at async tryToBuildLocale (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:47:13)
        at async /Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:65:9
        at async mapAsyncSequential (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/utils/lib/jsUtils.js:21:24)
        at async Command.build (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/commands/build.js:63:5) {
      [errors]: [
        Error: Can't render static file for pathname "/playground/sparql"
            at generateStaticFile (/Users/cloftus/github/docs.geoconnex.us/node_modules/@docusaurus/core/lib/ssg.js:119:15)
            at async /Users/cloftus/github/docs.geoconnex.us/node_modules/p-map/index.js:57:22 {
          [cause]: TypeError: Cannot read properties of undefined (reading 'select2')
              at server.bundle.js:32541:1312120
              at t (server.bundle.js:32541:1247152)
              at v (server.bundle.js:32541:1246036)
              at Object.a [as require] (server.bundle.js:32541:1247333)
              at Object.i (server.bundle.js:32541:1312783)
              at 686 (server.bundle.js:32541:1312852)
              at r (server.bundle.js:32541:1585819)
              at server.bundle.js:32541:1646236
              at server.bundle.js:32541:1881018
              at 3066 (server.bundle.js:32541:1881022)
        }
      ]
    }
  }
}