Login Page Leptonx theme bundle jQuery version issue #10335

2 Answer(s)

• 

  0

  AI-Bot created 14 days ago

  Support Team ABP Agent

  1. Solution

  jQuery.fn.jquery showing 4.0.0 on the deployed dev environment means somewhere in your built bundles another jQuery (4.x) is being loaded after ABP’s @abp/jquery (3.7.1).
  LeptonX + ABP 9.0.2 is built and tested with jQuery 3.7.1, and jQuery 4 is not supported – that’s why you get n.parseJSON is not a function only on dev.

  To fix it, you must ensure that only jQuery 3.7.1 is used in the public web/auth server application that serves the login page.

  Do the following steps:

  ---

  1. Lock jQuery to 3.7.1 in your front‑end

  Add a resolutions block to your package.json to force all packages to use jQuery 3.7.1:

  {
    "name": "my-app",
    "version": "1.0.0",
    "private": true,
    "dependencies": {
      "@abp/tui-editor": "^9.0.2",
      "@volo/abp.aspnetcore.mvc.ui.theme.leptonx": "~4.0.3",
      "@volo/account": "~9.0.2",
      "@volo/audit-logging": "~9.0.2",
      "@volo/identity": "~9.0.2",
      "@volo/language-management": "~9.0.2",
      "@volo/saas": "~9.0.2",
      "apexcharts": "^4.0.0",
      "flatpickr": "^4.6.13",
      "vue": "^3.4.31",
      "jquery-ui": "^1.14.1",
      "pivottable": "^2.23.0"
    },
    "resolutions": {
      "jquery": "3.7.1",
      "**/jquery": "3.7.1"
    }
  }
  

  Then, re‑install using Yarn (so that CI and local both use the same versions):

  # On local
  rm -rf node_modules
  yarn install
  yarn build # or the command that builds your bundles
  

  Commit both package.json and yarn.lock, push, and make sure your CI pipeline runs yarn install (not npm install) so that it respects yarn.lock and resolutions.

  If your CI has a package-lock.json from earlier runs, delete it from the repo and ensure the CI configuration is not using npm ci against it.

  ---

  2. Check that no extra jQuery is referenced in your MVC / login layout

  Since you’re using tiered with a separate MVC/Auth Server (LeptonX theme), verify these files in the web/auth project:

  • _Layout.cshtml (or AccountLayout.cshtml depending on customization)
  • Any other shared layout included by the login page

  Make sure there is no additional <script> tag that includes jQuery from a CDN or from wwwroot/lib/jquery etc.
  All you should see is the ABP/LeptonX bundle, for example:

  @section scripts {
      @await RenderSectionAsync("Scripts", required: false)
      @await BundleManager.RenderScriptsAsync()
  }
  

  If you have something like:

  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  

  or any local jquery-4.*.js, remove it.
  The only jQuery instance must come from @abp/jquery (3.7.1) via the ABP bundles.

  ---

  3. Confirm on the deployed environment

  After updating CI to use Yarn + the new resolutions and removing any extra jQuery <script> tags:

  1. Deploy to your dev environment.
  2. Open the login page in a hard‑refreshed browser window (Ctrl+F5).
  3. In the console, run:

  jQuery.fn.jquery
  

  It should now print:

  "3.7.1"
  

  4. Try logging in with a valid user – the Uncaught TypeError: n.parseJSON is not a function should be gone.

  If it still shows 4.0.0, check the Network tab → filter by “jquery” to see from which file/url jQuery 4 is being loaded; remove that reference or force it to use 3.7.1.

  ---

  2. Sources

  • LeptonX MVC theme usage and bundling (shows it relies on the ABP bundling system and its JS stack):
    https://abp.io/docs/latest/themes/lepton-x

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  maliming created 14 days ago

  Support Team Fullstack Developer

  hi

  Your jquery-ui depends on the new 4.0 jQuery.

  https://www.npmjs.com/package/jquery-ui/v/1.14.1?activeTab=code

  	"dependencies": {
  		"jquery": ">=1.12.0 <5.0.0"
  	},
  

  Please specify the jQuery version in your package.json,and remove the yarn.lock, then run the abp install-libs command again.

    "resolutions": {
      "jquery": "3.7.1",
    }
  

  Save Cancel