Same className in production at version 5.x - Githubissues

styled-components / babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components

MIT License

1.07k stars 141 forks source link

Same className in production at version 5.x #277

Open yee94 opened 4 years ago

yee94 commented 4 years ago

https://github.com/styled-components/babel-plugin-styled-components/issues/24

I think this bug appeared again in 5.x.

// file1
const Container = styled.div`xxxx`;

// file2
const Container = styled.div`xxxx`;

The above code is normal in the development environment of development. But after production, they have the same className.

jtomaszewski commented 4 years ago

Having this right now as well. Maybe related with https://github.com/styled-components/babel-plugin-styled-components/issues/271 .

Interesting observation from our side:

we have some component files at src/features/... and some at src/common/....
we have a file at ./package.json but also at src/common/package.json. (This is because our src/common/ directory is actually a git subrepo that is shared between multiple projects.)
if we remove the src/common/package.json file, the problem disappears.

So maybe as described in https://github.com/styled-components/babel-plugin-styled-components/issues/271 , if there are components being built by several projects, then there's some hash collision happening in https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/visitors/displayNameAndId.js#L95 ... Not sure, I might be completely wrong, but just adding our three cents.