当尝试将已转换的js文件导入到我的应用程序中时，为什么会出现$ isnotafunction和window.renderDashboardisnotafunction错误？

Question

我有一个使用@ nivo / line的React组件。我在组件本身上没有任何问题，但无法在Rails应用程序中进行渲染。我将其插入到html.erb.file中，如下所示：

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

我尝试插入的应用程序的index.js：

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'));

React组件的App.js

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;

React组件的index.js

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();

我得到的错误是：

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)

和

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配置：

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'
}

我尝试过的事情：*对其进行逆向工程，并特别查看中断的地方，但是我对组件所做的任何升级都会破坏其呈现。*已验证package.json中的依赖项*查看git历史记录以查找意外的代码更改*限制window.renderDashboard的范围*将var更改为let（即使在我的上下文中它们的结果相同，但作为健全性检查）*添加引号（到“”）*删除“窗口”并创建新的全局对象*使用

中的关键字函数删除lambda并使其成为常规函数

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

请帮助。谢谢。

Answer 1

我最终从一个新的create-react-app重新开始，然后将图表放在上面。我不知道是什么原因造成的。我猜想与依赖项有冲突，尤其是与core-js冲突。升级依赖项没有帮助。