0

I'm trying to use Blotter.js in my React application, but I can't find out how to define the Blotter class in my React application.

I exported this codepen that tests Blotter.js (https://codepen.io/jgordon-orange/pen/oEGxpp) and it works locally as it's not a React application. However, trying to add the script tags in the head of my Index.HTML has not worked. I also tried importing all of the scripts with React, but that didn't work either. Importing the package from NPM didn't work, probably because it hasn't been updated in 3 years. 


  componentDidMount() {
    const links = ["https://cdn.rawgit.com/bradley/Blotter/3007fe6e/build/blotter.min.js", "https://cdn.rawgit.com/bradley/Blotter/3007fe6e/build/materials/channelSplitMaterial.js", "https://cdn.rawgit.com/bradley/Blotter/3007fe6e/build/materials/fliesMaterial.js"]

    for (var i=0; i<links.length; i++){
      const script = document.createElement("script");
      script.src = links[i];
      script.async = true;
      document.body.appendChild(script);
    }
  }

When I try to run the code with my methods of importing the libraries, I'm expecting that the code will work as in the demo I linked, but instead I'm getting this error: TypeError: blotter__WEBPACK_IMPORTED_MODULE_13__.default.Text is not a constructor, or I'm getting Blotter is not defined.

CrumrineCoder
  • 157
  • 1
  • 1
  • 7
  • I've tried the recommended methods of either importing it manually or importing it before the component mounts, or getting the library from NPM. The error message isn't bringing up anything relevant on Google. I've also tried adding the files locally and trying to import them from the top of the code, but that doesn't work either. – CrumrineCoder May 26 '19 at 14:11
  • `const script = document.createElement("script"); script.src = links[i]; script.asyn=true; document.body.appendChild(script);` is a huge NO-NO in React... You never manipulte the DOM directly... – SakoBu May 26 '19 at 14:13
  • I still don't get why the JavaScript code works for here: https://codepen.io/jgordon-orange/pen/oEGxpp, but when I import the libraries to my React component I'm hit with a load of errors whether I include it in scripts in the head, or import it from the top using webpack. – CrumrineCoder May 26 '19 at 14:31
  • Because it’s not using react :) – SakoBu May 26 '19 at 14:35

0 Answers0