EmotionJS组件库中的组件未收到主题道具

Question

我正在基于Emotion和Typescript创建一个组件库。
但是，当我使用EmotionJS和NextJS将组件导入另一个项目时，它不接受主题道具。

这是组件仓库：
https://github.com/wilsonmsalberto/emotionjs-component-library

这是我在重现错误的仓库：
https://github.com/wilsonmsalberto/emotionjs-component-library-nextjs

我的目标是使用组件存储库来具有多个主题和多个组件。

然后，在任何EmotionJS项目中，我都将导入主题和任何组件，并在Emotion中正常使用它。

我将直接构建到仓库中，并直接从git调用生成的组件。

当前，我遇到以下错误

Answer 1

据我所知，您的问题与在libs和nextJS应用之间正确解析node_modules有关（可能从不同的node_modules实例化了2个不同的提供程序）。

在处理本地链接的程序包时，这更为常见，但是我认为您在这里也遇到类似的问题。有关更多详细信息，请参见https://github.com/emotion-js/emotion/issues/1107。

要解决此问题，请尝试将nextJS的webpack放置在<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
  },
}

希望它能起作用！