Open maxmedina05 opened 3 years ago
Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.
Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.
yes, thank you for that I added it now. https://codesandbox.io/s/thirsty-margulis-z1qfj?file=/pages/search.tsx
Unfortunately, I don't see any error there - the console is clear and the browser tab renders just fine.
Unfortunately, I don't see any error there - the console is clear and the browser tab renders just fine.
On my local environment I get this errors always. On the codesandbox, I only get this error after I make some changes on a styled component using styled.box.
Error message from codesandbox:
The issue is that "box" is not being transform as you can see here:
@Andarist Do you have any working example on this "importmap" different to the one on the documentaiton?
@Andarist Do you have any working example on this "importmap" different to the one on the documentation?
You can check out our test files.
I still couldn't reproduce this on codesandbox, nor after downloading & running this on my machine. However, I've inspected the transpiled code and it makes sense that you are seeing this error:
var StyledSearch = Object(_xstyled_emotion__WEBPACK_IMPORTED_MODULE_1__["default"])("box", false ? undefined : {
target: "e1d7qjjd0",
label: "StyledSearch"
})(false ? undefined : {
name: "1hcx8jb",
styles: "padding:0",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tYXRldXN6YnVyenluc2tpL0Rvd25sb2Fkcy9ldWVtOC9wYWdlcy9zZWFyY2gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdxQiIsImZpbGUiOiIvVXNlcnMvbWF0ZXVzemJ1cnp5bnNraS9Eb3dubG9hZHMvZXVlbTgvcGFnZXMvc2VhcmNoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vIGltcG9ydCB7IEZDIH0gZnJvbSBcInJlYWN0XCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQHhzdHlsZWQvZW1vdGlvbidcclxuXHJcbmNvbnN0IFN0eWxlZFNlYXJjaCA9IHN0eWxlZC5ib3goe1xyXG5cdHBhZGRpbmc6ICcwJyxcclxufSlcclxuXHJcbmNvbnN0IFNlYXJjaCA9ICgpID0+IHtcclxuXHRkZWJ1Z2dlclxyXG5cdHJldHVybiAoXHJcblx0XHQ8U3R5bGVkU2VhcmNoPlxyXG5cdFx0XHQ8aW5wdXQgdHlwZT1cInNlYXJjaFwiIGRlZmF1bHRWYWx1ZT1cImthcHBhXCIgLz5cclxuXHRcdDwvU3R5bGVkU2VhcmNoPlxyXG5cdClcclxufVxyXG5cclxuZXhwb3J0IGRlZmF1bHQgU2VhcmNoXHJcbiJdfQ== */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
As you might notice "box"
gets passed to the styled
call as an argument. This makes sense from our perspective as lower-cased components are always considered to be host components (this is a JSX rule). We could technically leave this call as-is when styledBaseImport
stays undefined and that should fix your issue. I would be open for giving this a deeper thought if you would prepare a PR for this as I won't have the time capacity to handle this myself.
I still couldn't reproduce this on codesandbox, nor after downloading & running this on my machine. However, I've inspected the transpiled code and it makes sense that you are seeing this error:
var StyledSearch = Object(_xstyled_emotion__WEBPACK_IMPORTED_MODULE_1__["default"])("box", false ? undefined : { target: "e1d7qjjd0", label: "StyledSearch" })(false ? undefined : { name: "1hcx8jb", styles: "padding:0", map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tYXRldXN6YnVyenluc2tpL0Rvd25sb2Fkcy9ldWVtOC9wYWdlcy9zZWFyY2gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdxQiIsImZpbGUiOiIvVXNlcnMvbWF0ZXVzemJ1cnp5bnNraS9Eb3dubG9hZHMvZXVlbTgvcGFnZXMvc2VhcmNoLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8vIGltcG9ydCB7IEZDIH0gZnJvbSBcInJlYWN0XCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQHhzdHlsZWQvZW1vdGlvbidcclxuXHJcbmNvbnN0IFN0eWxlZFNlYXJjaCA9IHN0eWxlZC5ib3goe1xyXG5cdHBhZGRpbmc6ICcwJyxcclxufSlcclxuXHJcbmNvbnN0IFNlYXJjaCA9ICgpID0+IHtcclxuXHRkZWJ1Z2dlclxyXG5cdHJldHVybiAoXHJcblx0XHQ8U3R5bGVkU2VhcmNoPlxyXG5cdFx0XHQ8aW5wdXQgdHlwZT1cInNlYXJjaFwiIGRlZmF1bHRWYWx1ZT1cImthcHBhXCIgLz5cclxuXHRcdDwvU3R5bGVkU2VhcmNoPlxyXG5cdClcclxufVxyXG5cclxuZXhwb3J0IGRlZmF1bHQgU2VhcmNoXHJcbiJdfQ== */", toString: _EMOTION_STRINGIFIED_CSS_ERROR__ });
As you might notice
"box"
gets passed to thestyled
call as an argument. This makes sense from our perspective as lower-cased components are always considered to be host components (this is a JSX rule). We could technically leave this call as-is whenstyledBaseImport
stays undefined and that should fix your issue. I would be open for giving this a deeper thought if you would prepare a PR for this as I won't have the time capacity to handle this myself.
@Andarist I can prepare the PR
I've been trying to integrate the emotion babel plugin with xstyled. But I'm not sure how it works. What "styledBaseImport" for?
I've made an issue for xstyled but I think its more of an emotion thing because the documentation for importMap is not very clear.
I can make it partially work with the .babelrc below but it throws a warning when I use xstyled styled.box and it doesn't add labels to xstyled's
Sandbox if anyone wants to test sandbox
Error:![image](https://user-images.githubusercontent.com/6037236/114853182-d57fed80-9de3-11eb-8700-a388ca8e515b.png)