-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
[Bug]: FabricJS does not work with NextJS 13 and the new appDir #8444
Comments
specifically 30f5a04 |
@HMilbradt to avoid those issues fabric gets published in 2 versions https://www.npmjs.com/package/fabric?activeTab=versions Please try the version 5.2.4-browser you shouldn't have any node-canvas code. Alternatively you have to stub out the node dependencies, but i have an example for webpack and i m not sure the latest next.js what is using. |
I tried 5.2.4-browser, but this leads to another error:
Dynamically importing fabric or the component doesn't help too. |
What I suggested works in next 12 Next stuff is enough to resolve this issue |
Thx, I was trying out several things (except patching fabric.js).
Same issues with Still no luck. |
Using dynamic in next 12 works, but it must import a component so that is annoying but doable |
This discussion is helpful: But the main difference between fabric.js and other libraries like leaflet is, that fabric assumes it can be running on Node: Line 34 in 391eb99
The server is trying to bundle/pack fabric.js, but thinks it's required to bundle jsdom/canvas too. This was changed in Next 13. I think the best solution is to remove the Node related code for the |
That is inaccurate. |
I patched the HEADER.js and removed the Lines 32 to 52 in 391eb99
Maybe this helps others until you address this in v6. |
I don't know how you use fabric but I would expect you'd encounter fabric.window, fabric.document is undefined errors |
No it's fine. After rendering my React component , I initialize it, which is only run on client side. |
Awesome. |
Update |
Is there a way to get fabricjs v5 work with Nextjs 13, without using dynamic import? I am able to get it work using dynamic import but it increased the loading time significantly and caused other issues. I tried to use fabric@5.3.0-browser, but it has Really hope there could be a clarification on this issue, I've been banging my head on this issue for two weeks. And none of discussions about this issue provides a clear solution. |
thanks for clarification @ShaMan123 , will adapt my code to v6 then |
is there any way i could skip installing jsdom and canvas , it mentions it as required dep but since i am working in browser in react frontend project. i dont want to install canvas and jsdom 5.3.0-browser installs the deps |
5.3.0-browser has this package.json https://www.npmjs.com/package/fabric/v/5.3.0-browser?activeTab=code with no dependencies. Are you sure those aren't stuck in your yarn.lock or package.lock files from previous attemptes? |
I will repeat myself. |
yes that i know, but i was oh i was answering the part in which @adarsh-drishya doesn't want to install the deps on 5.3.0, seems unrelated to the original question. |
CheckList
Version
5.2.4
In What environments are you experiencing the problem?
Node.js
Node Version (if applicable)
16.14.2
Link To Reproduction
https://github.com/HMilbradt/next-13-fabric
Steps To Reproduce
Note that I've just used the Next13 playground example. The only relevant files are
/app/page.tsx
and/app/dynamic-fabric.tsx
.Completely removing the import for
/app/dynamic-fabric.tsx
will allow the app to run properly.Expected Behavior
The app should be able to load, if not normally then at least using the NextJS dynamic component with SSR turned off.
Actual Behavior
The app refuses to load, as server rendering fails due to the Node canvas files being loaded.
I've opened a report on NextJS as well here vercel/next.js#43050. Not sure if this issue is entirely on that framework, or it's now an issue that needs to be addressed in Fabric.
For the time being, I will likely be forking fabric and removing the NodeJS code.
Error Message & Stack Trace
The text was updated successfully, but these errors were encountered: