Load module with default export

[hboylan]

I'm currently unable to load a module that uses a default export. Specifically, styled-components uses default to conveniently wrap html elements which appears to break the loader.

To reproduce, try adding styled-components to your namespace. It should be added to the namespace, but webpack will be unable to load the default import at runtime.

use: {
  loader: 'share-loader',
  options: {
    modules: ['styled-components'],
    exclude: [],
    namespace: 'test',
  }
}

[hboylan]

More clarity on this issue...

Import the default styled object.

import styled from 'styled-components'
console.log(styled)

const MyButton = styled.button`` # throws error

Notice how the default object is nested one level from the window namespace.

ServerStyleSheet: ƒ ServerStyleSheet()
StyleSheetConsumer: {$$typeof: Symbol(react.context), _context: {…}, _calculateChangedBits: null, …}
StyleSheetContext: {$$typeof: Symbol(react.context), _calculateChangedBits: null, _currentValue: undefined, _currentValue2: undefined, _threadCount: 0, …}
StyleSheetManager: ƒ StyleSheetManager(props)
ThemeConsumer: {$$typeof: Symbol(react.context), _context: {…}, _calculateChangedBits: null, …}
ThemeContext: {$$typeof: Symbol(react.context), _calculateChangedBits: null, _currentValue: undefined, _currentValue2: undefined, _threadCount: 0, …}
ThemeProvider: ƒ ThemeProvider(props)
createGlobalStyle: ƒ createGlobalStyle(strings)
css: ƒ css(styles)
default: ƒ styled(tag)
isStyledComponent: ƒ isStyledComponent(target)
keyframes: ƒ keyframes(strings)
withTheme: ƒ withTheme(Component$$1)
__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS: {StyleSheet: ƒ}
__proto__: Object