CSS not apply to elements in V6 with Next.js

[mydearxym]

hi team,

recently i try to replace styled-component with linaria, but css seems not work.

Environment

minimal Nextjs@14 with latest Linaria@6

• Linaria version: 6.0.0
• Bundler (+ version): webpack@5
• Node.js version: v20.3.1
• OS: Mac

.babelrc:

{
  "presets": ["next/babel", "@wyw-in-js"],
  "plugins": []
}

wyw-in-js.config.js

module.exports = {
  evaluate: true,
  displayName: true,
};

next.js config

const withLinaria = require("next-with-linaria");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const nextConfig = {
  webpack: (config, options) => {
    config.plugins.push(new MiniCssExtractPlugin());
    config.module.rules.push(
      {
        test: /\.ts?$/,
        use: [
          {
            loader: "@wyw-in-js/webpack-loader",
          },
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      }
    );

    return config;
  },
};

module.exports = withLinaria(nextConfig);

related packages:

  "dependencies": {
    "@linaria/core": "^6.0.0",
    "@linaria/react": "^6.0.0",
    "next": "14.0.4",
    "next-with-linaria": "^0.6.0",
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@wyw-in-js/babel-preset": "^0.2.2",
    "@wyw-in-js/webpack-loader": "^0.2.2",

Description

project is running, but seems Linaria only recognized element tag, the CSS rules are not apply to it

Reproducible Demo

https://github.com/groupher/wyw-demo

[harumijang]

Am facing the same issue with Next 14. Commenting to follow

[JonCognioDigital]

Anyone solved this yet? Would be great to see a reference implementation.

[victor-bts]

Was only able to get it with page routing and next.js 14 using https://www.npmjs.com/package/next-with-linaria. Once I started to use app routing, this method no longer worked. I ended up switching Linaria over to Emotion. Implementation and import names are compatible so there was almost zero re-work. I know the bundle size implication of Emotion but due to the variety of our components (small), we chose to eat the cost as a trade-off for next.js 14 compatibility. I would have liked to have both but it's not within my pay grade to ensure compatibility between the two.

[straxico]

anyone can work with next 14 app router and linaria?

[aberba]

I think there needs to be an SWC plugin. There was one but currently outdated: https://github.com/arendjr/linaria-swc