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
должен просто работать
Ответы
Ответ 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 и переустановив все, что сработало для меня, возможно, вы могли бы попробовать это?