Nextjs: Styled-components-breakpoint throws webpack error

[arthurpeck]

Hi, After sucessfully used the styled-components-breakpoint in React in the past, I wanted to add styled-components-breakpoint to my components in NextJS. When I use it, it throws an webpack error:

TypeError: styled_components_breakpoint__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function

Component:

import breakpoint from 'styled-components-breakpoint';

const Logo = styled.img`
display: block;

${breakpoint('mobile')`
    width: 100%;
`}

${breakpoint('tablet')`
    width: 60%;
`}

${breakpoint('desktop')`
    width: 30%;
`}
;

next.config.js:

// next.config.js const withOptimizedImages = require('next-optimized-images'); const path = require('path'); module.exports = withOptimizedImages({ webpack(config) { config.resolve.alias.images = path.join(__dirname, 'public/images'); return config; }, });

Why is it throwing an error? I can use styled-components perfectly without breakpoints and webpack compiles...

[karlas]

Same here with v3. Downgrading to version 2.1.1 works ok

[chargome]

Fixed the problem for me:

import { breakpoint } from 'styled-components-breakpoint';

[ernestrudziec]

import { breakpoint } from 'styled-components-breakpoint';

helped me also ;)

[eeshankeni]

it legit blows my mind we had the same silly issue, i need to code high less often