Unable to integrate linaria 3.0.0-beta.1 in a TypeScript project.

[findawayer]

Environment

• Linaria version: 3.0.0-beta.1
• Bundler (+ version): webpack 5.13.0 & 4.44.2
• Node.js version: 14.15.3
• OS:
  • OS Name: Microsoft Windows 10 Pro
  • OS Version: 10.0.18363 N/A Build 18363
  • OS Manufacturer: Microsoft Corporation
  • OS Configuration: Standalone Workstation
  • OS Build Type: Multiprocessor Free

Description

Trying to set up a new TypeScript React project, bundled with Webpack 5, using Linaria 3 beta as CSS in JS interface. The webpack config file looks like:

// ...
module: {
  rules: [
    {
      test: /\.tsx?$/i,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
        },
        {
          loader: "@linaria/webpack-loader",
          options: {
            sourceMap: isDevelopment,
          },
        },
        {
          loader: "ts-loader",
        },
      ],
    },
    {
      test: /\.css$/i,
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    },
  ],
},
plugins: [
  new MiniCssExtractPlugin({
    filename: "styles.css",
  }),
],
// ...

Click to see the full version.

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => {
  const isDevelopment = env !== "production";

  return {
    mode: isDevelopment ? "development" : "production",
    entry: path.join(__dirname, "src", "index.tsx"),
    devtool: "source-map",
    output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "./build"),
    },
    devServer: {
      contentBase: path.resolve(__dirname, "public"),
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/i,
          exclude: /node_modules/,
          use: [
            {
              loader: "babel-loader",
            },
            {
              loader: "@linaria/webpack-loader",
              options: {
                sourceMap: isDevelopment,
              },
            },
            {
              loader: "ts-loader",
            },
          ],
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
      ],
    },
    plugins: [
      new HTMLWebpackPlugin({
        inject: true,
        template: path.resolve("public/index.html"),
        chunks: "all",
      }),
      new MiniCssExtractPlugin({
        filename: "styles.css",
      }),
    ],
    resolve: {
      extensions: [".js", ".ts", ".tsx"],
    },
  };
};

Running a dev server with webpack serve gives the following error: in

css.js:2 Uncaught Error: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.
    at Module.css (css.js:2)
    at Object../src/App.tsx (App.tsx:4)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Object../src/index.tsx (index.tsx:3)
    at __webpack_require__ (bootstrap:21)
    at startup:4
    at startup:6

Reproducible Demo

Just made a minimal reproduction of the issue. Reproduction steps are:

1. git clone
2. npm install
3. npm start
4. Then inspect in-browser

Also made a branch with [JavaScript version](https://github.com/findawayer/linaria3-ts-webpack-test/tree/js], do the same, linaria does not complain about babel settings. Added comparison link between 2 branches FYI.

[findawayer]

Never mind, I googled it out and found the same issue #197; followed the suggestion in linked page and it worked.