Блог

Я создаю библиотеку компонентов на основе Emotion и Typescript.
Однако, когда я импортирую компонент в другой проект с помощью EmotionJS и NextJS, он не принимает поддержку темы.

Это репозиторий компонентов:
https://github.com/wilsonmsalberto/emotionjs-component-library

Это репозиторий, в котором я воспроизвожу ошибку:
https://github.com/wilsonmsalberto/emotionjs-component-library-nextjs

Моя цель — использовать репозиторий компонентов для создания нескольких тем и нескольких компонентов.

Затем в любом проекте EmotionJS я бы импортировал тему и любой компонент и использовал его как обычно с Emotion.

Я встраиваюсь непосредственно в репозиторий и вызываю сгенерированный компонент непосредственно из git.

В настоящее время я получаю следующую ошибку

Из того, что я могу сказать, ваша проблема связана с правильным разрешением node_modules между библиотеками и приложением NextJS (возможно, создание экземпляров 2 разных провайдеров из разных node_modules).

Это чаще встречается при работе с локальными связанными пакетами, но я думаю, что здесь у вас аналогичная проблема. См. https://github.com/emotion-js/emotion/issues/1107 для получения более подробной информации.

Чтобы исправить, попробуйте настроить webpack NextJS для локального разрешения проблем с эмоциями, поместив это в <app_root>/next.config.js .

 const path = require('path');

module.exports = {
  webpack: (config) => {

    // resolve "@emotion/core" and related dependencies locally
    config.resolve.alias['@emotion/core'] = path.resolve('./node_modules/@emotion/core');
    config.resolve.alias['@emotion/styled'] = path.resolve('./node_modules/@emotion/styled');
    config.resolve.alias['emotion-theming'] = path.resolve('./node_modules/emotion-theming');

    return config
  },
}
  

Надеюсь, это сработает!