Блог

Главная - Вопросы по программированию - «экспорт» преобразуется в «экспорт по умолчанию», предотвращающий импорт

«экспорт» преобразуется в «экспорт по умолчанию», предотвращающий импорт

#javascript #reactjs #typescript

Вопрос:

Я пытаюсь написать библиотеку с помощью TypeScript и Parcel. Все в порядке, пока я не попытаюсь импортировать его в другое приложение.

В библиотеке есть index.ts файл, который собирает компоненты и экспортирует их:

 import Component1 from "./components/Component1";
import Component2 from './components/Component2';

export {
    Component1,
    Component2,
};

После сборки я получаю index.js , index.css и index.d.ts .
В index.d.ts файле export он был преобразован в export default :

 export default Component1;
export default Component2;

Я связал свою библиотеку с yarn с моим потребительским приложением. Когда я хочу import { Component1 } from 'myLibrary'; , я получаю следующую ошибку: Module '"myLibrary"' has no exported member 'Component1'. Did you mean to use 'import Component1 from "myLibrary"' instead? . Теперь, когда я пытаюсь импортировать значение по умолчанию (как в index.d.ts ) import Component1 from 'myLibrary'; , ошибка изменяется на: Attempted import error: 'myLibrary' does not contain a default export (imported as 'Component1').

Почему происходит export преобразование и как я могу обойти это?

РЕДАКТИРОВАТЬ: библиотека создается и упаковывается посылкой, потребитель обрабатывается реактивными скриптами. После предложения мистера Манхэттена:

index.ts:

 export {Component1} from "./components/Component1";
export {Component2} from './components/Component2';

сгенерированный index.d.ts:

 export {Component1} from "./components/Component1";
export {Component2} from './components/Component2';

потребитель:

 function App() => {
    render(
        <>
            <Component1 />
            <Component2 />
        </>
    )
};

Ошибка:

 ./src/App.tsx
[1] Attempted import error: 'Component2' is not exported from 'myLibrary'.

Ответ №1:

вы можете напрямую экспортировать:

 export Component1 from "./components/Component1";
export Component2 from './components/Component2';

Комментарии:

1. Это снова приводит к Attempted import error: 'Footer' is not exported from 'samoa_pwa'.

2. Звучит как другая (новая) ошибка, которая обнаруживается после исправления первой. Можете ли вы поделиться полным воспроизведением?

3. Для ошибки были добавлены новые файлы.

4. Хм, сгенерированный index.d.ts теперь выглядит правильно. у меня нет опыта создания библиотек react. указывает ли package.json индексные файлы ( "main": "index.js", "module": "index.esm.js", "types": "index.d.ts", а также указывает на этот точный файл index.ts?

5. поскольку я здесь ничего не знаю, я смотрел, как это делается в github.com/sixfootsixdesigns/React-Library-Boilerplate , может быть, вы можете сравнить это с тем, что у вас есть, и найти там ошибки?

Ответ №2:

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

 export { default as Component1 } from './components/Component1';
export { default as Component2 } from './components/Component2';
Метки: ,