styled.css.withConfig is not a function Error using Rollup

[fjn2]

I'm using Rollup for build and distribute my React components .

When I use css from styled component, any import in that bundle fails
ie:

import styled, { css } from 'styled-components';

...
  const checkedStyles = css`
    background: red;
  `;
...

The whole import fails (see error below).
There is not errors in the rollup build.
If I remove the css (checkedStyles) component start working again

rollup config

import commonjs from 'rollup-plugin-commonjs';
import babel from "rollup-plugin-babel";
import resolve from 'rollup-plugin-node-resolve';
import css from  'rollup-plugin-css-porter';
import svg from 'rollup-plugin-svg';

module.exports = {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    name: 'rolluptest',
    format: 'cjs',
    globals: {
      'styled-components': 'styled'
    }
  },
  external: ['react', 'styled-components'],
  plugins: [
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    css(),
    svg()
  ]
};

babel rc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-styled-components"
  ]
}

Environment Information

System:

• OS: macOS 10.14.5
• CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
• Memory: 112.26 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 8.9.4 - ~/.nvm/versions/node/v8.9.4/bin/node
• npm: 6.4.0 - ~/.nvm/versions/node/v8.9.4/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.9.3 => 1.9.3
• styled-components: ^2.4.1 => 2.4.1

Expected Behavior

Show the components imported from Rollup bundle.

Actual Behavior

This error point to this line
var checkedStyles = styled.css(["background:red;"]);

I've checked several tickets, but any of those help me to solve this.

Thanks in advance.

[fredconv]

Hi

got the exact same problem here:
with a more recent version:
"babel-plugin-styled-components": "1.10.0",
"styled-components": "3.4.10"
"rollup": "0.56.4",
"rollup-plugin-babel": "4.3.2",
"rollup-plugin-commonjs": "8.3.0",
"rollup-plugin-image-files": "1.3.0",
"rollup-plugin-node-resolve": "3.0.3",
"rollup-plugin-svg": "1.0.1",
"rollup-plugin-uglify": "6.0.2",

Any idea ?

[chinesedfan]

@fjn2 Can you provide more codes of the css (checkedStyles) component? Then we can reproduce this issue easier.

[daraclare]

I've the same issue as above, did you guys find a solution?

[JulienKode]

I got the same issue I'm using 4.3.2

Did anyone find a solution?

It can be related to styled-components/babel-plugin-styled-components#222

[daraclare]

This might be a little late for most here, but for anyone who's new, this seems to be an ugly fix for this issue. Instead of importing css as a named import, use the following instead.

const css = require('styled-components').css

You may need to do the same with keyframes and ThemeProvider.

[mtt87]

@coolgod I think you got to the right point. Did you manage to fix it at least locally?
I've spent hours trying to fix this without success.

So far I've tried

1. Add styled-components to external
2. Add in the named export css

    commonJs({
      include: /node_modules/,
      namedExports: {
        'react-is': ['typeOf', 'isElement', 'isValidElementType', 'isForwardRef'],
        'styled-components': ['css']
      }
    }),

3. I've tried to not transform jsx with Typescript but use Babel and use babel-plugin-styled-components

Nothing seems to work, anything else I can try?

[coolgod]

@mtt87

I've deleted my original comment because it is just totally wrong.

It turned out, my issue was caused by duplicated transcompiling of a javascript file during running unit tests (The issue for me happens when I use jest to run unit tests). One of my rollup bundled cjs file (already transcompiled by babel) is transcompiled again by babel-jest.

Once I configured jest as below to ignore it for transcompiling, my issue was resolved: (<rootDir>/packages/.*/dist/ is a folder for rollup cjs output)

transformIgnorePatterns: ['/node_modules/', '<rootDir>/packages/.*/dist/']

Also during debugging this, it appears to me there is just no such thing as styled.css.withConfig in styled-components source code. styled.css is a function, but it doesn't have a .withConfig attribute. And eventually I found styled.css.withConfig in the repeatedly transcompiled file in jest cache.

ref:

https://jestjs.io/docs/en/configuration#transformignorepatterns-arraystring

[kitten]

Most of the time Rollup build issues are caused by:

• Misordered or misconfigured plugins
• Transpilation (sometimes even double) to CJS which isn't needed
• Misconfiguration of the commonjs plugin
• Bundling externals when that isn't even necessary or intended

All of these lie outside of what makes sense as an issue here, so Rollup may have more helpful help channels.
But for now I'll go ahead and close this