Hi folks,

I m in the process of transpiling a load of react ES6 stuff into commonjs for use in NPM modules in different apps. I want to be able to do the same thing with styled-components so I have a custom UI library I can use in different apps.

I have attempted the following in my transpiler: -

import styled from "styled-components"
export const Badge = styled.span\``display: inline-block;font-weight: ${props => props.theme.font.weight.normal};padding: ${props => props.theme.components.forms.padding};text-align: center;white-space: nowrap;vertical-align: middle;border: 1px solid transparent;`;`

I then try to include the transpiled export in my component: -

import { Badge } from "@mylibrary/ui"

return (
<div>
<Badge />
</div>
)

When I do, my app crashes and I get the following message in the console: -

It looks like there are several instances of 'styled-components'...

And...

Uncaught Error: Trying to insert a new style tag, but the given Node is unmounted!...

My (rather uneventful) babel/webpack config is the following: -

const merge = require('webpack-merge');
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = () => {

const package = process.env.PACKAGE
const environment = process.env.NODE_ENV
console.info('Package : ', package)
console.info('Environment : ', environment)

return {

mode: environment,
entry: path.resolve(__dirname, './' + package + '/src/lib/index.js'),
output: {
path: path.resolve(__dirname, './' + package + '/dist/lib'),
filename: 'index.js',
library: '',
libraryTarget: 'commonjs'
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
]
}
}
}
--------------------------------

Is it even possible to do this? I literally have no idea if this can be done at all or, if it can be, how I would go about it.

Any advice very welcome!