scheduler.plugin is not a function

I installed scheduler plugin using npm and i pasted the dhtmlxscheduler_timeline.js at dhtmlx-scheduler/codebase/ext/ location but when i run the code i am getting error scheduler.plugin is not a function in dhtmlxscheduler_timeline.js.

import React, { Component, PropTypes } from ‘react’;
import { connect } from ‘react-redux’;
import ‘dhtmlx-scheduler/codebase/dhtmlxscheduler’;
import ‘dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_timeline.js’;
import ‘dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_collision.js’;
import ‘dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_key_nav.js’;

class SchedulerdetailView extends Component {

componentDidMount() {
	//////////////

let data = this.props.data.data;
let sections=[];
$.each(data.employeeDetail, function(i,ele){
let temp ={};
temp[‘key’] = ele.empId;
temp[‘label’] = ele.empName;
temp[‘role’] = ele.empRole;
temp[‘bescNum’] = ele.empBESCNum;
temp[‘phNum’] = ele.empPhoneNum;
sections.push(temp);
});
let data1 = [];
$.each(data.employeeWorkDetail, function(i,el){
console.log(el);
let temp = {};
temp[“empId”] = el.empId;

});
scheduler.locale.labels.timeline_tab = “Timeline”;
scheduler.locale.labels.section_custom=“Section”;
scheduler.config.details_on_create=true;
scheduler.config.details_on_dblclick=true;
scheduler.config.xml_date="%Y-%m-%d %H:%i";

	scheduler.config.default_date = "%j %M %Y (#%W)";
	
	
	//===============
	//Configuration
	//===============
	
	scheduler.createTimelineView({
		name:	"timeline",
		x_unit:	"day",
		x_date:	"%d %M %y",
		x_step:	  1,
		x_size:   12,
		x_start:  0,
		x_length: 12,
		y_unit:	sections,
		y_property:	"empId",
		render:"bar",
		round_position:true
	});
	

	
	
	//===============
	//Data loading
	//===============
	scheduler.config.lightbox.sections=[	
		{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
		{name:"custom", height:23, type:"select", options:sections, map_to:"empId" },
		{name:"time", height:72, type:"time", map_to:"auto"}
	];
	
	scheduler.templates.event_class = function(start,end,ev){
		if(ev.type === "forecast")
			return "forecastele customTask";
		else if(ev.type === "outage")
		return "outageele customTask";
	};
	scheduler.templates.timeline_scale_label = function(start,end,ev){
	 let str = '<p>'+ev.label+'</p><p>'+ev.role+'</p><p>BESC No: '+ev.bescNum+'</p>';
	 return str;
	};
	scheduler.init('scheduler_here',new Date(2017,5,30),"timeline");
	scheduler.parse([
		{ start_date: "2017-06-30 09:00", end_date: "2017-07-15 12:00", text:"Task A-12458", empId:1673, color: 'white', type: "outage"},
		{ start_date: "2017-07-20 10:00", end_date: "2017-08-30 16:00", text:"Task A-89411", empId:1673, color: 'white', type: "forecast"},
		
		{ start_date: "2017-06-30 12:00", end_date: "2017-07-12 20:00", text:"Task B-48865", empId:1473, color: 'white',type: "outage"},
		{ start_date: "2017-07-27 16:30", end_date: "2017-08-24 18:00", text:"Task B-46558", empId:1473, color: 'white', type: "forecast"},
		
		{ start_date: "2017-06-30 08:00", end_date: "2017-08-01 12:00", text:"Task C-32421", empId:1677, color: 'white', type: "outage"},
		{ start_date: "2017-08-12 14:30", end_date: "2017-09-28 16:45", text:"Task C-14244", empId:1677, color: 'white', type: "forecast"}
	],"json");
	
	scheduler.attachEvent("onEventCollision", function (ev, evs){
		console.log($('div[event_id='+ev.id+']'));
		console.log(evs);
		setTimeout(function(){ $('div[event_id='+ev.id+']').addClass('overlapEle'); }, 3000);
		//setTimeout(function() {$('div[event_id='+ev.id+']').addClass('overlapEle');}, 100);
		alert('Task Overlapped');
		return false;
});

//////////////////
}
render() {
		console.log('data '+JSON.stringify(this.props.data));
  return (
 
 
Day Week
); } } export default SchedulerdetailView;

This works fine when included it using script tag

<!doctype html>

Configuring the time scale (X-Axis) html, body{ margin:0px; padding:0px; height:100%; overflow:hidden; } .one_line{ white-space:nowrap; overflow:hidden; padding-top:5px; padding-left:5px; text-align:left !important; } .customTask{ height: 90% !important; top: 0px !important; color: #333 !important; } .outageele{ border: 2px solid green; } .forecastele{ border: 2px solid orange; }
 
 
Day Week

Hi,
npm package contains a free (Standard) version of the scheduler, it’s not compatible with extensions from PRO package.
Currently the only way to use a PRO version of scheduler with npm is to manually create an npm package and put it on your private npm server