CODEWITHSUNDEEP
javascriptinternet-explorerreactjsbabeljsbabel-polyfill
Tom Pinchen
Tom Pinchen

Reputation: 2497

Unable to get value of the property ReactJS in IE9/10

I have a react component that I am rendering into the DOM using the following code:

ReactDOM.render(React.createElement(PROJECT.CalendarApp, 
        {   key                     : 'globalcalendar', 
            roomPage                : false, 
            localeRegion            : PROJECT.user.locale().region,
            localeStartDay          : PROJECT.user.locale().startDay,
            showCalendarOnLoad      : false,
            name                    : 'globalcalendar',
            availabilityCalendar    : false 
        }), 
    document.getElementById('global_calendar_component'));

I am receiving the following error in IE 9/10 and can't seem to work out why - Unable to get value of the property 'localeRegion' object is null or undefined reactjs.

PROJECT.user.locale().region is correctly defined and returns a string of 'en'.

This issue is only occurring in IE 9 and 10 and my webpack setup at the moment looks like this:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, '../src/Family/SystemBundle/Resources/public/js/components/compiled');
var APP_DIR = path.resolve(__dirname, '../src/Family/SystemBundle/Resources/public/js/components/');

var config = {
    entry: {
        calendar    : APP_DIR + '/calendar.jsx'
    },
        output: {
            path: BUILD_DIR,
            filename: '[name].js'
        },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel',
                query:
                {
                    presets:[require.resolve('babel-preset-es2015'), require.resolve('babel-preset-react')] // Brackets - required for babel symlinking because node_modules is not in the root folder.
                }
            }
        ]
    }
};

module.exports = config;

I already have Babel Polyfill loaded into the project and am quite stumped on this issue. If anyone has experienced anything similar then it would be great to know how you managed to solve it.

Upvotes: 1

Views: 1129

Answers (1)

Tom Pinchen
Tom Pinchen

Reputation: 2497

We have finally found an answer to this issue. The problem was that IE9 doesn't like props to be used in the constructor of a react component but will allow the use of props in other component methods.

To fix this issue simply don't use any props in your constructor or try using plugins: [['transform-es2015-classes', {loose: true}]] in your webpack file.

More details here: https://phabricator.babeljs.io/T3041 & https://phabricator.babeljs.io/T6954

Upvotes: 1

Related Questions