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

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;

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 23 (12 by maintainers)

Most upvoted comments

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"],
    }),
...
]

 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.

TMaszko on May 26, 2020

@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 💯

willmcvay on Jun 10, 2020

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.

mattoni on May 7, 2019

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 👍

Glazy on Mar 22, 2019

I’m getting the same error when using https://github.com/callstack/linaria/issues/285#issuecomment-480587977

jednano on May 28, 2019

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?

satya164 on Mar 22, 2019