`dynamic` is not a function

[ryanfitzer]

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

Bug.

What is the current behavior?

When rendering a component whose bundle includes styled-jsx, I get the following error:

b.dynamic is not a function

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

1. Test case https://codesandbox.io/s/hello-world-4wyhh (see pages/index.js for button component usage)
2. Repo is here https://gitlab.com/ryanfitzer/design-system-starter/tree/v0.0.10
3. Package npm install [email protected]

What is the expected behavior?

No errors when using Rollup to bundle styled-jsx with a component.

Environment (include versions)

• OS: All
• Browser: All
• styled-jsx (version): 3.2.2

Did this work in previous versions?

This is first attempt.

[ryanfitzer]

I've also submitted an issue on rollup-plugin-commonjs. It seems like it might be where this issue is originating.

[unix]

I'm troubled by the same problem, should i override all scripts with webpack ? 😭

[ryanfitzer]

@unix Are you saying this is happening when used with Webpack?

[unix]

@unix Are you saying this is happening when used with Webpack?

No, just rollup.

I mean, if I want to avoid this issue, I have to switch to webback, right? (It's been a few months, but it hasn't been resolved)

[ryanfitzer]

Ah. I haven’t had a chance to test with Webpack. Check the link to the issue I opened on Rollup. It looks like this is likely an issue in Rollup’s core. Last update was in January.

If you switch to Webpack, please update this issue with the results.

[unix]

When I switched to webpack, everything was working.

---

What is the current behavior?:

I bundle a component includes styled-jsx, I used babel and rollup, and then I got the same mistake.

What is the expected behavior:

In the output file dist/index.js contains an error:

unwrapExports(style);
var style_1 = style.flush;

var style$1 = style;

// ....

React.createElement(style$1, ....)

the variable style$1 is an object, style$1 is not the return value of unwrapExports function.

If I modify the code manually, it will work:

var style$1 = unwrapExports(style);
var style_1 = style.flush;

---

After I switch to Webpack:

I try to compile all files directly with webpack:

{
  test: /\.tsx?$/,
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
    plugins: ['styled-jsx/babel'],
  },
},

The output components can work normally. (if someone is bothered by this issue, try webback)