styled-components/babel-plugin-styled-components

Vite + babel-plugin-styled-components throws

eldar-mekhraliev opened this issue · 3 comments

Hello, the problem seem to be related to wrapping svg Icons with styled-components, but it is very hard to follow.

I know this is not much for investigating, but i cant seem to find the proper stack.

Uncaught TypeError: Unable to determine current node version
at versionIncluded (index.js:51:9)

image

Maybe it's not the case but when I bumped into this error it was because I didn't have twin.macro installed properly in the project. In my case I had a storybook app and tried to use twin.macro inside that but I didn't have twin.macro installed. Very weird error message though.

How are you getting the plugin to work at all in vite? The most recent resolution I see in the other, longer Vite thread is to run very old versions of styled-components, which I am not willing to do. I just get Error: The following dependencies are imported but could not be resolved: styled-components/macro and I've rather given up on readable class names during debugging.

Is this plugin supposed to work without macros? on vite it doesn't (SC v6 + plugin)
This does nothing:

 plugins: [
    react({
      babel: {
        plugins: [
          [
            'styled-components',
            {
              displayName: true,
            },
          ],
        ],
      },
    }),