"Неперехваченная ошибка типа: объект (...) не является функцией" при импорте функции через бочонок

#javascript #reactjs #ecmascript-6 #import

#javascript #reactjs #ecmascript-6 #импорт

Вопрос:

У меня есть функция в файле с именем merge, которая содержит внутри него

 export default (prev, next) => Object.assign({}, prev, next)

У меня также есть баррель, который импортирует и экспортирует эту функцию, например

 import fetchToNode from './fetchToNode'
import mergeObjects from './mergeObjects'

export {
    fetchToNode,
    mergeObjects
}

Если я импортирую функцию из ее origin ( import merge from 'src/functions/merge' ), все работает нормально.

Если я попытаюсь импортировать эту функцию из barrel однако ( import {merge} from 'src/functions' ), то я получаю сообщение об ошибке

redux.js:449 Uncaught TypeError: Object(...) is not a function

1. У вас есть index.js файл в папке функций?

2. @DipenShah да.

3. Не могли бы вы поделиться codesandbox? Я не уверен, правильно ли вы экспортируете.

4. @DipenShah То, что в вопросе, — это именно то, что у меня есть для экспорта

Ответ №1:

Вы неправильно экспортируете из бочонка. Попробуйте что-то вроде этого:

src/functions/index.js:

 export { default as mergeObjects } from './mergeObjects';
export { default as fetchToNode } from './fetchToNode';

и затем

 import { mergeObjects, fetchToNode } from 'src/functions';

Способ, которым вы экспортировали его, предназначен для следующего использования:

 import functions from 'src/functions';

console.log(functions.merge) // merge function

Вы можете проверить эту полезную ссылку об экспорте бочонка

Посмотрите, как он обрабатывает эти примеры для ствола?

 export * from './mergeObjects'; // re-export all of its exports
export * from './fetchToNode'; // re-export all of its exports

В нашем случае нам не нужно повторно экспортировать весь экспорт (но приведенный выше фрагмент также работает), а только default его часть, поскольку ваша функция написана как таковая:

 export default (prev, next) => Object.assign({}, prev, next)

Таким образом, значение по export { default as merge } from './merge' умолчанию означает on export default () ... из функции выше в merge.js

1. Выше я всегда писал свои бочонки, и я не понимаю {default как merge } из ‘./merge’

2. @Sam Вы хотите сказать, что это код, который не работает? Поскольку я вижу в вашем вопросе, что вы использовали другой тип экспорта бочонка

3. Я добавлю дополнительную информацию к ответу

4. Как мне написать это, когда я экспортирую несколько функций из ствола

5. Несколько функций, как в, merge.js , foo.js , bar.js ? Каждая отдельная функция в своем собственном файле?

Ответ №2:

Обновите свой файл barrel, и он должен это исправить:

 export * from './fetchToNode'
export * from './mergeObjects'