javascript - 尝试将转译的 js 文件导入我的应用程序时，为什么会收到 $ isnotafunction 和 window.renderDashboardisnotafunction 的错误？

问题描述

我有一个使用 @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)

网络包配置：

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 的范围 * 将变量更改为 let（即使它们在我的上下文中具有相同的结果，但作为健全性检查） * 添加引号（到“”）*删除“窗口”并创建一个新的全局对象*删除lambda并使用关键字函数使其成为常规函数

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

请帮忙。谢谢。

标签： javascriptreactjswebpackbabeljs

javascript - 尝试将转译的 js 文件导入我的应用程序时，为什么会收到 $ isnotafunction 和 window.renderDashboardisnotafunction 的错误？

问题描述

解决方案

推荐阅读