Почему экспорт по умолчанию вызывает ошибку при запуске приложения expo в браузере? - PullRequest
2 голосов
/ 04 мая 2020

У меня есть компонент, в котором я использую экспорт по умолчанию:

export default CategoryCard = (props) => {
    const {name, color, onPress } = props

    return (  ..my code 

, поэтому оператор импорта равен import CategoryCard.

Когда я пытаюсь запустить браузер с помощью Expo Client, браузер возвращает ошибку «ReferenceError: CategoryCard не определена»

, если я изменяю export default CategoryCard на export const CategoryCard и меняю import CategoryCard на import { CategoryCard } тогда все отлично работает в браузере.

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

1 Ответ

1 голос
/ 04 мая 2020

Если у вас есть что-то, что позволяет вам делать версию без const (или let), то модули реализованы неправильно. Строка

export default CategoryCard = (props) => {

гласит: «Присвойте это значение (функция стрелки) уже существующей переменной *1007* CategoryCard и экспортируйте значение как экспорт по умолчанию для этого модуля». Модули всегда находятся в строгом режиме, поэтому, если у вас нет объявления для CategoryCard, это ошибка ссылки. (Без строгого режима вы можете создавать глобальные переменные, присваивая необъявленные переменные, но это плохая идея ™. :-))

Поскольку модули всегда строги, вам нужно, чтобы в них были const или let :

export default const CategoryCard = (props) => {
// −−−−−−−−−−−−^^^^^

Браузер, сообщающий вам об ошибке, является верным, потому что это ReferenceError (в строгом режиме) для присвоения необъявленному идентификатору.


Что нельзя сказать что вы всегда должны иметь const или let или function или class с export. Вы не можете экспортировать результат произвольного выражения в качестве экспорта по умолчанию. Это действительный код, например:

export default 6 * 7;

Так что, если вы объявили CategoryCard в другом месте, ваш экспорт будет действительным:

let CategoryCard;
export default CategoryCard = (props) => {

Я, конечно, этого не предлагаю , просто указывая, что это действительно. : -)

...