plugin does not work in an ESM environment.
RobertSandiford opened this issue · 4 comments
RobertSandiford commented
When using in an ESM environment with import/export, the code fails with '_styled' is not a function.
The import of 'styled-components' loads the .cjs file, which exports an object with the styled function at .default.default
[Module: null prototype] {
ServerStyleSheet: [Function: e],
StyleSheetConsumer: <ref *1> {
'$$typeof': Symbol(react.context),
_context: {
'$$typeof': Symbol(react.context),
_calculateChangedBits: null,
_currentValue: undefined,
_currentValue2: undefined,
_threadCount: 0,
Provider: [Object],
Consumer: [Circular *1],
_currentRenderer: null,
_currentRenderer2: null
},
_calculateChangedBits: null
},
StyleSheetContext: <ref *2> {
'$$typeof': Symbol(react.context),
_calculateChangedBits: null,
_currentValue: undefined,
_currentValue2: undefined,
_threadCount: 0,
Provider: { '$$typeof': Symbol(react.provider), _context: [Circular *2] },
Consumer: <ref *1> {
'$$typeof': Symbol(react.context),
_context: [Circular *2],
_calculateChangedBits: null
},
_currentRenderer: null,
_currentRenderer2: null
},
StyleSheetManager: [Function: ae],
ThemeConsumer: <ref *3> {
'$$typeof': Symbol(react.context),
_context: {
'$$typeof': Symbol(react.context),
_calculateChangedBits: null,
_currentValue: undefined,
_currentValue2: undefined,
_threadCount: 0,
Provider: [Object],
Consumer: [Circular *3],
_currentRenderer: null,
_currentRenderer2: null
},
_calculateChangedBits: null
},
ThemeContext: <ref *4> {
'$$typeof': Symbol(react.context),
_calculateChangedBits: null,
_currentValue: undefined,
_currentValue2: undefined,
_threadCount: 0,
Provider: { '$$typeof': Symbol(react.provider), _context: [Circular *4] },
Consumer: <ref *3> {
'$$typeof': Symbol(react.context),
_context: [Circular *4],
_calculateChangedBits: null
},
_currentRenderer: null,
_currentRenderer2: null
},
ThemeProvider: [Function (anonymous)],
__PRIVATE__: {
StyleSheet: [Function: e] { registerId: [Function (anonymous)] },
masterSheet: e { options: [Object], gs: {}, names: Map(0) {}, server: false }
},
__esModule: true,
createGlobalStyle: [Function (anonymous)],
css: [Function: ve],
default: {
ServerStyleSheet: [Function: e],
StyleSheetConsumer: <ref *1> {
'$$typeof': Symbol(react.context),
_context: [Object],
_calculateChangedBits: null
},
StyleSheetContext: <ref *2> {
'$$typeof': Symbol(react.context),
_calculateChangedBits: null,
_currentValue: undefined,
_currentValue2: undefined,
_threadCount: 0,
Provider: [Object],
Consumer: [Object],
_currentRenderer: null,
_currentRenderer2: null
},
StyleSheetManager: [Function: ae],
ThemeConsumer: <ref *3> {
'$$typeof': Symbol(react.context),
_context: [Object],
_calculateChangedBits: null
},
ThemeContext: <ref *4> {
'$$typeof': Symbol(react.context),
_calculateChangedBits: null,
_currentValue: undefined,
_currentValue2: undefined,
_threadCount: 0,
Provider: [Object],
Consumer: [Object],
_currentRenderer: null,
_currentRenderer2: null
},
ThemeProvider: [Function (anonymous)],
__PRIVATE__: { StyleSheet: [Function], masterSheet: [e] },
createGlobalStyle: [Function (anonymous)],
css: [Function: ve],
default: [Function: ke] {
a: [Function],
abbr: [Function],
address: [Function],
area: [Function],
article: [Function],
aside: [Function],
audio: [Function],
b: [Function],
base: [Function],
bdi: [Function],
bdo: [Function],
big: [Function],
blockquote: [Function],
body: [Function],
br: [Function],
button: [Function],
canvas: [Function],
caption: [Function],
cite: [Function],
code: [Function],
col: [Function],
colgroup: [Function],
data: [Function],
datalist: [Function],
dd: [Function],
del: [Function],
details: [Function],
dfn: [Function],
dialog: [Function],
div: [Function],
dl: [Function],
dt: [Function],
em: [Function],
embed: [Function],
fieldset: [Function],
figcaption: [Function],
figure: [Function],
footer: [Function],
form: [Function],
h1: [Function],
h2: [Function],
h3: [Function],
h4: [Function],
h5: [Function],
h6: [Function],
head: [Function],
header: [Function],
hgroup: [Function],
hr: [Function],
html: [Function],
i: [Function],
iframe: [Function],
img: [Function],
input: [Function],
ins: [Function],
kbd: [Function],
keygen: [Function],
label: [Function],
legend: [Function],
li: [Function],
link: [Function],
main: [Function],
map: [Function],
mark: [Function],
marquee: [Function],
menu: [Function],
menuitem: [Function],
meta: [Function],
meter: [Function],
nav: [Function],
noscript: [Function],
object: [Function],
ol: [Function],
optgroup: [Function],
option: [Function],
output: [Function],
p: [Function],
param: [Function],
picture: [Function],
pre: [Function],
progress: [Function],
q: [Function],
rp: [Function],
rt: [Function],
ruby: [Function],
s: [Function],
samp: [Function],
script: [Function],
section: [Function],
select: [Function],
small: [Function],
source: [Function],
span: [Function],
strong: [Function],
style: [Function],
sub: [Function],
summary: [Function],
sup: [Function],
table: [Function],
tbody: [Function],
td: [Function],
textarea: [Function],
tfoot: [Function],
th: [Function],
thead: [Function],
time: [Function],
title: [Function],
tr: [Function],
track: [Function],
u: [Function],
ul: [Function],
var: [Function],
video: [Function],
wbr: [Function],
circle: [Function],
clipPath: [Function],
defs: [Function],
ellipse: [Function],
foreignObject: [Function],
g: [Function],
image: [Function],
line: [Function],
linearGradient: [Function],
marker: [Function],
mask: [Function],
path: [Function],
pattern: [Function],
polygon: [Function],
polyline: [Function],
radialGradient: [Function],
rect: [Function],
stop: [Function],
svg: [Function],
text: [Function],
textPath: [Function],
tspan: [Function]
},
isStyledComponent: [Function: y],
keyframes: [Function (anonymous)],
useTheme: [Function (anonymous)],
version: '5.3.3',
withTheme: [Function (anonymous)]
},
isStyledComponent: [Function: y],
keyframes: [Function (anonymous)],
useTheme: [Function (anonymous)],
version: '5.3.3',
withTheme: [Function (anonymous)]
}
agriffis commented
Hi @RobertSandiford. I don't disbelieve you but this isn't much to work with. Do you have a minimal example repo that demonstrates the problem?
RobertSandiford commented
Hi @agriffis
I suspect I may have mixed up @emotion/styled with styled-components... They both suggest styled as a moniker.
I set up a quick repo and did get the same error - but this is just the usual mock-ESM style CJS module (esModule = true, with default field) that always leads to this. They are injecting imports via a babel plugin which makes it a bigger issue there.
So, sorry about that!
agriffis commented
@RobertSandiford If this was a mixup after all, could you close the issue?
RobertSandiford commented
@agriffis done