реэкспорт модуля класса es6 не работает, если используется как расширитель класса

Question

У меня есть 5 файлов js,

Я экспортировал новый компонент из bar.js с именем NewComponent, затем на route.js Я повторно экспортирую с тем же именем NewComponent, на other.js NewComponent работает нормально, но в dummy.js NewComponent не определяется, тогда как при импорте напрямую из bar.js NewComponent может работать нормально (см. sample.js), есть ли ошибка, которую я сделал?

/* bar.js */
import { Component } from 'react'
export default class NewComponent extends Component { }


/* route.js */
export { default as NewComponent } from './bar'

/* other.js */
import { NewComponent } from './route'
export default class Other extends Component {
  render() {
    return (
      <NewComponent /> /* work */
    )
  }
}

/* dummy.js */
import { NewComponent } from './route'
export default class Dummy extends NewComponent { } /* undefined is not an object (evaluating '_bar.default') */


/* sample.js */
import NewComponent from './bar'
export default class Sample extends NewComponent { } /* work */

• ОБНОВЛЕНИЕ, вот мой пример кода https://codesandbox.io/s/km5n6o757v

Answer 1

Вам нужно импортировать как это (без фигурных скобок вокруг него {...})

/* dummy.js */
import NewComponent from './route'; // this is import Other component

См. other.js вы экспортируете Other как компонент по умолчанию и используете NewComponent компонент внутри Other, не экспортируя его, как вы это делали в route.js

---

Подробнее об импорте по умолчанию и именном импорте здесь https://medium.com/@etherealm/named-export-vs-default-export-in-es6-affb483a0910