When i try to install opensaas and when i try to wasp db migrate-dev i get this
[ Wasp ] ext-src/admin/elements/charts/BarChart.tsx(95,9): error TS2353: Object literal may only specify known properties, and 'radius' does not exist in type '{ strokeColor?: string; strokeWidth?: number; fillColors?: string[]; shape?: ApexMarkerShape; offsetX?: number; offsetY?: number; customHTML?(): any; onClick?(): void; }'.❌ --- [Error] Your wasp project failed to compile: -------------------------------- SDK build failed with exit code: 2❌ --- [Error] Compilation of wasp project failed: --------------------------------1 errors found
52 Replies
Hi @Sava. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error message you're seeing is related to TypeScript and it's indicating that the 'radius' property does not exist in the type you're trying to use it with. This error is not directly related to Wasp or the
wasp db migrate-dev command, but rather to the TypeScript code in your project.
The error is coming from the file ext-src/admin/elements/charts/BarChart.tsx at line 95, column 9. You're trying to use a 'radius' property that the type does not recognize.
To fix this issue, you should check the type definition and make sure 'radius' is a valid property for that type. If 'radius' is not a valid property, you should remove it or replace it with a valid property. If 'radius' should be a valid property, then you might need to update the type definition to include 'radius'.
Unfortunately, without the specific TypeScript code and type definitions, I can't provide a more specific solution. I recommend referring to the TypeScript documentation or the documentation of the library you're using for creating charts for more information.
Please note that this error is preventing your Wasp project from compiling, so you'll need to fix it before you can successfully run wasp db migrate-dev or any other Wasp commands.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Sava, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?Thank you, this works, but why is it happening?
Honestly i only just setup 5 mins ago and used chatgpt to fix the code
chatgpt comes to rescue! But now i am getting just white screen like the app is broken, did you encounter this error?
post pics?
Here, and i there is noting in console that would suggest where the problem is
try restart, honestly i started this software tonight
Wohooo @evilresident, you just became a Waspeteer level 1!
Unfortunately this did not fix the problem, but tnx for the help. Hope you enjoy wasp 🙂
If you have white page and absolutely no errors in console, might be something wrong with routing
Yea but why would that happen on fresh install...
Wohooo @Sava, you just became a Waspeteer level 2!
Ok, so you setup a new project with Open SaaS 😄
wasp new <app-name> -t saas and this just happened without any changes from your side? @Sava
I'm getting the same error when I try the open-saas template @Vinny (@Wasp)Hi Miho, I just used "wasp new" and then i choose saas as number 3. I did no change in template
Yep, I've tracked the problem down to
apexcharts the library we are using for charts. They released a new version where they removed the radius property: https://github.com/apexcharts/apexcharts.js/releases/tag/v3.51.0 and this is the line https://github.com/apexcharts/apexcharts.js/commit/b31f7e13b13bf3f35e2b77df12a7445aa7071c71#diff-1156359dc5238d9290bf8627dd0d6607f612e09ef7bdc89eb1598205eab1825bL834
So, in a nutshell - just remove the radius property and it'll work.
We need to update the template not to include the radius property 🙂GitHub
Release v3.51.0 · apexcharts/apexcharts.js
What's Changed
✨ More marker shapes ✨
replace margin with offsetX/Y in radialbar datalabels - https://apexcharts.com/docs/options/plotoptions/radialbar#barLabels
fix: line/realtime test by @...
And this didn’t give any errors in the browser console? 🧐
It couldn't becuase the project wouldn't even pass the Typescript compile step so the app couldn't run 🙂
Ah ok but you got an error somewhere? Wasp logs?
In the terminal we get this (exactly what @Sava posted) 😄
Ah yes lol I missed it entirely… 😅
It's confusing for new users to get errors if they just started - I guess it causes the feeling of "I did something wrong" since you just started. But it was a sneaky dependency update i.e. Apexcharts not honoring semantic versioning.
Should probably lock deps versions to exact ones in templates to avoid these surprises
Yep, that's one of the suggestions I put down in this issue: https://github.com/wasp-lang/open-saas/issues/241
It's annoying to get these little surprises every now and then 😄 but it will happen since we depend on different libraries
GitHub
Update
BarChart to work with latest apexcharts update · Issue #...Users reported in Discord Typescript errors when using the latest Open SaaS: It's due to ApexCharts library we use for our charts made a breaking change in their types (removed the radius prope...
it shouldn't happen if you lock by installing the exact version
Nice command, I didn't know about the
-E option 😄
The issue with exact versions is that you miss out on new non-breaking changes versions which could contain nice improvements. If libs follow semantic versioning (as they should be) then you get new stuff quicker instead of waiting for us to update the exact version, so that's the upside of the current approach that I personally like 😄
ApexCharts obviously did a boo boo here with their version bump being minor IMHO 😄for sure, I get that
but I think you are in the business of building templates - something that should be built once and last forever, until you say "yeah this lib can do this now, let's update the template" or break it intentionally
otherwise this results in your templates being exposed to things like this and therefore not reliable, you never know if your template will work or not 😄 it won't be the last time somebody doesn't respect the semver, me and you we know this 😄
Fair point 👍 this is something we'll have to decide on in the team for sure
wait so where do i find the radius property??
nvm found it
Did it work as expected after you removed the
radius property?im running wasp start right now
yep it works as expected
Ok @JudeJeremy @Sava @evilresident I've updated the template with
radius removed from the BarChart as it wasn't really being used anyway
Sorry for the issue and thanks for reporting it!
The template ships with a package.json and the versions. When I pull a fresh, new template with wasp new -t saas I get apex charts v 3.41.0
so I'm assuming people who have this problem ran npm install instead of just wasp start -- wdyt @miho ?Forgive me for the silly question, is this a single tenent app or multi tenent, i want a multi tenant with a single db for large companies (say 50 users) and to use and a shared db for 10 users per company?
You can definitely easily make your app multi tenancy based on the template
Could you possible help setup this or havesome sort of demo/tutorial?
an easy start would be to add a Company or Organization database entity, like this for example:
and then you allow certain actions for users associated with different companies
at the moment though, you'll have to use the same DB. see here: https://github.com/wasp-lang/wasp/issues/2129
Thank you Vinnie
you're welcome
One more question, if i have these users for differernt companies, is there a way to limit what services they have for example com1 uses app1 app2 app3, and company2 only has app1. also how do we create these pages after user logs in? im new so sorry for silly questions
Read this and let me know if this helps: https://docs.opensaas.sh/guides/authorization/
OpenSaaS.sh
Authorization
Open SaaS is a free, open-source, full-stack SaaS starter kit for React + NodeJS.
instead of
user.subscriptionStatus you would check for user.companyId or something similar, and then direct them to the correct page on the client-side. Or if it's server-side, you'd allow or block certain functionalityNo, I have run wasp start 🙂
hm weird. I created a new template and ran it and got the correct version (cc: @miho ) .
Anyway, we've updated it now so it should work fine 🙂
Great, thank you Vinny
ext-src/server/scripts/dbSeeds.ts(33,3): error TS2741: Property 'companyId' is missing in type '{ email: string; username: string; createdAt: Date; lastActiveTimestamp: Date; isAdmin: false; sendNewsletter: false; credits: number; subscriptionStatus: SubscriptionStatus; stripeId: string; datePaid: Date; checkoutSessionId: string; subscriptionPlan: PaymentPlanId; }' but required in type 'MockUserData'.
@Vinny (@Wasp)
I get apex charts v 3.41.0Did you check the version in the
node_modules/apexcharts/package.json?yep
The problem is written in the error 🙂
ah no not in that folder
Hey this part now works great great, but is have just white screen, no error in terminal and no error in console
Okay my bad error was happing because of Ad Blocker...
Ah ok. are you sure? If so, can you delete the above messages? I don't want to confuse others 🙂
I tested the changes and they work. It seems that the ad blocker was causing the issue, which disrupted the entire application. Hopefully, this won't be a problem in production.
interesting. I wonder which part of the app the ad blocker was flagging. Glad you got it working now though 🙂
This part "PageViewSourcesTable.tsx" for some reason