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;

[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 👍

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