"Styled" is not working when using production components

[utkarshk384]

Environment

• Linaria version: ^3.0.0-beta.4 (@linaria/core) & ^3.0.0-beta.4
• Bundler (+ version): ^2.56.3(rollup)
• Node.js version: v14.17.0
• OS: macOS Bigsur 11.3.1

Description

So I'm currently trying to build a component library using lerna and linaria due to its build time CSS compilation and in doing so I wanted to avoid code duplication so I thought of making a wrapper component that would be used in every component throughout the library.

However, in doing so I can't seem to get past the following error:

Uncaught Error: Using the "styled" tag in runtime is not supported.

Upon further digging, I found out that this error only happens when I try to import a linaria-styled component that is defined in another package.

Example

I have the following imports in the reproducible repo

//src/app.tsx

//Doesn't Work ;(
import { StyledWrapper, StyledComponentType, SpacingType, PropsType } from './wrapper/dist/esm/wrapper/src/wrapper'

//Works! ;)
import { StyledWrapper, StyledComponentType, SpacingType, PropsType } from './wrapper/src/wrapper'; 

The first one is an import from the production build of the wrapper component using rollup and the second one is the component that is straight from the source code. If the first one is active then I get the error that I mentioned above in the browser console and if I use the second code everything seems to compile as expected.

Reproducible Demo

Steps to reproduce

Repo link

1. Clone the repo by running https://github.com/utkarshk384/repo-linaria.git
2. Then cd into the directory and yarn install by cd ./repo-linaria && yarn
3. Run yarn build to build the wrapper component(The custom component wrapper) Then after Successfully created message press ctrl + c since rollup doesn't seem to exit control flow automatically.
4. Run yarn dev and open your favorite web browser and head to localhost:8080.
5. Check your web console for the error.

[utkarshk384]

Any status update @Anber regarding the issue?

[Anber]

Hi @utkarshk384!
Sorry for the late response.

That error says that you are trying to import files without processing them through Linaria. It happens because you apply @linaria/webpack-loader only for ts and tsx files. So you just need to fix regexp in the webpack configuration: test: /\.(t|j)sx?$/, instead of test: /\.tsx?$/,.

[utkarshk384]

@Anber Thank you for the response.
I tried to add the change as you mentioned and it worked on the repro. However, when I tried to implement this in my storybook webpack config. It doesn't seem to fix the issue. Here is my storybook main.js

const SCSSPreset = {
  name: "@storybook/preset-scss",
  options: {
    cssLoaderOptions: {
      modules: {
        localIdentName: "[name]__[local]",
      },
    },
  },
};

module.exports = {
  webpackFinal: (config, { configType }) => {
    config.resolve.plugins = config.resolve.plugins || [];

    config.module.rules[0].test = /\.(t|j)sx?$/;

    config.module.rules[0].use.push({
          loader: "@linaria/webpack-loader",
          options: {
            babelOptions: {
              presets: [
                require.resolve("@babel/preset-env"),
                require.resolve("@babel/preset-typescript"),
                require.resolve("@linaria/babel-preset"),
              ],
            },
          }
        });

    return config;
  },
  stories: [
    "../packages/**/stories/*.stories.mdx",
    "../packages/**/stories/*.stories.tsx"
  ],
  addons: [
    "@storybook/addon-a11y",
    SCSSPreset,
    "@storybook/addon-essentials",
  ],
};

The console.log of config.module.rules[0] is as follows:

test: /\.(t|j)sx?$/,
  use: [
    {
      loader: '/Volumes/Storage/coding/Projects/node_modules/babel-loader/lib/index.js',
      options: [Object]
    },
    { loader: '@linaria/webpack-loader', options: [Object] }
  ],
  include: [ '/Volumes/Storage/coding/Projects/Personal/Seabed UI' ],
  exclude: /node_modules/

Previous regex was is the following: /\.(mjs|tsx?|jsx?)$/

If you don't mind it then can you please look into what I am missing?
Thank you for maintaining this awesome library.

[Anber]

The previous regex was ok since it already covers js, jsx and even mjs. Is it possible that imported components are out of include folders or in exclude folders?

[utkarshk384]

All the components are within /Volumes/Storage/coding/Projects/Personal/Seabed UI/packages directory. None of the packages are outside of that. The only excluded folder is the node_modules directory.

The tree structure of the project is as follows:

.
├── .linariacache/
│ └── Cached files
├── .storybook/
│ └── main.js
├── packages/
│ └── components...
├── node_modules/
│ └── node packages...
└── lerna.json