Linaria: Styling custom components with NextJs

[TheJohnPython]

I'm using NextJs with linaria and trying to apply styled on custom component:

function CoolComponent({ className, style }) {
  return (
    <div className={className} style={style}>My Component</div>
  );
}

const StyledCoolComponent = styled(CoolComponent)`
  background-color: red;
`;

and get error:

import React from "react";
       ^^^^^

SyntaxError: Unexpected identifier

[TheJohnPython]

But it works if i pass anonymous function:

const StyledCoolComponent = styled(
  p => (<div className={p.className}>My Component</div>)
)`
  background-color: red;
`

[satya164]

Do you have a .babelrc/babel.config.js file? You need it

[TheJohnPython]

Do you have a .babelrc/babel.config.js file? You need it

yes

{
  "presets": [
    "next/babel",
    "linaria/babel"
  ]
}

like in this example https://github.com/zeit/next.js/tree/canary/examples/with-linaria

[eviL-ivan]

Same issue:https://github.com/callstack/linaria/issues/454

Codesandbox example

[mikestopcontinues]

Yeah, this has been a big headache trying to port from styled-components. I believe it might be a result of using the wrong babel bundling strategy (module: true vs module: false).

[talentlessguy]

Linaria doesn't work in Next.js, it just produces classes not assigned to anything.

import React from 'react'
import { styled } from 'linaria/react'

const Center = styled.div`
  display: flex;

[mikestopcontinues]

@talentlessguy, check the README again. Linaria definitely does work with Next if you set up everything correctly. If you're sure your config is correct, then you should create a new issue. This thread is for a different problem.

[Tarnadas]

I also stumbled across this problem and found out that applying styled on an already transpired/bundled Component from a dependency, everything works fine.

import { Headroom } from 'react-headroom'
...
styled(Headroom)...

This doesn't throw an error since it's already transpired. There must be a problem with Next config that breaks Babel transpilation

[Jayphen]

It's probably not helpful, but just confirming this still occurs with the latest version of Next + Linaria's latest beta. I'm not smart enough to figure out how to fix this.

[talentlessguy]

@mikestopcontinues

I have linaria babel plugin installed:

{ 
  "presets": ["next/babel", "linaria/babel"]
}

[mikestopcontinues]

@talentlessguy you've also got to update your next.config.js. Look through all the files here and see if you're missing anything else. https://github.com/zeit/next.js/tree/master/examples/with-linaria

[talentlessguy]

@mikestopcontinues hm ok it works now but only with withCSS plugin but Next.js already supports CSS modules and global CSS now.

[Pytal]

Anyone able to get Linaria working with CSS modules and Next.js?

[mikestopcontinues]

It works perfectly for me just following the readme and example I posted above. @Pytal

[Jayphen]

The above comments are a little bit confusing and a diversion from the purpose of this issue.

The Next.js example is still broken when wrapping a React component with styled, as seen at https://codesandbox.io/embed/hello-world-bu9q8

The following pattern does not work

function Component(props) { return <div {…props}>Hello</div> }

const StyledComponent = styled(Component)`color: red`

This fails to compile:

Failed to compile
./pages/index.js
/sandbox/pages/index.js:4
import React from "react";
       ^^^^^

SyntaxError: Unexpected identifier

This is still an issue and seems to be something to do with the way Webpack or Babel are configured in the example.

[fernandojbf]

I think the problem is between next/babel and linaria.
If you remove next/babel and add a few ones to make the project working (like preset-env and preset-react) the problem is solved.

A workaround is removing your .babelrc from the project and add the configuration to your linaria.config.js like:

{
// ...
babelOptions: {
    presets: ["@babel/preset-env", "@babel/preset-react", "linaria/babel"]
  }
}

This solves the issue.
(I need to check, in terms of build result, if everything looks good, but with a quick look it seems ok.)

[mikestopcontinues]

@fernandojbf, that's a great short-term solution, and I'm grateful for it. Though next may update to include other crucial config in their preset. We shouldn't plan against it. There must be something fixable about next's preset or linaria's preset to ensure the problem doesn't come back.

[fernandojbf]

@mikestopcontinues yes, this was intended to be short-term solution. I've tested some configurations on the next/babel without success. But i will investigate further this later :)

[jayu]

It would be awesome to support next.js. If there is a real issue with configs we should solve it or write better docs on how to integrate those two projects. I will put it on my list to check what's exactly going on.

[twolettername]

I ran into this one today with the set-up detailed in the next.js example config mentioned above.

Messing around with next.js next/babel preset, modifying these two to be different from one another fixes the build (though changing the pragma option on preset-react breaks when it renders):

https://github.com/zeit/next.js/blob/v9.3.5/packages/next/build/babel/preset.ts#L130
https://github.com/zeit/next.js/blob/v9.3.5/packages/next/build/babel/preset.ts#L115

It starts to break again once they're both set to the same name, though. Note that it doesn't matter what you set the option to, as long as they're both the same (so it isn't any special handling on the name itself but what it's doing - setting both pragma options to "foo" still breaks).

Diving deeper, their jsx-pragma plugin modifies imports to be:

import React from 'react';
var __jsx = React.createElement;

I can't tell anything more, though (would need to dive a lot more into how Babel traverses the AST and where, when, and how Linaria comes into play here), though I do know the issue occurs when the plugin is modifying files via babel's AST parser / traverser / whatever (very unfamiliar with it).

This would explain why https://github.com/callstack/linaria/issues/447#issuecomment-592679207 works: you're removing this plugin entirely.

I'm not sure about what jsx-pragma is even for and so I'm not sure what the effects of working around this would be - hopefully this helps anyone else more familiar with linaria, babel, and next.js narrow the issue down.

[jayu]

Thanks @twolettername, your research really helps to understand what causes the issue. During the evaluation, we cannot have any import statements, because node does not understand them, they should be transformed to require statements.

The problem is this jsx-pragma which is adding this import. It is not a responsible behavior since it may break many environments. It was introduced in https://github.com/zeit/next.js/pull/8350 and causes issue like https://github.com/zeit/next.js/issues/9253. Next uses it for some optimizations.

However, the issue will be solved in Linaria 2.0 release, due to too a new evaluation strategy.

For now, to fix it, you should use the lastest Linaria beta for1.4.0 (or stable 1.4.0 in future) or alpha of 2.0.0 (or stable 2.0.0) in the future with the following config in linaria.config.js:
At the moment of writing this, you can yarn add [email protected]

const shaker = require('linaria/lib/babel/evaluators/shaker').default;

module.exports = {
    displayName: process.env.NODE_ENV !== 'production',
    rules: [
        {
            action: shaker,
        },
        {
            test: /\/node_modules\//,
            action: 'ignore',
        },
    ],
};

It enables mentioned shaker strategy and this troublesome react import is no longer contained in file for evaluation.

[marbiano]

Next.js example fixed: https://github.com/vercel/next.js/pull/13568 :)

[Mizumaki]

For me, this library works well

https://github.com/Mistereo/next-linaria