tsdx: "Invalid hook call" error when importing a TSDX library with styled-components

Current Behavior

I’m building a private library with tsdx and would like to add styled-components there. When I do it, they work within the tsdx project but when I import those components in other projects (next.js/CRA using already styled-components inside), I get the following error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Expected behavior

I would like to be able to use those styled-components exactly like any other react, or plain js function I’m able to use with tsdx, so they can be reused in my projects.

Especially when the test for those styled-components works and they get rendered correctly inside storybook.

Suggested solution(s)

Please, provide a concise way to enable tsdx-styled-components to use styled-components and export them correctly 🙏.

Additional context

I isolated this problem in a small project and prepared the steps to reproduce it:

1. Create an empty project

   npx tsdx create tsdx-styled-components
   

   And uploaded to Github

2. Add styled-components to it and a small component exported in the index

   With the second commit I added styled-components to the project, they get render correctly in storybook and test pass correctly for those styled-components components.

3. Create a new next.js project and consume the library locally

   • Create a new project with yarn create next-app --example with-typescript next-ts-styled-components-tsdx-host.

   • Then yarn build the tsdx-styled-components.

   • yarn add ../tsdx-styled-components in next-ts-styled-components-tsdx-host (just to use it locally before registering)

   • Modify the pages/index.tsx file to use the new library:

     import Link from "next/link";
     import { Thing, SimpleStyledH1Application } from "tsdx-styled-components";
     import Layout from "../components/Layout";
     
     const IndexPage = () => (
       <Layout title="Home | Next.js + TypeScript Example">
         <Thing></Thing>
         {/* This causes the break, because is a styled-component */}
         <SimpleStyledH1Application />
         <h1>Hello Next.js 👋</h1>
         <p>
           <Link href="/about">
             <a>About</a>
           </Link>
         </p>
       </Layout>
     );
     
     export default IndexPage;
     

     I’m creating a new project just to verify, but we get the same error in our CRA, next.js projects with styled-components configured.

     SimpleStyledH1Application causes the error, if you comment it, the page renders correctly.

4. Add the workaround described in https://github.com/formium/tsdx/issues/543 doesn’t work.

   With the third commit,add styled-components/macro version and adds babel-plugin-macros to .babelrc as described https://github.com/formium/tsdx/issues/543 & https://github.com/formium/tsdx/pull/644.

Your environment

 System:
    OS: macOS 11.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 79.52 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.13.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Chrome Canary: 89.0.4366.0
    Firefox Developer Edition: 83.0
    Safari: 14.0.2