logo
  • Guide
  • Config
  • Plugin
  • API
  • Examples
  • Community
  • Modern.js 2.x Docs
  • English
    • 简体中文
    • English
    • Start
      Introduction
      Quick Start
      Upgrading
      Glossary
      Tech Stack
      Core Concept
      Page Entry
      Build Engine
      Web Server
      Basic Features
      Routes
      Routing
      Config Routes
      Data Solution
      Data Fetching
      Data Writing
      Data Caching
      Rendering
      Server-Side Rendering
      Streaming SSR
      Rendering Cache
      Static Site Generation
      Render Preprocessing
      Styling
      Styling
      Use CSS Modules
      Using CSS-in-JS
      Using Tailwind CSS
      HTML Template
      Import Static Assets
      Import JSON Files
      Import SVG Assets
      Import Wasm Assets
      Debug
      Data Mocking
      Network Proxy
      Using Rsdoctor
      Using Storybook
      Testing
      Playwright
      Vitest
      Jest
      Cypress
      Path Alias
      Environment Variables
      Output Files
      Deploy Application
      Advanced Features
      Using Rspack
      Using BFF
      Basic Usage
      Runtime Framework
      Extend BFF Server
      Extend Request SDK
      File Upload
      Cross-Project Invocation
      Optimize Page Performance
      Code Splitting
      Inline Static Assets
      Bundle Size Optimization
      React Compiler
      Improve Build Performance
      Browser Compatibility
      Low-Level Tools
      Source Code Build Mode
      Server Monitor
      Monitors
      Logs Events
      Metrics Events
      Internationalization
      Basic Concepts
      Quick Start
      Configuration
      Locale Detection
      Resource Loading
      Routing Integration
      API Reference
      Advanced Usage
      Best Practices
      Custom Web Server
      Topic Detail
      Module Federation
      Introduction
      Getting Started
      Application-Level Modules
      Server-Side Rendering
      Deployment
      Integrating Internationalization
      FAQ
      Dependencies FAQ
      CLI FAQ
      Build FAQ
      HMR FAQ
      Deprecated
      📝 Edit this page
      Previous pageQuick StartNext pageGlossary

      #Upgrading

      #Upgrade with command

      Modern.js provides the upgrade command to support upgrading the project to the latest version of Modern.js.

      Run the upgrade script in the project:

      npm
      yarn
      pnpm
      bun
      deno
      npm run upgrade
      yarn run upgrade
      pnpm run upgrade
      bun run upgrade
      deno run npm:upgrade
      > modern upgrade
      
      [INFO] [Project Type]: Web App
      [INFO] [Modern.js Latest Version]: x.y.z
      [INFO] Upgrade Modern.js package version success!

      You can see that the dependencies in the project's package.json have been updated to the latest version.

      Tip

      If the upgrade command is not declared in the project's package.json, you can execute npx modern upgrade as an equivalent alternative.

      #Upgrade to a specified version

      All packages of Modern.js are currently released with a uniform version number.

      According to the Release Note on the official website, developers can also manually upgrade the project to the desired version.

      Tip

      When upgrading, you need to upgrade all packages provided by Modern.js, rather than upgrading some dependencies.

      #Version Management Strategy

      In Modern.js projects, we recommend that all officially provided dependencies use fixed version, and avoid using ^ or ~ for range declarations. For example:

      {
        "dependencies": {
          "@modern-js/app-tools": "x.y.z"
        }
      }

      This ensures that the versions of dependencies are fully determined, thereby guaranteeing build consistency and predictability.

      #Lock nested dependency

      When a nested dependency of the project has a problem and Modern.js cannot be updated immediately, you can use the package manager to lock the version of the nested dependency.

      #pnpm

      For projects using pnpm, add the following configuration to the package.json in the root directory of the project, and then run pnpm install again:

      package.json
      {
        "pnpm": {
          "overrides": {
            "package-name": "^1.0.0"
          }
        }
      }

      #Yarn

      For projects using Yarn, add the following configuration to the package.json in the root directory of the project, and then run yarn install again:

      package.json
      {
        "resolutions": {
          "package-name": "^1.0.0"
        }
      }

      #Npm

      For projects using Npm, add the following configuration to the package.json in the root directory of the project, and then run npm install again:

      package.json
      {
        "overrides": {
          "package-name": "^1.0.0"
        }
      }
      Info

      For Monorepo repositories, you can only lock dependency versions in the package.json in the root directory of the project, and it will affect all packages in the Monorepo.