Syncing project versions between JSX.Design and IDE

When creating a new canvas in JSX.Design, each canvas is associated with a specific project, which includes versioning for React, Next.js, and any libraries in use. This versioning helps ensure compatibility across the project but may lead to issues if the project versions in JSX.Design differ from those in your IDE project.

To ensure a smooth experience while working with JSX.Design, make sure your project is equipped with the minimum versions of core, application, and UI component libraries. Check out the minimum requirements.

If you attempt to import JSX.Design code into an IDE project with mismatched versions, you may encounter an error like this:

Warning: Version mismatch for antd. Expected 5.12.1 but found 5.12.2

This document provides two options to resolve this version mismatch and successfully import JSX.Design code into your IDE.

Solutions

Option 1: Change the project version in JSX.Design to match that of the IDE

1. Identify the Required Versions: Determine the React/Next.js and library versions used in your IDE project. For example, if your IDE project is using Next.js v19 and Ant Design v5.12.2, you’ll want these versions to match in JSX.Design.

2. Update Versions in JSX.Design: In JSX.Design, go to the canvas of the project you’re working on.

   • Bottom Left Corner: At the bottom left of the canvas screen, you’ll see the version details for the project (e.g., Next.js, React, Ant Design).

   • Change Version: Update the versions of Next.js, React, or other libraries to match those in your IDE.

3. Confirm Changes: Keep in mind that this version change will apply to the entire JSX.Design project, including all canvases within that project.

Option 2: Change the project version in IDE

If you prefer to align your IDE project versions with those in JSX.Design, follow these steps:

1. Update React version in IDE: Update the version of React to match that of the JSX canvas. For example, if your IDE project has React version 19, and you need to update it to version 18, you can run the following command in your project Terminal:

   npm install react@18 react-dom@18

2. Open package.json: In your IDE project, open the package.json file, which contains all dependencies and their versions.

3. Update Dependency Versions: Update the version numbers for each dependency to match those specified in your JSX.Design project. For example, to change Ant Design to version 5.12.1, modify the antd entry directly in package.json, or run this command in your terminal:

   npm i antd@5.12.1

   Repeat this process for other libraries, if they also need to match the JSX.Design project versions.

4. Install Updated Versions: Save the changes in package.json and run npm install to install the specified versions.

5. Verify and Retry Import: After updating the versions, try importing the JSX.Design code into your IDE project again. If everything is aligned, the warning should disappear.

After Successful Import

Once you’ve resolved the version mismatch, you can import your JSX.Design canvas into your IDE without issues. Any visual updates or styling changes made in JSX.Design should now reflect seamlessly in your IDE, allowing you to continue working on your project with synchronized versions.

---

This document provides guidance on syncing versions to maintain compatibility between JSX.Design and your IDE. If you continue to experience issues, Join our Discord server to connect with the JSX.Design team for real-time support.