Я хотел бы использовать 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 версия: новейшая - вчера обновлено (ошибка до, а также после обновления)
РЕДАКТИРОВАТЬ: пряжа - та же проблема