REFERENCE ERROR

[Max Fey]

Dear team, good day!
I have a question. I have successfully added canvasjs charts to my reactjs app and everything works perfectly in the local environment. but when I deploy to vercel, I get a reference error in the console. “require is not defined” and my app does show anything on the screen.

Has someone experienced this before? can someone help me out? I will be very grateful!

[Vishwas R]

Max Fey,

We tried deploying a React app with CanvasJS Chart in vercel, it seems to be working fine. Please take a look at this link for a working sample that’s deployed in vercel and checkout this Github repository for the project.

If you are still facing issue, kindly share your project with us over Google-Drive or Onedrive (or in Github) so that we can try deploying it from our side to understand the scenario better and help you out.

—
Vishwas R
Team CanvasJS

[Max Fey]

Hey Vishwas, thank you for getting back at this.
My react project was built using Vite. I am currently migrating it to normal create-react-app so I can try it out again.
I’ll let you know how it goes once migration and deployment is complete.

Meanwhile, if there’s a thing I need to know about canvasJs with vite, I’ll appreciate.

[Max Fey]

Kindly use Vite and deploy to vercel.
It should produce the Reference Error: require is not defined.

[Max Fey]

Image Attachment

[Vishwas R]

Max Fey,

Adding commonjsOptions: { transformMixedEsModules: true } to the build option of Vite config should fix this issue. Please refer to this Stack Overflow thread for more information about the same. Please take a look at this link for a working sample that’s deployed in vercel and checkout this Github repository for the project.

—
Vishwas R
Team CanvasJS

[Max Fey]

High five! Vishwas,
Your proposal fixed my issue so fine.

Thank you! so much.