Component from an EmotionJS Component library does not receive the Theme prop

user_4841675 0
Viewed 97

I'm creating a component library based on Emotion and Typescript.
However, when I import the component in a different project with EmotionJS and NextJS, it doesn't accept the Theme prop.

This is the components repo:
https://github.com/wilsonmsalberto/emotionjs-component-library

This is the repo where I'm reproducing the error:
https://github.com/wilsonmsalberto/emotionjs-component-library-nextjs

My goal is to use the component repo to have multiple themes and multiple components.

Then, in any EmotionJS project, I would import the theme and any component and use it as normal with Emotion.

I'm building directly into the repo and calling the generated component directly from git.

Currently, I'm getting the following error

enter image description here

emotion typescript next.js reactjs
1 Answers

From what I can tell, your problem is related with resolving node_modules correctly between libs and the nextJS app (probably instantiating 2 different providers, from different node_modules).

This is more common when dealing with local linked packages, but I think you have a similar problem here. See https://github.com/emotion-js/emotion/issues/1107 for more details.

To fix, try configuring nextJS's webpack to resolve emotion deps locally, by placing this in <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
  },
}

Hope it works!

user_53557270
Related