ES6 импорт из нескольких путей

Question

Допустим, у меня есть несколько классов, которые расширяют объект. Один класс вложен глубже другого.

-- FOOD.js
export default class FOOD {}...

-- FRUIT.js
import FOOD from './FOOD.js';
export default class FRUIT extends FOOD {}...

-- FRUIT/APPLE.js
import FRUIT from '../FRUIT.js';
export default class APPLE extends FRUIT {}...

-- FRUIT/SEEDLESS/ORANGE
import FRUIT from '../../FRUIT.js';
export default class ORANGE extends FRUIT {}...

-- main.js
import FRUIT from './FRUIT.js';
import APPLE from './FRUIT/APPLE.js';
import ORANGE from './FRUIT/SEEDLESS/ORANGE.js';

let orange = new ORANGE();
let apple = new APPLE();

Я получаю неперехваченную ReferenceError из APPLE.js, говорящую "FRUIT не определен"

Я предполагаю, что относительный путь к FRUIT перезаписывается. Могу ли я иметь несколько путей к псевдониму 'FRUIT'? Нужно ли создавать отдельные псевдонимы для импорта?

Answer 1

Оказывается, что ReferenceError самого низкого уровня - это то, что отображается в инспекторе. Для тех, у кого есть вложенный импорт, обязательно проверьте свой импорт для каждого зависимого модуля.