Подтвердить что ты не робот

React 0.14.2 error - Супер выражение должно быть нулевым или функцией

После обновления с 0.13.2 до 0.14.2 я получаю эту ошибку:

Uncaught TypeError: Super expression must either be null or a function, not object

Есть несколько questions об этом уже. Наиболее распространенной ошибкой является ошибочный запрос React.component(без капитала C). Другой пытается использовать классы ES6 с версиями < 0.13.

Но я уже успешно использовал классы ES6 с React 0.13.x, и я использую капитал C повсюду, и запись React.Component, похоже, дает соответствующий результат (функция ReactComponent (...))

После некоторого поиска я сделал эти 3 тестовых примера, из которых 2 выбрасывает ту же ошибку (без меня, почему), а другой нет. Похоже, что вопрос о том, какие классы возникают, является проблемой?

TEST 1 (выдает ошибку)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var BaseComponent = require('./BaseComponent');

class Test extends BaseComponent {
    render() { return <div>Test worked</div>; }
}
ReactDOM.render(<Test />, document.getElementById('test'));

//BaseComponent.jsx
var React = require('react');
console.log(React.Component); // <--- logs "function ReactComponent(...)" !!
export default class BaseComponent extends React.Component { }

TEST 2 (поместите BaseComponent в Test.jsx, все еще ошибка)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
class BaseComponent extends React.Component { }
ReactDOM.render(<Test />, document.getElementById('test'));

TEST 3 (поместите BaseComponent выше Определение тестового класса, нет ошибки!?)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class BaseComponent extends React.Component { }
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
ReactDOM.render(<Test />, document.getElementById('test'));

Я даже не уверен, что это решит мою актуальную проблему. Но понимание того, что происходит в этих тестовых случаях, может помочь мне в решении.

Я использую webpack с babel для компиляции в пакет.

Обновление Изменение

export default class BaseComponent extends React.Component { }

Для

class BaseComponent extends React.Component { }
module.exports = BaseComponent;

также удалена ошибка! Это означает, что я собираюсь реорганизовать это сейчас, но это не решает проблему, потому что export default class должен просто работать

4b9b3361

Ответ 1

Я нашел решение. Это из-за изменения в babel, которое я также обновил. Если вы используете:

export default class BaseComponent

Вам также нужно использовать import вместо require, поэтому:

import BaseComponent from './BaseComponent'

вместо

var BaseComponent = require('./BaseComponent')

Используется это регулярное выражение для замены этого везде: заменить: var ([\w-_]+?) = require\('([\w-_.\/]+?)'\); с: import $1 from '$2';

Ответ 2

У меня была аналогичная проблема некоторое время назад, удалив папку node_modules и переустановив все, что сработало для меня, возможно, вы могли бы попробовать это?