Skip to content

70: Migrate from styled-components to emotion#72

Merged
michael-markl merged 1 commit intomainfrom
70-emotion
Jun 11, 2025
Merged

70: Migrate from styled-components to emotion#72
michael-markl merged 1 commit intomainfrom
70-emotion

Conversation

@steffenkleinle
Copy link
Member

@steffenkleinle steffenkleinle commented May 21, 2025 •
edited
Loading

Migrate from styled-components to emotion.
Demo builds are currently failing:

ERROR in ../node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 2:0-257
Module not found: Error: Can't resolve 'stylis' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/cache/dist'
 @ ../node_modules/@emotion/react/dist/emotion-react.browser.esm.js 11:0-24
 @ ../src/Headroom.tsx 109:0-48 132:96-99 137:25-34
 @ ./demo.tsx 89:0-45 139:73-87 167:281-295

ERROR in ../node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 4:0-26
Module not found: Error: Can't resolve '@emotion/memoize' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/cache/dist'
 @ ../node_modules/@emotion/react/dist/emotion-react.browser.esm.js 11:0-24
 @ ../src/Headroom.tsx 109:0-48 132:96-99 137:25-34
 @ ./demo.tsx 89:0-45 139:73-87 167:281-295

ERROR in ../node_modules/@emotion/serialize/dist/emotion-serialize.esm.js 6:0-41
Module not found: Error: Can't resolve '@emotion/unitless' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/serialize/dist'
 @ ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 4:0-28
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

ERROR in ../node_modules/@emotion/serialize/dist/emotion-serialize.esm.js 7:0-39
Module not found: Error: Can't resolve '@emotion/memoize' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/serialize/dist'
 @ ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 4:0-28
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

ERROR in ../node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js 7:0-49
Module not found: Error: Can't resolve '@emotion/is-prop-valid' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/styled/base/dist'
 @ ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 1:0-75 146:16-33
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

ERROR in ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 8:0-32
Module not found: Error: Can't resolve '@emotion/is-prop-valid' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/styled/dist'
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

6 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.99.9 compiled with 6 errors in 1096 ms
error Command failed with exit code 1.

@michael-markl is this be related to esm/tsconfig? Do you have any idea here?

Fixes: #70

@steffenkleinle
Copy link
Member Author

steffenkleinle commented Jun 3, 2025

Demo builds are currently failing:

ERROR in ../node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 2:0-257
Module not found: Error: Can't resolve 'stylis' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/cache/dist'
 @ ../node_modules/@emotion/react/dist/emotion-react.browser.esm.js 11:0-24
 @ ../src/Headroom.tsx 109:0-48 132:96-99 137:25-34
 @ ./demo.tsx 89:0-45 139:73-87 167:281-295

ERROR in ../node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 4:0-26
Module not found: Error: Can't resolve '@emotion/memoize' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/cache/dist'
 @ ../node_modules/@emotion/react/dist/emotion-react.browser.esm.js 11:0-24
 @ ../src/Headroom.tsx 109:0-48 132:96-99 137:25-34
 @ ./demo.tsx 89:0-45 139:73-87 167:281-295

ERROR in ../node_modules/@emotion/serialize/dist/emotion-serialize.esm.js 6:0-41
Module not found: Error: Can't resolve '@emotion/unitless' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/serialize/dist'
 @ ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 4:0-28
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

ERROR in ../node_modules/@emotion/serialize/dist/emotion-serialize.esm.js 7:0-39
Module not found: Error: Can't resolve '@emotion/memoize' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/serialize/dist'
 @ ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 4:0-28
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

ERROR in ../node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js 7:0-49
Module not found: Error: Can't resolve '@emotion/is-prop-valid' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/styled/base/dist'
 @ ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 1:0-75 146:16-33
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

ERROR in ../node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js 8:0-32
Module not found: Error: Can't resolve '@emotion/is-prop-valid' in '/Users/st/digitalfabrik/react-sticky-headroom/node_modules/@emotion/styled/dist'
 @ ./demo.tsx 90:0-37 92:27-33 96:30-36 100:28-34 106:25-31

6 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.99.9 compiled with 6 errors in 1096 ms
error Command failed with exit code 1.

@michael-markl is this be related to esm/tsconfig? Do you have any idea here?

Fixed by removing modules: [resolve('./node_modules')], in webpacks resolve configuration.

@steffenkleinle steffenkleinle linked an issue Jun 3, 2025 that may be closed by this pull request
Migrate from styled-components to emotion #70
Closed
LeandraH
LeandraH approved these changes Jun 5, 2025
View reviewed changes
Copy link
Contributor

@LeandraH LeandraH left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good

Base automatically changed from 69-upgrade-dependencies to main June 11, 2025 13:29
@michael-markl
Copy link
Member

michael-markl commented Jun 11, 2025

It seems I accidentally rebased your last PR onto main instead of merging. I will rebase this PR in a second...

michael-markl
michael-markl approved these changes Jun 11, 2025
View reviewed changes
Copy link
Member

@michael-markl michael-markl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@michael-markl michael-markl merged commit 4620a73 into main Jun 11, 2025
2 checks passed
@michael-markl michael-markl deleted the 70-emotion branch June 11, 2025 13:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@michael-markl michael-markl michael-markl approved these changes

@LeandraH LeandraH LeandraH approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Migrate from styled-components to emotion

3 participants

@steffenkleinle @michael-markl @LeandraH