【发布时间】：2015-08-11 01:59:14
【问题描述】：
日历仍在加载，但是当您尝试单击或拖动某些内容时，它只会吐出一个错误：
未捕获的类型错误：无法设置未定义的属性“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 为真，将动画回到原始位置。
// callback 在动画完成时被调用。如果没有动画，则立即调用它。
停止：函数（shouldRevert，回调）{
var _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 引起的一个非常奇怪的范围问题，我不知道如何解决它。根据堆栈跟踪，看起来触摸启动事件甚至都没有触发：
未捕获的类型错误：无法设置属性“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
【问题讨论】：
标签： fullcalendar webpack