Почему я получаю ошибки $ isnotafunction и window.renderDashboardisnotafunction при попытке импортировать перенесенный файл js в мое приложение? - PullRequest
Новая
       0

Почему я получаю ошибки $ isnotafunction и window.renderDashboardisnotafunction при попытке импортировать перенесенный файл js в мое приложение?

0 голосов
/ 28 января 2020

У меня есть React Component, который использует @ nivo / line. У меня не было проблем при работе с самим компонентом, но я не могу отобразить его в своем приложении 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'));

App . js компонента React 

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 компонента React 

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

Вещи, которые я пробовал: * провести обратный инжиниринг и, в частности, увидеть, где это ломается, но любое обновление, которое я делаю для компонента, ломает рендеринг этого * проверенные зависимости в пакете. json * просмотр git истории случайных изменений кода * ограничение области применения window.renderDashboard * изменение переменных для разрешения (даже если они будут иметь тот же результат в моем контексте, но в здравом уме) проверка) * добавление кавычек (в "") * удаление "окна" и создание нового глобального объекта * удаление лямбды и превращение ее в обычную функцию с помощью ключевой функции в 

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

Пожалуйста, помогите. Спасибо.

1 Ответ

0 голосов
/ 07 февраля 2020

В итоге я запустил fre sh из нового приложения create-реагировать и наложил на него свой график. Я не мог понять, что было причиной этого. Я предполагаю конфликты с зависимостями, особенно с core- js. Обновление зависимостей не помогло.

...