I’m trying to implement the React SWC wrappers and I’m not quite getting the expected result.
I’ve adapted the React SWC Starter to fit my build process/UXP setup and I’m able to render SWC components but they’re not always loading all the styling (so far this only applies to buttons).
The starter works fine and renders components as expected, although it logs a load of unexpected end of JSON input
warnings.
My version doesn’t log any warnings, but I get this error:
My version renders all the HTML and some of the styles - note that Divider
and Switch
render correctly, but buttons are missing borders/background colour, although they are rendering :hover
styles:
<Theme theme="spectrum" scale="medium" color="light">
<div className="flex flex-col">
<div className="flex flex-row flex-wrap justify-content-evenly">
<ActionButton toggles>
<div slot="icon">💊</div>
Action Button
</ActionButton>
<Divider
size="m"
vertical
style={{ alignSelf: "stretch", height: "auto" }}
className="mx-16"
/>
<Button variant="accent" size="m">
Button
</Button>
<Divider
size="m"
vertical
style={{ alignSelf: "stretch", height: "auto" }}
className="mx-16"
/>
<Switch emphasized label="switch">
Test switch
</Switch>
</div>
</div>
</Theme>
I’ve installed both the @swc-uxp-wrappers/link
and @swc-react/link@version
packages for each component, installed @swc-react/theme
and @swc-react/utils
, added the resolutions to package.json, imported and added alias:aliases
to resolve
in my Webpack config, and wrapped the components in <Theme>
.
I’m at a bit of a loss as to why I’m only getting some of the styling and not all. My best guess is that it might be something to do with my Webpack CSS tooling? I build for SASS and include a utility class library:
[
"style-loader",
{
loader: "css-loader",
options: {
sourceMap: true,
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
sassOptions: {
includePaths: [resolve("./node_modules/uniformcss")],
},
},
},
]
The only other significant difference between my version and the React SWC Starter is how React is mounted - my version uses the method used in the React Starter, but I don’t really see how that would make a difference.
I’ve tested this in UXP 7.2 and 7.3.
Anyone got any ideas? I’m not looking forward to the prospect of rebuilding my plugin on top of the SWC one!