Incorrect styles applied bug after v1.10.5
iDVB opened this issue · 3 comments
Likely similar to #261 and #351 but their resolution does not seem to work/apply.
Env:
@ourcompany/react-ui-components
= Custom Styled Components UI lib
projectx
= Project that consumes/uses the above lib
We too are noticing that our projects (projectx
) that consume our ui lib (@ourcompany/react-ui-components
) are experiencing this same issue with the wrong styles being applied.
The way we build
Our @ourcompany/react-ui-components
lib is bundling with rollup and the following .babelrc.js
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["babel-plugin-styled-components"],
exclude: "node_modules/**"
}
Our consuming repo/project (projectx
) is using gatsbyjs and gatsby-plugin-styled-components
Version of babel-plugin-styled-components
We've had to lock babel-plugin-styled-components to v1.10.5
in order to get it working right. Even tried updated everything to latest v2.0.2
and still broken.
Questions
- What IS the recommended way to author/bundle a styled-components lib. Do you use
babel-plugin-styled-components
on the lib and again on the consuming project (excluding node_modules, eg. that lib) - Why did our configuration suddenly stop working with
babel-plugin-styled-componentsv1.10.5
? Anything after this and we get this same incorrect styles being applied bug. - Are there any example / existing repos that have this working that I could look at for guidance?
Great questions...
-
I think yes, mainly for SSR. For client-side, it wouldn't matter much except for debugging. For the lib, you would want to use the
namespace
option to avoid conflicting with application SSR, I think. https://styled-components.com/docs/tooling#namespace -
I don't know yet, but I'd like to figure it out. There was very little change in v1.10.6. Am I understanding that you tried all the versions between
v1.10.5
andv2.0.2
? -
I'd be interested in that too!
-
thanks @agriffis I'll try that
namespace
option. We use Gatsby so most things are pre-rendered (SSR) and client-side. -
To be 100% fair I'm not sure it happened in exactly
v1.10.6
I just knowv1.10.5
works and the latest for a while now has not. To make matters worse, we're now dealing with this _interopRequireDefault is not a function issue with seemingly no fix yet... so I can't even seem to test out other options until I have that fixed.
I will keep at trying to fix this new _interopRequireDefault
issue and once its fixed will jump back into this one and see if I can get you an exact version where things go wrong.
@agriffis ok.... I just identified that the issue is NOT with a specific version of babel-plugin-styled-components
but more about making sure both the custom lib and the consuming project both use the SAME version. So we updated to the latest version and just used a resolution in the consuming project to lock it to the same version and everything works.
Odd. I wonder if this sensitivity is all that was introduced at some point.