Как устранить ошибку JS в стороннем пакете - Reaction-Force-Graph - PullRequest
0 голосов
/ 21 сентября 2018

Я хотел бы использовать response-force-graph в моем приложении, но я получаю ошибку Uncaught TypeError: selection.interrupt не является функцией .Ошибка возникает из-за zoom.js, который является зависимостью пакетаact-forrce-graph.

Я обнаружил, что эту проблему можно решить путем понижения пакета d3-selection с версии 1.3.2 до версии 1.3.0.Как это сделать?Я могу определить идентификатор, изменив зависимость от версии в package.json в пакете реагировать-заставить-граф, но после обновления пакетов изменение будет потеряно.

Я также обнаружил, что проблема может быть вызвана настройкой веб-пакета, но я это все, что я знаю ...

Я нашел похожую проблему в другом пакете, и они решили эту проблему путем понижения версии пакета d3 и загрузки через пряжу вместо npm.

Этостранно, потому что их демо работает правильно, так есть ли проблемы в настройках моего веб-пакета?Или есть проблема в npm?

Полная ошибка из консоли:

*Uncaught TypeError: selection.interrupt is not a function
at Function../node_modules/force-graph/node_modules/d3- 
zoom/src/zoom.js.webpack_exports.default.zoom.transform (zoom.js:90)
at Function../node_modules/force-graph/node_modules/d3- 
zoom/src/zoom.js.webpack_exports.default.zoom.translateBy (zoom.js:119)
at adjustCanvasSize (force-graph.module.js:605)
at Function.init (force-graph.module.js:852)
at u (kapsule.min.js:1)
at Object.r [as comp] (kapsule.min.js:1)
at FromKapsuleComp.componentDidMount (react-kapsule.module.js:85)
at commitLifeCycles (react-dom.development.js:14685)
at commitAllLifeCycles (react-dom.development.js:15905)
at HTMLUnknownElement.callCallback (react-dom.development.js:145)*

webpack.conf.dev.js

 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');


 module.exports = {
   mode : 'development',
   devtool: 'inline-source-map',
   entry: {
    app: ['./src/index', 'webpack-hot-middleware/client?reload=true']
   },
   output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
   },
   devServer: {
    inline: true,
    historyApiFallback: true
   },
   plugins: [
    new webpack.HotModuleReplacementPlugin(),

    //new webpack.NoEmitOnErrorsPlugin(),

    new HtmlWebpackPlugin({
        template: './index.html',
        filename: 'index.html',
        inject: 'body',
        title: 'Hot Module Reload'
    }),


    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development')
    }),

    new FaviconsWebpackPlugin({
        // Your source logo
        logo: './src/img/ikona.png',
        // The prefix for all image files (might be a folder or a name)
        prefix: 'favicon-[hash]/',
        // Emit all stats of the generated icons
        emitStats: false,
        // don't rebuild the favicons until those hashes change
        persistentCache: true,
        // Inject the html into the html-webpack-plugin
        inject: true,
        // favicon background color (see https://github.com/haydenbleasel/favicons#usage)
        background: '#EE3C96',
        // favicon app title (see https://github.com/haydenbleasel/favicons#usage)
        //title: 'Bonobox',
        // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage)
        icons: {
            android: false,
            appleIcon: false,
            appleStartup: false,
            coast: false,
            favicons: true,
            firefox: false,
            opengraph: false,
            twitter: false,
            yandex: false,
            windows: false
        }
    })
],
module: {
    rules: [
        {
            test: /\.js$/,
            loaders: ['babel-loader'],
            include: path.join(__dirname, 'src')
        },
        {
            test: /\.html$/,
            loaders: ['html-loader'],
        },
        {
            test: /\.scss$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"},
                {loader: "sass-loader"}
            ]
        },
        {
            test: /\.less$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"},
                {loader: "less-loader"}
            ]
        },
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.json$/,
            loader: 'json-loader'
        },
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader?mimetype=image/svg+xml'},
        {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
        {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/font-woff"},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader?mimetype=application/octet-stream"},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        {test: /\.(png|jpg|gif|mp4)$/, loader: 'file-loader?limit=8192'}
    ]
}
 };

npm версия: новейшая - вчера обновлено (ошибка до, а также после обновления)

РЕДАКТИРОВАТЬ: пряжа - та же проблема

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...