ThemeContext missing for external components

External Component

• emotion version: 10.0.2
• react version: 16.4.2

I know extending semantic ui is gross, WIP ripping it out

import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { Container } from 'semantic-ui-react';

const PageTitleContainer = styled.div`
  background: ${props => props.theme.colors.whiteHex} !important;
  padding: ${props => props.theme.pageTitle.titleContainerPadding} !important;
  border-bottom: ${props => props.theme.pageTitle.pageTitleBorder(props)} !important;  

  h1 {
    font-size: ${props => props.theme.pageTitle.h1.fontSize} !important;
    font-weight: ${props => props.theme.pageTitle.h1.fontWeight} !important;
    margin: ${props => props.theme.pageTitle.h1.margin} !important;
    padding: ${props => props.theme.pageTitle.h1.padding} !important;
    color: ${props => props.theme.colors.lightBlueHex} !important;
  }
`;


const FlexContainer = styled(Container)`
  display:flex !important;
  justify-content: space-between;
`

const ChildContainer = styled.div`
  display:flex;
  justify-content: space-between;

  &> div {
    &:first-of-type {
      margin-left: 0;
    }
    margin-left:15px;
  }
`
export const PageTitle = props => (
  <PageTitleContainer>
    <FlexContainer>
      <h1>{props.title}</h1>
      <ChildContainer>{props.children}</ChildContainer>
    </FlexContainer>
  </PageTitleContainer>
);

PageTitle.propTypes = {
  title: PropTypes.string
};

export default PageTitle;

Consuming Application

• emotion version: 10.0.2
• react version: 16.6.3

ReactDOM.render(
    <ThemeProvider theme={theme}>
      <PageTitle title="test"></PageTitle>
    </ThemeProvider>,
    document.getElementById('root')
);

What happened:

Reproduction:

• Create external component
• Create external theme object
• Import both into CRA v2
• Create a local component in CRA
• Use ThemeProvider to provide theme prop

At this point the local component of your application should pick up the ThemeContext while the imported component will have an empty object for theme.

Problem description:

The component from our external library does not get the ThemeContext from the ThemeProvider and falls back to the default empty object. This was working prior to upgrading to emotion 10.x.x and worked sporadically using 10.x.x

The theme is also imported from our component library and can be used normally with styled components that are creating within the consuming application but it will not apply to the components that are imported en tandem with the theme.

[tolesdev]

Hey @HiranmayaGundu,

I finally figured out my issue, which may be yours as well. Going back to what @Andarist said, the newer Context API is identity based. The solution was to export the ThemeProvider from our component library itself instead of trying to use emotion-theming directly in the consuming application.

Use the ThemeProvider from @miq/fiber-ui – if it’s an internal package then just update it to export your provider.

[tolesdev]

Hey @HiranmayaGundu,

I finally figured out my issue, which may be yours as well. Going back to what @Andarist said, the newer Context API is identity based. The solution was to export the ThemeProvider from our component library itself instead of trying to use emotion-theming directly in the consuming application.

Use the ThemeProvider from @miq/fiber-ui – if it’s an internal package then just update it to export your provider.

Follow up, learned more.

The problem was indeed two versions of the theming library.

Required:

// package.json
    // preferred if publishing library
{
    "peerDependencies": {
        "emotion-theming": "x.x.x"
    }
}

Using rollup:

// rollup.config.js
export default {
    external: ['emotion-theming']
}

Using webpack for bundling a library: This is untested, just filling out based on documentation below. https://webpack.js.org/configuration/externals/#string

// webpack.config.js
module.exports = {
    externals: {
        'emotion-theming': 'commonjs2 emotion-theming'
    }
}

Using webpack for bundling an application: This is untested, just filling out based on documentation below. https://webpack.js.org/configuration/resolve/#resolvealias

// webpack.config.js
const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      // point to the common version of the theming library
      'emotion-theming': path.resolve(__dirname, 'node_modules/emotion-theming')
    }
  }
};