Why am I getting errors of $ isnotafunction and window.renderDashboardisnotafunction when trying to import a transpiled js file into my application?

Question

I have a React Component that uses @nivo/line. I have had no issues working on the component itself, but I am unable to render it in my rails application. I am inserting it into an html.erb.file like this:

<script src="<%=root_url%>DogDashboard.js">    
</script>

index.js of the application I am trying to insert into:

import React from 'react';
import ReactDOM from 'react-dom';
import { Dashboard } from '@reponame/projectrepo';
window.renderDashboard = data =>
    ReactDOM.render(<DogDashboard linedata={data}/>, document.getElementById('name-of-dogdiv'));

App.js of React Component

import React, { Component } from 'react';
import './App.css';


import { Chart } from './components'

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Chart data = {this.props.linedata} />
        </header>
      </div>
    );
  }
}

export default App;

index.js of React Component

import "core-js/stable";
import "regenerator-runtime/runtime";
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import linedata from './linedata.json'

ReactDOM.render(<App linedata={linedata}/>, document.getElementById('name-of-dogdiv'));

serviceWorker.unregister();

The errors I am getting are:

Uncaught TypeError: $ is not a function
    at Module../node_modules/core-js/modules/es.array.index-of.js (DogDashboard.js:18067)
    at __webpack_require__ (DogDashboard.js:20)
    at Module.<anonymous> (DogDashboard.js:16084)
    at Module../node_modules/core-js/internals/regexp-exec.js (DogDashboard.js:16186)
    at __webpack_require__ (DogDashboard.js:20)
    at Module../node_modules/core-js/modules/es.regexp.exec.js (DogDashboard.js:20138)
    at __webpack_require__ (DogDashboard.js:20)
    at Module.<anonymous> (DogDashboard.js:14317)
    at Module../node_modules/core-js/internals/indexed-object.js (DogDashboard.js:14335)
    at __webpack_require__ (DogDashboard.js:20)

and,

Uncaught TypeError: window.renderDashboard is not a function
    at Object.success ((index):520)
    at c (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at l (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)

webpack config:

var path = require('path');
module.exports = {
    mode: 'development',
    entry:  [path.join(__dirname, 'index.js')],
    output: {
        path: path.join(__dirname, 'out'),
        filename: 'DogDashboard.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules\/(?!(@rtls)\/).*/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            "presets": [
                                [
                                    "@babel/preset-env", {
                                        "targets":  {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        useBuiltIns: 'usage',
                                        corejs: '3.0.0',
                                    },
                                ],
                            "@babel/preset-react"
                            ]
                        },
                    },
                ]

            },
            { 
                test:/\.css/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            Promise: 'es6-promise',
            fetch: 'exports-loader?global.fetch!isomorphic-fetch',
        }),
    ],
    resolve: {
        extensions: ['*', '.js'],
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
}

Things I have tried: * reverse engineering it and specifically seeing where this breaks, but any upgrade I do to the component, breaks the rendering of it. * verified dependencies in package.json * reviewed git history for accidental code changes * limiting the scope of window.renderDashboard * changing the vars to let (even though they would have the same result in my context, but as a sanity check) * adding quotes ( to "”) * removing "window" and making a new global object * removing the lambda and making it a regular function using keyword function in

window.renderDashboard = data => ReactDOM.render(<DogDashboard linedata={data}/>, document.getElementById('name-of-dogdiv'));

Please help. Thanks.

Answer 1

I ended up starting fresh from a new create-react-app and putting my chart over it. I couldn't figure out what was causing this. I am guessing conflicts with dependencies, particularly with core-js. Upgrading dependencies was not helpful.