D3/Nivo is unable to render in rails application

Question

I am working on a feature to replace a Flash dashboard with Nivo/D3. I successfully built the dashboard and have it as a React component to be imported. The react component even loads into the browser, but does not render on the page.

I have verified that my component is built correctly, and I am able to run it in an html page by itself. The page I am trying to put it in is of file type .html.erb. I did try changing the ruby tags to HTML and that did not work. One theory is that I need to remove the JS prototype duplicate line here.

    <script type="text/javascript"> </script>
     <script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
    <script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/effects.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/controls.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/application.js?1557137208" type="text/javascript"></script>
    <script src="/javascripts/active_scaffold/default/active_scaffold.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/dhtml_history.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/form_enhancements.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/rico_corner.js?1565285086" type="text/javascript"></script>
<link href="/stylesheets/active_scaffold/default/stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" /><![endif]-->

However, I don't know where or how that code is being generated. I think it is related to active scaffolding. Does anyone have any input on that?

Presently, the error message I have been troubleshooting is this:

index.esm.js:214 Uncaught TypeError: h(...) is not a function
    at Object.<anonymous> (index.esm.js:214)
    at n (ResizeObserver.es.js:928)
    at Object.<anonymous> (index.esm.js:214)
    at n (ResizeObserver.es.js:928)
    at Object.<anonymous> (index.esm.js:214)
    at n (ResizeObserver.es.js:928)
    at Object.<anonymous> (index.esm.js:214)
    at n (ResizeObserver.es.js:928)
    at Module.<anonymous> (index.esm.js:214)
    at n (ResizeObserver.es.js:928)

but I don't think that is relevant as I have dug into it quite a bit.

Tech stack notes (I realize I am on an old version of Ruby but upgrading is unfortunately not an option): * XML Version 1.0 * Ruby version: 1.8.6 * Ruby gems cgi_multipart_eof_fix (2) gem_plugin (0.2.3) * json_pure (1.7.6) * mongrel (1.1.5) * rake (0.8.7) * ruby-net-ldap (0.0.5) * Apache version: Not used yet. Eventually Odin and Sonitor will be replaced with nifi. * .NET version 4.0 (or 4.7)

Does anyone have advice on how to get my React component to render?

D3/Nivo is unable to render in rails application

0 Answers0