it-roy-ru.com

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

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

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

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

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

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

ТЕСТ 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, ошибки нет !?)

//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 должен просто работать

11
Flion

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

export default class BaseComponent

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

import BaseComponent from './BaseComponent'

вместо 

var BaseComponent = require('./BaseComponent')

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

5
Flion

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

0
luanped