Как внешние компоненты из приложения реагируют с помощью веб-пакета?

Question

Разработка повторно используемого приложения реагирования (например, библиотеки) и сборка UMD. В этом я использую styled-компоненты, но я не хочу включать библиотеку styled-component в свой комплект, потому что она будет присутствовать в родительском приложении (приложении, которое будет использовать библиотеку). Я пытался с веб-пакетом, но он не работает. Ниже приведен код, который я добавил во внешнюю оболочку веб-пакета.

Примечание. В компоненте styled я импортирую из библиотеки styled (что является импортом по умолчанию) и css из библиотеки.

Тип 1:

externals: {
    axios: 'axios',
    classnames: 'classnames',
    'prop-types': 'prop-types',
    react: 'react',
    'react-dom': 'react-dom',
    redux: 'redux',
    'react-redux': 'react-redux',
    'styled-components': 'styled-components'
}

Тип 2:

externals: {
    react: {
       commonjs: 'react',
       commonjs2: 'react',
       root: ['React']
    },
    classnames: {
       commonjs: 'classnames',
       commonjs2: 'classnames',
       root: ['classNames']
    },
   'react-dom': {
       commonjs: 'react-dom',
       commonjs2: 'react-dom',
       root: ['ReactDOM']
   },
   'styled-components': {
       commonjs: 'styled-components',
       commonjs2: 'styled-components',
       root: ['styled']
   }
}