日历仍然会加载，但只要您尝试点击或拖动某个内容时它就会发出错误：
未捕获的TypeError：无法设置未定义的属性'isAnimating'
我使用以下代码初始化了日历，日历加载了一些问题：
'use strict';
import React from 'react/addons';
React.initializeTouchEvents(true);
require("font-awesome-webpack");
//Calendar css
require('styles/normalize.css');
require('styles/main.css');
require('../../../../bower_components/fullcalendar/dist/fullcalendar.css');
require('../../../../bower_components/fullcalendar/dist/fullcalendar.print.css');
var $ = require('../../../../bower_components/jquery/dist/jquery');
//Calendar js
require('../../../../bower_components/fullcalendar/dist/fullcalendar');
const DashboardHandler = React.createClass({
componentDidMount: function(){
console.log('clicked');
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2015-02-12',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2015-02-01'
},
{
title: 'Long Event',
start: '2015-02-07',
end: '2015-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2015-02-16T16:00:00'
},
{
title: 'Conference',
start: '2015-02-11',
end: '2015-02-13'
},
{
title: 'Meeting',
start: '2015-02-12T10:30:00',
end: '2015-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2015-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2015-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2015-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2015-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2015-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2015-02-28'
}
]
});
},
render: function() {
console.log("RENDER")
return (
<div className='client-dashboard'>
<div id='calendar'></div>
</div>
);
}
});
export default DashboardHandler;
我有一个webpack配置文件，如下所示：
/*
* Webpack development server configuration
*
* This file is set up for serving the webpack-dev-server, which will watch for changes and recompile as required if
* the subfolder /webpack-dev-server/ is visited. Visiting the root will not automatically reload.
*/
'use strict';
var webpack = require('webpack');
var path = require('path');
module.exports = {
output: {
filename: 'main.js',
publicPath: '/assets/'
},
cache: true,
debug: true,
// Sourcemaps are enabled. If this is too slow, set it to false.
devtool: "eval-source-map",
noInfo: true, // --no-info option
entry: [
'webpack/hot/only-dev-server',
'./src/scripts/components/main.js'
],
stats: {
colors: true,
reasons: true
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'styles': path.join(__dirname, 'src/styles'),
'components': path.join(__dirname, 'src/scripts/components/'),
'actions': path.join(__dirname, 'src/scripts/actions/'),
'stores': path.join(__dirname, 'src/scripts/stores/'),
'jquery': path.join(__dirname, 'bower_components/jquery/dist/jquery'),
'jQueryUi': path.join(__dirname, 'bower_components/fullcalendar/lib/jquery-ui.custom.min'),
'moment': path.join(__dirname, 'bower_components/moment/src/moment')
}
},
module: {
preLoaders: [{
test: /\.js(x)?$/,
exclude: /node_modules/,
loader: 'jsxhint?babel'
}],
loaders: [{
test: /\.js(x)?$/,
exclude: /node_modules/,
loader: 'react-hot!babel'
}, {
test: /\.less/,
loader: 'style-loader!css-loader!less-loader'
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{ test: /\.(woff|woff2)$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader" },
{ test: /\.eot$/, loader: "file-loader" },
{ test: /\.svg$/, loader: "file-loader" },
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
Jquery和所有日历依赖项似乎都已定义。问题是在日历源代码中的以下函数中抛出：
//使元素停止跟随鼠标。如果shouldRevert为true，则将动画回原位。
动画完成后调用// callback。如果没有动画，则立即调用它。
stop：function（shouldRevert，callback）{
var _this = this;
var revertDuration = this.options.revertDuration;
function complete() {
this.isAnimating = false;
_this.destroyEl();
this.top0 = this.left0 = null; // reset state for future updatePosition calls
if (callback) {
callback();
}
}
if (this.isFollowing && !this.isAnimating) { // disallow more than one stop animation at a time
this.isFollowing = false;
$(document).off('mousemove', this.mousemoveProxy);
if (shouldRevert && revertDuration && !this.isHidden) { // do a revert animation?
this.isAnimating = true;
this.el.animate({
top: this.top0,
left: this.left0
}, {
duration: revertDuration,
complete: complete
});
}
else {
complete();
}
}
},
看起来像webpack引起的一个非常奇怪的范围问题，我对如何解决它感到茫然。基于堆栈跟踪，它看起来似乎触摸启动事件甚至不会触发：
未捕获的TypeError：无法设置属性'isAnimating' undefinedcomplete @ fullcalendar.js？2811：2551stop @ fullcalendar.js？2811：2577dragStop @ fullcalendar.js？2811：3761trigger @ fullcalendar.js？2811：2137dragStop @ fullcalendar.js？2811：2090dragStop @ fullcalendar.js？2811：2409stopDrag @ fullcalendar.js？2811：2080stopListening @ fullcalendar.js？2811：2103mouseup @ fullcalendar.js？2811：2071（匿名 函数）@ fullcalendar.js？2811：760dispatch @ jquery.js？0403：4435jQuery.event.add.elemData.handle @ 的jquery.js 0403：4121
答案 0 :(得分：0)
如果这是一个范围问题，它可能不是与webpack相关的，但会做出一些autobinding魔术，以至于它与jquery插件的工作方式不兼容。
如果确实如此，您可以调整完整日历代码，以调用callback()和complete()到callback.call(this)和complete.call(this)的调用，以便每次都设置预期的上下文时间。
修改插件源并不是一个特别吸引人的解决方案，但它应该让你紧张。