Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Linaria + Next.js webpack configuration

See original GitHub issue

Using react and nextjs. The div element gets the className: ci74fup but no styles are applied. What am I missing? Am I limited to using only the react-helpers?

import React from 'react'
import Head from 'next/head'
import { css } from 'linaria';

const container = css`
	background-color: red;
	`;

export default () => {
	return (
	<>
		<Head><title>CSS Playground</title></Head>
		<div className={container}>
			Hello World
		</div>
	</>
	)
}

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

linaria-issue-1

Issue Analytics

State:
Created 5 years ago
Comments:18 (2 by maintainers)

Top GitHub Comments

9reactions

trongthanhcommented, Jun 10, 2020

Thank @LukasBombach. Your config is really nice and clean.

However, it doesn’t work with latest Next.js 9.4 for next dev mode. It is because during dev mode, config.module.rules[0].use is an Array for the client side build. Something like this:

use: [
  '.../node_modules/@next/react-refresh-utils/loader.js',
  { loader: 'next-babel-loader', options: [Object] }
]

So I have adjusted the config a little to cater for both dev and production build:

const withCSS = require('@zeit/next-css');

module.exports = withCSS({
  webpack(config) {
    // retrieve the rule without knowing its order
    const jsLoaderRule = config.module.rules.find(
      (rule) => rule.test instanceof RegExp && rule.test.test('.js')
    );
    const linariaLoader = {
      loader: 'linaria/loader',
      options: {
        sourceMap: process.env.NODE_ENV !== 'production',
      },
    };
    if (Array.isArray(jsLoaderRule.use)) {
      jsLoaderRule.use.push(linariaLoader);
    } else {
      jsLoaderRule.use = [jsLoaderRule.use, linariaLoader];
    }
    return config;
  },
});

4reactions

LukasBombachcommented, Mar 29, 2020

hey @orpheus thanks for your answer, I could simplify this even:

add linaria

yarn add -E linaria

.babelrc

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

next.config.js

const withCSS = require("@zeit/next-css");

module.exports = withCSS({
  webpack(config, { isServer }) {
    config.module.rules[0].use = [
      config.module.rules[0].use,
      {
        loader: "linaria/loader",
        options: {
          sourceMap: process.env.NODE_ENV !== "production"
        }
      }
    ];
    return config;
  }
});

I made a tutorial: https://gist.github.com/LukasBombach/dc46546919ecf71b2aa68688ee767e4e

Top Results From Across the Web

How can i use Linaria with NextJS? - Stack Overflow

There is a recent linaria issue on this topic. It seems people are finding success with the following next.config.js config:

Custom Webpack Config - Next.js

The webpack function is executed twice, once for the server and once for the client. This allows you to distinguish between client and...

Next.js, Preact, TS, twin.macro, Linaria - CodeSandbox

CodeSandbox is an online editor tailored for web applications.

next-linaria - npm Package Health Analysis - Snyk

Adds Linaria to built-in CSS support in Next.js. The version 1.0.0 and above only works with linaria@3. If you need support for linaria@2,...

@biowaffeln/next-linaria NPM | npm.io

Check @biowaffeln/next-linaria 0.0.1 package - Last release 0.0.1 with MIT licence at our NPM ... module.exports = withLinaria(/* webpack config here */);.