styled-jsx: styled-jsx/babel breaks with rollup and babel@7

Because the article I wrote about bundling styled-jsx components with Rollup still receives over hundred of views weekly (which makes me happy) I would like to update it: babel 6 -> 7 rollup 0 -> 1 styled-jsx2 -> 3

Do you want to request a feature or report a bug?

BUG

What is the current behavior?

When I try to bundle components with styled-jsx and Rollup I get:

./src/HelloWorld.js → ./lib/dev.js...
[!] (babel plugin) Error: Invalid mapping: {"generated":{"line":1,"column":0},"original":{"line":8,"column":20},"name":null}
src/HelloWorld.js
Error: Invalid mapping: {"generated":{"line":1,"column":0},"original":{"line":8,"column":20},"name":null}
    at SourceMapGenerator._validateMapping (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/styled-jsx/node_modules/source-map/lib/source-map-generator.js:291:13)
    at SourceMapGenerator.addMapping (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/styled-jsx/node_modules/source-map/lib/source-map-generator.js:107:12)
    at Function.sourceMapsPlugin (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/styled-jsx/dist/lib/style-transform.js:46:15)
    at proxy (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/stylis/stylis.js:1473:30)
    at stylis (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/stylis/stylis.js:1657:13)
    at transform (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/styled-jsx/dist/lib/style-transform.js:116:3)
    at processCss (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/styled-jsx/dist/_utils.js:509:64)
    at PluginPass.exit (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/styled-jsx/dist/babel.js:250:49)
    at NodePath._call (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/tomekm/Desktop/rollup-styled-jsx/node_modules/@babel/traverse/lib/path/context.js:40:17)

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

https://github.com/Tomekmularczyk/rollup-styled-jsx/tree/update-to-latest

If i remove "plugins": ["styled-jsx/babel"] from .babelrc it works (but then it doesn’t transpile style tags).

What is the expected behavior?

doesn’t break the build and transpiles style tags.

Environment (include versions)

OS: MacOS Mojave
Browser: -
styled-jsx (version): 3.2.0

Did this work in previous versions?

Yes

About this issue

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

Commits related to this issue

Style jsx. WIP https://github.com/zeit/styled-jsx/issues/542#issuecomment-518056116 — committed to cohubinc/cohub-ui by brayhoward 5 years ago

Most upvoted comments

hey folks sorry for the late reply. I’ve been busy with work, I can try to see what’s going on tomorrow.

giuseppeg on Feb 4, 2019

Inspecting a little bit the transpiled code I found lots of calls like this:

style$2.dynamic([["87120197", [padding, padding, CLOSING_TIME, CLOSING_TIME, padding, padding]]]) + " " + 'close-button'

Inspecting the element I see that it doesn’t have a dynamic property but it has a default property which does have a dynamic property. If I add the .default in the middle I get a more obscure error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

It doesn’t provide so much details. Only that something is failing on the render method.

hojarasca on Feb 4, 2019

@giuseppeg I’ll open an issue if I can find the time to reproduce. My setup is quite complicated, so hopefully it’s not too crazy to isolate a minimal reproduction

NathanielHill on Feb 8, 2019

@Tomekmularczyk I took a look at your branch and as mentioned in this issue at some point it seems that some source maps are invalid. If you disable source maps in the babel conf plugins: [['styled-jsx/babel', { sourceMaps: false ]] then your test case builds just fine.

I will try to debug when I have some time.

As for the other issues that you folks have been discussing about, I think this is out of topic. @NathanielHill could you open a separate issue and provide a testcase (reproduce your setup and put it in repo) so that I can try it out?

Closing in favor or #547

giuseppeg on Feb 8, 2019

@hojarasca changing to style$2.default actually worked for me.

I think some of my issues is that I’m in a monorepo and include, exclude, and external are tricky.

I don’t think Rollup was treating it as a proper external, and I fixed that by matching the id with a regex:

external: id => /^react|styled-jsx/.test(id)

I’ve got it rendering now without error, but there are no styles applied. This may have to do with the fact that I’m using renderToStaticMarkup() and the styles don’t render properly on the first render?

NathanielHill on Feb 4, 2019

I’m having the exact same issue here.

hojarasca on Feb 4, 2019