Undefined/null reference when trying to add ReactCSSTransitionGroup (TypeScript + React + JSPM)

Question

I am new to React and have been trying to add a very basic animation to a test page to check to know that I understand the processes involved… unfortunately I don’t.

I have installed from what I think are the correct typings, an extract from the automatically generated typings > index.d.ts file is:

/// <reference path="globals/react/index.d.ts" /> /// <reference path="globals/react-addons-css-transition-group/index.d.ts" />

I have set-up the JSPM config file with the correct entry, as there are no issues when using React without any animations; the map section contains the following entry:

"react": "npm:[email protected]\\dist\\react-with-addons"

The index.tsx file is very simple, consisting of (please ignore the run code snippet, for some reason I couldn't use the backticks to insert the multiline codes below):

/// <reference path="../typings/index.d.ts" />
import * as React from 'react';
import * as ReactDOM from 'react-dom';

let ReactCSSTransitionGroup = React.__Addons.CSSTransitionGroup;

ReactDOM.render(<div><ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500}>
<h1 key="helloKey">Hello</h1>
</ReactCSSTransitionGroup></div>, document.getElementById('app'));

Using the TypeScript compiler produces the following output for index.js:

System.register(['react', 'react-dom'], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var React, ReactDOM;
    var ReactCSSTransitionGroup;
    return {
        setters:[
            function (React_1) {
                React = React_1;
            },
            function (ReactDOM_1) {
                ReactDOM = ReactDOM_1;
            }],
        execute: function() {
            ReactCSSTransitionGroup = React.__Addons.CSSTransitionGroup;
            ReactDOM.render(React.createElement("div", null, React.createElement(ReactCSSTransitionGroup, {transitionName: "example", transitionEnterTimeout: 500}, React.createElement("h1", {key: "helloKey"}, "Hello"))), document.getElementById('app'));
        }
    }
});

When attempting to load the file using the above JavaScript I receive the following error:

TypeError: Unable to get property 'CSSTransitionGroup' of undefined or null reference at execute (eval code:15:13) Error loading http://localhost:8000/index.js

When I remove all the animation references then everything works as expected.

I’m certain I’ve made a very simple mistake but I’ve spent hours trying to find out the cause but have not succeeded. Please note that I have searched on StackOverflow, Google and Bing for assistance, but strangely I can’t find anything similar.

Any help would be greatly appreciated,

Kind Regards,

John

Answer 1

Thank you for your reply. I managed to get this to work by adding the react-global and react-addons-transition-group typings, the generated typings file now includes the following entries:

/// <reference path="globals/react/index.d.ts" />
/// <reference path="globals/react-global/index.d.ts" />
/// <reference path="globals/react-addons-transition-group/index.d.ts" />
/// <reference path="globals/react-addons-css-transition-group/index.d.ts" />