Не работает import после транспиляции JSX в JS (ES6) [дубликат]

Начал изучать React параллельно с JS. В своем коде использую препроцессор JSX. Для того, чтобы браузер смог воспринимать код на JSX, его надо преобразовать в обычный JS. В качестве транспайлера использую Babel с пресетом react: npm install babel-preset-react --save-dev. Саму транспиляцию выполняю: babel test.js -o test2.js --presets react. В итоге получаю:

test.js

import btnName from './name.js';
class MainPage extends React.Component {
    render()
    {
        return (
            <div>
                <button>{btnName}</button>
            </div>
        );
    }
}
ReactDOM.render(
    <MainPage />,
    document.getElementById('root')
);

name.js

export btnName = "button";

test2.js

import btnName from './name.js';
class MainPage extends React.Component {
    render() {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'button',
                null,
                btnName
            )
        );
    }
}
ReactDOM.render(React.createElement(MainPage, null), document.getElementById('root'));

После подключения test2.js к index.html не происходит ничего. Но стоит убрать import и заменить btnName в методе render на обычную строку, то все становиться нормально. С чем это связано? Как все-таки использовать import?