Rollup: Using the "styled" tag in runtime is not supported

[Glazy]

Environment

rollup: ^1.2.2
linaria: ^1.3.1

Description

Project is TypeScript + Linaria transpiled via Babel using @babel/preset-typescript. The module bundler I am using is rollup. Despite having included the linaria/babel preset in my babel.config.js file I am still seeing an error in the console: Error: Using the "styled" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

Reproducible Demo

/**
 * babel.config.js
 */

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    '@babel/preset-react',
    'linaria/babel',
  ],
};

/**
 * rollup.config.js
 */

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import linaria from 'linaria/rollup';
import css from 'rollup-plugin-css-only';
import pkg from './package.json';

const extensions = ['.js', '.jsx', '.ts', '.tsx'];

const name = 'RollupTypeScriptBabel';

export default {
  input: './src/index.ts',

  external: ['react', 'react-dom'],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs({
      namedExports: {
        '../../node_modules/linaria/react.js': ['styled'],
        '../../node_modules/react-is/index.js': ['isElement', 'isValidElementType', 'ForwardRef'],
      },
    }),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),

    linaria({
      sourceMap: process.env.NODE_ENV !== 'production',
      evaluate: true,
    }),

    css({
      output: 'styles.css',
    }),
  ],

  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'es',
    },
  ],
};

/**
 * BasicImageViewer.tsx
 */
import { styled } from 'linaria/react';

const BasicImageViewer = styled.img`
  width: 250px;
  height: 250px;
`;

export default BasicImageViewer;

[satya164]

Can you post your code? How are you importing styled tag? If you don't use ES modules to import it, our babel plugin won't understand it. We can add an option to disable this check however if it's important for you.

[Glazy]

Thanks for the quick response @satya164!

I have updated my original issue with an example component to illustrate my usage 👍

[satya164]

I don't have much experience with rollup, so not sure about plugin ordering. Linaria needs to run before babel, have you tried adding the linaria plugin before babel?

[Glazy]

Yeah, I originally had them the other way around and have just tried it again without success.

    // other plugins
    linaria({
      sourceMap: process.env.NODE_ENV !== 'production',
      evaluate: true,
    }),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),
    // more plugins

[satya164]

I'm tagging @johanholmerin who implemented the rollup plugin. Maybe he will be able to help you.

Sorry, I'm not very familiar with rollup.

[Glazy]

No problem, thanks for your help so far 👊

Whenever I get this resolved, if I think there is space for improvement, I will make a PR to the rollup section of the documentation 👍

[mattoni]

Just wondering if there has been an update to this or if more information is available. I'm running into this as well with a similar setup.

[jednano]

I'm getting the same error when using #285 (comment)

[mattoni]

@johanholmerin any chance you can look into this? it's a show stopper unfortunately.

[johanholmerin]

Do you have a repo with a minimal reproduction?

[mattoni]

Not completely minimal, but here is one that suffers from the issue:

https://github.com/mattoni/linaria-test

[johanholmerin]

Have already seen that one. Couldn't reproduce. That's why I asked for a minimal repo.

[mattoni]

@johanholmerin Okay, I tried to create something much more minimal. Let me know if you are able to reproduce

https://github.com/mattoni/linaria-rollup

[johanholmerin]

If you look at dist/bundle.js you can see that Typescript has transpiled the template literal, which means linaria doesn't recognize it. You can fix this by doing one of the following:

• Change module to esnext in tsconfig.json
• Add @babel/preset-typescript to presets in .babelrc and move the typescript plugin to after linaria
• Remove the typescript plugin and use babel instead. Make sure the babel plugin is after the linaria plugin

[chrstntdd]

Still running into this error as well. Any updates?

[duong-se]

I'm facing with problem when run jest test. So do anybody know how to solve this?

[TMaszko]

Solution will be to remove typescript plugin because it is somehow transforming template literals before linaria is able to recognise it.
proper configuration could look like this like this:

plugins: [babel({
      presets: [
        "linaria/babel",
        "@babel/preset-typescript",
        "@babel/preset-react",
      ],
      extensions: [".ts", ".tsx"],
    }),
...
]

or

 plugins: [ babel({
      presets: ["@babel/preset-typescript", "@babel/preset-react"],
      extensions: [".ts", ".tsx"],
    }),
    linaria(),
   ...]

Extensions key is important because otherwise preset-typescript will not handle typescript files at all.

[duong-se]

@TMaszko I try to use rollup config as you give, but there is an error in runtime css tag not support

[TMaszko]

@tanphamhaiduong please provide a link to the repo where we can reproduce your bug

[duong-se]

@TMaszko I fixed by using this one in package.json

babel": {
    "presets": [
      "@babel/preset-env",
      "linaria/babel"
    ]

and my roll-up config

export default [
  {
    input: 'src/styles/index.scss',
    output: {
      name: 'index',
      format: 'es',
    },
    plugins: [
      babel({
        presets: ['@babel/preset-env', 'linaria/babel'],
        extensions: ['.ts', '.tsx'],
        exclude: 'node_modules/**',
      }),
      linaria({
        sourceMap: process.env.NODE_ENV !== 'production',
        evaluate: true,
      }),
      css({
        output: 'styles.css',
      }),
      scss({
        output: styles => {
          const content = ['./dist/elements.esm.js']
          purify(content, styles, purifyOpions)
        },
      }),
      // Allow bundling cjs modules. Rollup doesn't understand cjs
      commonjs({
        namedExports: {
          '../../node_modules/linaria/react.js': ['styled', 'css'],
          '../../node_modules/react-is/index.js': ['isElement', 'isValidElementType', 'ForwardRef'],
        },
      }),
    ],
  },
]

But seems it doesn't bundle to styles.css like config above

css({
        output: 'styles.css',
      }),

So i'm investigating

[TMaszko]

@tanphamhaiduong so please provide a repo then we will able to help you with further investigation

[willmcvay]

@TMaszko So @tanphamhaiduong is on my team and we found a valid workaround - basically the issue is in the tsconfig - if you set your target to es6, it will strip out the Linaria template literals but if you set the target to ESNEXT, it will preserve them and the rollup plugin works fine with the typescript2 rollup plugin.

We are using the TSDX package to build our app, so this looks a bit janky as had to override the existing rollup config but hopefully the comments explain what is going on: https://github.com/reapit/foundations/blob/master/packages/elements/tsdx.config.js

Basically the plugin order we found worked was (pseudo code);

....
commonjs(),
resolve()
typescript(), // with a tsconfig target set to ESNEXT
linaria(), // to strip out the styles
sass(), // to process the css / sass
babel() // with preset env and plugin transform runtime to transpile down to IE 11
...

Hopefully helps!

BTW, really nice work on the library - was looking for ages for a CSS in JS solution that allows export to a static stylesheet as well as React Components. We distribute a UI lib to our users that exports both React Components and for non-react users, just a stylesheet. With the friendly output classes in the classNameSlug option, it's absolutely the perfect tool for us - thanks for your work 💯

[jayu]

I assume that there is a workaround for this issue. Developers has to be very careful with a rollup unfortunately