-
Notifications
You must be signed in to change notification settings - Fork 508
-
Notifications
You must be signed in to change notification settings - Fork 508
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
"Invalid hook call" error when importing a TSDX library with styled-components #950
Comments
styled-components
doesn't work even with the solution described in https://github.com/formium/tsdx/issues/543
Hi @robertovg Are you using A similar issue is discussed here: facebook/react#13991 A possible solution with
|
Unfortunately, we are using next.js. I added the Craco config both to the host and to the library project, and I'm getting exactly the same problem. Because @zoltan-nz, the idea is to add this override of libraries to the host or library project? Well, making some reading (vercel/next.js#9022, vercel/next.js#7626) looks like the wrong version of If you follow my instructions to create a host project you will see, tsdx compiles correctly the I can upload the host project if this helps and I would really appreciate any further help with it. The idea is to use Thanks again in advance. |
We are having the same exact problem using Next.js. The link works fine if we use a webpack alias for CRA, but for Next.js there is no way to make it work. Did anyone find a solution/fix? |
Good to know someone else is facing the same issue. I would really love to find a solution. I hope someone can put light on it, as otherwise, we can't have libs packages using tsdx. |
Same issue here... this really should be addressed, else it's our only blocker to us using |
I was able to fix this by using the solution in #543, which only seems to work if you don't need any other babel plugins? |
Sorry @kylepeeler, we tried this solution too and still got the same problem. Just to allow people to recreate the issue, I just uploaded the host project: https://github.com/robertovg/next-ts-styled-components-tsdx-hosttsdx-styled-components It will work out of the box, but as soon as we link Without that, we don't have any way to test our library in the host project before committing to Github (with this simple way of using as Git URL) PD: Same behavior also using |
We found something interesting, maybe someone can explain this a bit more: We have both projects: we run the host and it works, and Then we
I hope the source of the problem it's more clear now. |
We found a dirty hack to make it work in local finally. As I said, it will work perfectly when the project is running with the default configuration in the projects, but when we want to run the lib project locally and see the changes in the host is when we face the problems. We realized the problem was with duplication react version, meaning the host project has 2 copies of react, the default one So our solution finally is what the official React guide suggest:
In our case, having both projects in the same folder, in the Not sure if there is a better way, but this works. |
Running into the same problem here with latest Next.js (10.0.5). I refer to my package on the same filesystem in
|
I was having the same issue (not with styled-components but with Ant design library) and I am also referencing my lib project on the same filesystem as @timosnel and I fixed it with npm link as @robertovg suggested. Thanks a lot! I have a question about the production environment - from what I understand the link is created locally only, is that correct? How can I make it work in production if I am referencing my lib package from the same filesystem? @robertovg maybe you can help? Thanks |
@robertovg solution worked -- for me I had to pass npm link --legacy-peer-deps ../${HOST_PROJECT}/node_modules/react/ |
@robertovg's solution worked for me as well, thanks! 🎉 |
I had a similar problem. My solution was to add a " "resolutions": {
"react": "^17.0.2"
} N.B. I'm also using yarn workspaces which could also solve some problems with duplicate |
This issue is kind of wired after 2 days of trying to resolve this issue with different suggestions and I was still unable to resolve it, but In my case, I was able to resolve this issue by removing |
Current Behavior
I'm building a private library with
tsdx
and would like to addstyled-components
there. When I do it, they work within thetsdx
project but when I import those components in other projects (next.js/CRA
using alreadystyled-components
inside), I get the following error: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 withtsdx
, 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 usestyled-components
and export them correctly 🙏.Additional context
I isolated this problem in a small project and prepared the steps to reproduce it:
Create an empty project
And uploaded to Github
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 instorybook
and test pass correctly for thosestyled-components
components.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
innext-ts-styled-components-tsdx-host
(just to use it locally before registering)Modify the
pages/index.tsx
file to use the new library:Add the workaround described in Doesn't play well with babel-plugin-styled-components -- plugin order matters #543 doesn't work.
With the third commit,add
styled-components/macro
version and addsbabel-plugin-macros
to.babelrc
as described Doesn't play well with babel-plugin-styled-components -- plugin order matters #543 & (fix): change plugin order to make styled-components/macro work #644.Your environment
The text was updated successfully, but these errors were encountered: