Next.js: The latest version of styled-components throws error

[drejohnson]

Using the 'with-styled-components' example and upgrading styled-components to v2.1.0 results in the error: Unfortunately nesting is not supported by styled-jsx

[Sly777]

+1. I cannot use styled-components on my project after upgrade new versions. I added screenshot below.

next.js: 3.0.0-beta16
styled-components: 2.1.0
react: 15.6.1
react-dom: 15.6.1

[drejohnson]

I got it to work by setting "preprocess": true in the babel styled-component plugin

"plugins": [
    ["styled-components", {
      "ssr": true,
      "displayName": true,
      "preprocess": true
    }]
  ]

[Sly777]

Thanks @drejohnson! It works. But I think there's a conflict between styled-jsx and styled-components (even we disabled styled-jsx) also "preprocess" feature is experimental. That means they can change or remove this feature on future releases.

[Cinamonas]

@drejohnson, unfortunately, preprocess introduces other issues. For example, you can no longer reference other styled components:

const Item = styled.div`
  border: 1px solid black;
`;

const Name = styled.h2`
  font-size: 14px;

  ${Item}:hover & {
    text-decoration: underline;
  }
`;

[drejohnson]

@Cinamonas Nice catch! I just reverted back to v2.0.0 for now. I hope this gets resolved soon!

[markthethomas]

seeing this too, frustrating. Interested in helping find a fix! :)

[Cinamonas]

Since styled-components clashes with styled-jsx, I decided to investigate how I can remove the latter from the pipeline. This is how I do it for now:

// babel-preset.js
const preset = require('next/babel');

preset.plugins = removeStyledJsx(preset.plugins);

module.exports = preset;

function removeStyledJsx(plugins) {
  return plugins.filter(plugin => plugin.indexOf('styled-jsx') === -1);
}

// .babelrc
{
  "presets": [
    "./babel-preset" // instead of `next/babel`
  ],
  // …
}

This fixes the issue and allows removing experimental preprocess: true from babel-plugin-styled-components options.

[timneutkens]

Closing this as duplicate of #2384