react_1.styled is not a function

[rwieruch]

I took the evening to migrate my library from using styled-components to stitches. When I start Storybook, the styles get applied perfectly. However, when I build the library and install it somewhere else, I get: react_1.styled is not a function. (see here).

This is the branch of my library where I am using stitches now: https://github.com/table-library/react-table-library/tree/feat/stitches Compared to using styled-components (or emotion), I thought I wouldn't have to change anything in the tsconfig.json or babel.config.js to make it work. Or am I wrong here? I am using rollup to bundle everything.

Thanks for your help! Really looking forward getting this to work!

[rwieruch]

Side-note: Wondering if it has something to do with @babel/runtime being needed, because radix-ui uses it as dependency too: https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/package.json

[arturbien]

Having the same issue. I am not using radix tho. The only dependencies I am using so far are react and stitches.

@rwieruch did you manage to get around this issue?

[rwieruch]

I am not using radix either. No, didn't find a solution yet. Worst case I have to use emotion instead, but I really hope to use stitches here :)

[hadihallak]

Hey @rwieruch
Would you be able to provide us with a minimalistic reproduction of the issue (the smaller the repro, the faster we can debug it)?

[rwieruch]

Hi @hadihallak I went with emotion in the meantime and don't have any project at my hands anymore. Feel free to close this if no one else comes up with this issue.

[hadihallak]

@arturbien Do you still have this issue?

[arturbien]

@hadihallak we went with styled-components instead

[hadihallak]

@arturbien Thanks for your quick response.
Will be closing this for now but if anyone else is having the issue, feel free to re-open this and post a minimal-repro

[jnoer]

I get the same with brand new minimal apps. This is a brand new create-react-app application with only storybook and Stitches installed. It exports one button:
https://github.com/jnoer/storybook/tree/no-stitches-config

Target application. It's a brand new create-react-app that imports the above button component:
https://github.com/jnoer/react-app/tree/no_stitches_config

I tested with Emotion instead of Stitches and that does work.

@hadihallak Can we reopen this?

I had opened this issue which is the same, but the error is a little different since it uses stitches.config.js.
#1061

[TheeMattOliver]

Please re-open.

Brand new minimal lib, using Stitches.

On the consumer side:

0 , _react.styled) is not a function

[TheeMattOliver]

Originally I thought this might have to do with the fact that stitches.config.js was misconfigured or I had an import wrong, but after doublechecking and trying again, the error is similar

Error on consumer side:

Uncaught TypeError: (0 , _react.createStitches) is not a function
    at ./node_modules/<MY-LIB>/lib-esm/stitches.config.js (stitches.config.js:11:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@groundgametexas/react/lib-esm/Box.js (Box.js:8:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/<MY-LIB>/lib-esm/index.js (index.js:23:1)
    at options.factory (react refresh:6:1)

Repro:

https://github.com/TheeMattOliver/radix-stitches-styled-not-function-repro

[drigofonte]

Hi there, getting a similar issue in our build pipeline where we get the following error message when running our tests:

TypeError: (0 , core_1.keyframes) is not a function

       5 | const colors = {};
       6 |
    >  7 | const spin = keyframes({
         |                       ^
       8 |   "0%": { transform: "rotate(0deg)" },
       9 |   "100%": { transform: "rotate(360deg)" },
      10 | });

      at Object.<anonymous> (base-ui/components/button/button.styles.ts:7:23)
      at Object.<anonymous> (base-ui/components/button/button.tsx:4:1)
      at Object.<anonymous> (base-ui/components/button/index.ts:1:1)
      at Object.<anonymous> (base-ui/components/badge/badge.spec.tsx:4:1)

Has anyone come up with a solution or explanation of what might be causing it?

Thanks.

[chrislicodes]

Any updates on this one?
Similar error on consumer side for a fresh CRA:

Uncaught TypeError: (0 , _react.createStitches) is not a function

[jnoer]

React 18 is not supported. See #1059

We have switched over to Emotion.

[renecruces]

I've been experiencing the same problem. In my case, I've noticed that webpack was not including this package, and was importing the path to the .cjs module instead.

So I modified my babel config with the following in order to resolve the package accordingly:

module.exports = {
  ...
  plugins: [
    [
      'module-resolver', // https://www.npmjs.com/package/babel-plugin-module-resolver
      {
        root: ['./src'],
        alias: {
          '@stitches/react': path.resolve(__dirname, './node_modules/@stitches/react')
        }
      }
    ],
    ...
  ]
};