So I have a react component that I'm trying to publish into npm registry. It is a simple component, that decides what component to render, and all the options to render are created by others in my corporation and imported from npm registry.
The problem is, that when I build my component, and try to use it, it does not work and gives me the next error:
./node_modules/@corp/foo/dist/component.es.js
SyntaxError: /Users/225336/Documents/corp/projektit/react-test-
app/test-app/node_modules/@corp/component/dist/component.es.js: Identifier
'___$insertStyle' has already been declared (86:9)
84 | }
85 |
> 86 | function ___$insertStyle(css) {
| ^
When I look into component.es.js, I see that it creates ___$insertStyle(css) function, for every imported component and one for my parent component, but the first two does not have identification numbers after them and so they overlap
function ___$insertStyle(css) {
if (!css) {
return;
}
if (typeof window === 'undefined') {
return;
}
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
...
function ___$insertStyle(css) {
if (!css) {
return;
}
if (typeof window === 'undefined') {
return;
}
var style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = css;
document.head.appendChild(style);
return css;
}
___$insertStyle(".1-embed-container...");
...
function ___$insertStyle$1(css) {
...
}
...
___$insertStyle$1(".2-embed-container...");
...
function ___$insertStyle$2(css) {
...
}
...
___$insertStyle$2(".at-embed{padding:14px;line-height:1.4;font-family:Bernino Sans,Verdana,sans-serif}.at-embed div{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.at-embed h4{margin:0 0 5px}.at-embed h6{margin:0;font-size:13px;font-weight:700}.at-embed img{display:none}.at-embed article{border-left:4px solid #999;padding:2px 0 2px 10px;margin-bottom:10px;clear:both}.at-embed article,.at-embed article:first-child{-webkit-flex:1 0 100%;-ms-flex:1 0 100%;flex:1 0 100%;margin-right:20px}.at-embed article:first-child{margin-bottom:20px;border:0;padding:0}.at-embed article:first-child a{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.at-embed article:first-child h6{font-size:15px;line-height:1.2}.at-embed article:first-child img{display:block;margin-right:14px;width:40%}.at-embed article:last-child{margin:0}@media (min-width:420px){.at-embed article:first-child h6{font-size:18px}}@media (min-width:840px){.at-embed article{-webkit-flex:1 1 135px;-ms-flex:1 1 135px;flex:1 1 135px;border:0;padding:0}.at-embed article img{display:block;margin:0 0 10px}.at-embed article:first-child h6{font-size:22px}}.at-embed-kl article{border-color:#00c4e0}.at-embed-te article{border-color:#eb1c22}.at-embed-mb article{border-color:#4068ad}.at-embed-mb svg path{fill:#4068ad}");
...
What could cause it and how could i fix it? Removing manually one of the duplicate functions fixes the problem, but that isn't obviously the right way.
