m03a3a17 m03a3a17 -4 years ago 151
Javascript Question

warning: PageContainer(...): React component classes must extend React.Component

I am trying to use react-page-transitions and I am getting this warning:

"PageContainer(...): React component classes must extend React.Component."

my code looks like this

import React from 'react';
import {Link} from "react-router";
import {withRouter} from 'react-router';
import firebase_det from '../../details_data/firebase';

var firebase = require('firebase');
var AppActions = require('../../Action/AppActions');
var AppStore = require('../../Stores/AppStore');
import Formsy from 'formsy-react';
var CryptoJS = require("crypto-js");
import MyOwnInput from '../Testing/MyOwnInput';
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var PageContainer = require('react-page-transitions');

class Signup extends React.Component {

this.state = {};

render() {
return (
<div> </div>

export default Signup;

What am I doing wrong?

Answer Source

From React v0.14 on, components implemented as ES6 classes without extending React.Component are deprecated. They should extend React.Component (just like the warning says):

class Component extends React.Component {


From the official blog post:

ES6 component classes must now extend React.Component in order to enable stateless function components. The ES3 module pattern will continue to work.

From the github repository I see that react-page-transition is implemented as

var PageContainer = React.createClass({

So there is the problem

To solve it what you can do it is that once you have done npm install react-page-transition, just go to the node_modules and edit the code using ES6 structure and it will work.


Okay so to get around it just create a new file PageContainer.js and write the following code in it

'use strict';

import React from 'react';
import Velocity from 'velocity-animate';

export default class PageContainer extends React.Component{
    constructor(props) {

        this.state =  {
            mounted: false,
            startStyles: {
                'translateX': '100%'
            endStyles: {
                'translateX': 0
            easing: 'swing',
            duration: 400,
            callback: function() {

    componentWillMount() {
    componentDidMount() {
        var me = this;

        // Hook styles
        for (var key in this.state.startStyles) {
            Velocity.hook(this.getDOMNode(), key, this.state.startStyles[key]);

        this.setState({ mounted: true });
        this.getDOMNode().style.display = 'block';

        var options = {
            duration: this.state.duration,
            easing: this.state.easing,
            complete: function () {

    render() {
        var child;
        var classString = 'page-content ' + this.props.className;
            child = (<div>{this.props.children}</div>);
        return (
            <section className="page-content" style={{display: 'none'}}>

and import this as

import PageContainer from './path/to/PageContainer'

also you will need to do

npm install -S velocity-animate

I think this will solve the problem. Let me know I haven't tested it.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download