Regression: "Using styled tag in runtime is not supported" on valid code

[PierreGUI]

Environment

"@linaria/react": "^4.3.6",
"@linaria/core": "^4.2.9",
"@linaria/webpack-loader": "^4.1.16",
"@linaria/shaker": "^4.2.10",
"babel-loader": "^9.1.2",
"webpack": "^5.76.1",

Description

This error popped with v4, while it used to work fine with Linaria v2 (I'm migrating from).
Note I have experienced this error both during build and runtime (after fixing build by commenting out code):
Uncaught Error: Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

Reproducible Demo

Still trying to make one. It happens in my huge codebase but isn't easy to reproduce at a small scale.

[WJCHumble]

@PierreGUI Have you configured @linaria/babel-preset? If not, you can configure it, refer to here https://github.com/callstack/linaria/blob/master/docs/CONFIGURATION.md#linariababel-preset

[PierreGUI]

Yes. I'm migrating from Linaria 2, and the setup is the same (except for the plugin's name).
For reference I use these presets:

["@babel/preset-env", {...}],
"@babel/preset-typescript",
["@babel/preset-react", { "runtime": "automatic" }],
"@linaria"

[WJCHumble]

@PierreGUI Are you using a Windows computer? If yes, please create a new linaria.config.js file and add the following configuration:

const nodeModulesRegExp = /[\\/]node_modules[\\/]/;

module.exports = {
    rules: [
        {
            action: require.resolve('@linaria/shaker'),
        },
        {
            test: nodeModulesRegExp,
            action: 'ignore',
        },
        {
            test: (filename, code) => {
                if (!nodeModulesRegExp.test(filename)) {
                    return false;
                }

                return /(?:^|\n|;)\s*(?:export|import)\s+/.test(code);
            },
            action: require.resolve('@linaria/shaker'),
        }
    ]
};

[PierreGUI]

I'm not using a window computer. I tried your rules but it didn't solve the problem.

Worth mentioning the error appears to originate from my own modules, not third parties. In these files I use Linaria, but it looks like the styled function and corresponding style is not processed into a CSS file.
See backtrace:\

caught Error: Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly. See https://github.com/callstack/linaria#setup
    at Proxy.<anonymous> (index.mjs:41:1)
    at ./src/components/shared/Icons.tsx (Icons.tsx:8:43)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/components/shared/Toasts.tsx (Texts.tsx:199:2)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/components/abstract/ErrorBoundary.tsx (Content.tsx:71:23)
    at __webpack_require__ (bootstrap:19:1)
    at ./src/components/clients/pages/Header.tsx (UserMenu.view.tsx:181:32)

[WJCHumble]

@PierreGUI It looks like your Babel Transform is not applied, can you provide your webpack.config.js configuration? Or give a minimal Webpack configuration related repo.

[PierreGUI]

webpack.config.js (excerpt):

{
  entry: {
    home: resolve('src/home.ts'),
    profile: resolve('src/profile.ts'),
    settings: resolve('src/settings.ts'),
  },
  module: {
    rules: [
      {
        include: [resolve('src')],
        test: /\.(j|t)sx?$/,
        use: [
          { loader: 'babel-loader' },
          {
            loader: '@linaria/webpack5-loader',
            options: {
              displayName: mode === 'development',
              sourceMap: false,
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
}

This is almost exactly the same config I use with Linaria 2 (successfully). LMK if you find anything.

[Anber]

@PierreGUI, have you managed to reproduce it?

[PierreGUI]

@Anber not this one, tbh I forgot about it because I'm blocked by other issues at build time (namely, #1226 (comment) and #1262 (comment))
With those fixed, hopefully I'll get a successful build and be able to try again.

[Clasen00]

Guys, any updates about this problem? Im facing the same problem when trying render my component react 18 component through jest .

[Anber]

Hi @Clasen00,

This error occurs only when NODE_ENV is neither 'test' nor 'production'. For the test environment, it should generate mocked class names. Which version of Linaria do you use?

[Clasen00]

@Anber currently Im using a 3.0.0-beta.13 version.
Could you please suggest to me how I may fix this problem?

[Anber]

@Clasen00, you can either add @linaria preset to your jest babel config or upgrade Linaria to 5.0

[lixingjuan]

Hi, I encountered the same problem, I dropped the linaria related package to 5, and the problem solved.

😭 BTW, This question tossed me for a whole day

[Anber]

Hi @lixingjuan! If you want to use Linaria 6+, you need to replace @linaria/webpack-loader with @wyw-in-js/webpack-loader. https://github.com/callstack/linaria/blob/master/docs/MIGRATION_GUIDE.md#for-users