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 pageIntegrating InternationalizationNext pageCLI FAQ

      #Dependencies FAQ

      #How to check the actual installed version of a dependency in the project?

      You can use the ls command provided by the package manager to view the version of the dependency in the project.

      Here are some basic examples. For detailed usage, please refer to the documentation of each package manager.

      npm / yarn

      For projects using npm or yarn, you can use the npm ls command.

      For example, running npm ls @modern-js/core will show the following result:

      project
      └─┬ @modern-js/app-tools@x.y.z
        └── @modern-js/core@x.y.z

      pnpm

      For projects using pnpm, you can use the pnpm ls command.

      For example, running pnpm ls @modern-js/core --depth Infinity will show the following result:

      devDependencies:
      @modern-js/app-tools x.y.z
      └── @modern-js/core x.y.z

      #Getting "The engine "node" is incompatible" error during dependency installation?

      If you encounter the following error message during dependency installation, it means that the current environment is using a Node.js version that is too low, and you need to upgrade Node.js to a higher version.

      The engine "node" is incompatible with this module.
      
      Expected version ">=16.2.0". Got "12.20.1"

      When using Modern.js, it is recommended to use the latest version of Node.js 18.x.

      If the Node.js version of the current environment is lower than the above requirement, you can use tools such as nvm or fnm to switch versions.

      Here is an example of using nvm:

      # Install Node.js v14
      nvm install 14
      
      # Switch to Node 14
      nvm use 14
      
      # Set Node 14 as the default version
      nvm default 14

      For local development environments, it is recommended to use fnm, which has better performance than nvm and has similar usage.


      #Getting a ReactNode type error after upgrading dependencies?

      After upgrading the dependencies of the project, if the following type error occurs, it means that the wrong version of @types/react is installed in the project.

      The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react/index").ReactNode'.
      Type '{}' is not assignable to type 'ReactNode'.

      The reason for this problem is that the ReactNode type definition in React 18 is different from that in React 16/17. If there are multiple different versions of @types/react in the project, a ReactNode type conflict will occur, resulting in the above error.

      The solution is to lock the @types/react and @types/react-dom in the project to a unified version, such as v17.

      {
        "@types/react": "^19",
        "@types/react-dom": "^19"
      }

      For methods of locking dependency versions, please refer to Lock nested dependency.


      #Getting peer dependencies warnings in the console after running pnpm install?

      The reason for this warning is that the version range of peer dependencies declared by some third-party npm packages is inconsistent with the version range installed in Modern.js.

      In most cases, peer dependencies warnings will not affect the project operation and do not need to be processed separately. Please ignore the relevant warnings.


      #What is the minimum supported version of React for the Modern.js framework?

      The recommended React version for the Modern.js framework is >= 18.0.0, and different functions have different requirements for the React version.

      • If you are using React 17, some framework functions will not be available, such as Streaming SSR, because it relies on new features provided by React 18.
      • If you are still using React 16, you will not be able to use Modern.js's runtime or server-side capabilities. You can consider using the build mode of Modern.js, that is, only using Modern.js's build capabilities. In this case, React 16 can still be used.

      In future major versions of Modern.js, we will gradually remove support for React 16 and React 17. Therefore, please upgrade to React 18 or higher as soon as possible.


      #Type error in Modern.js configuration file?

      Type 'CliPlugin<{}, {}, {}, {}>' is not assignable to type 'CliPlugin<any, {}, {}, {}>'.
        Types of property 'setup' are incompatible.

      When you use the Modern.js framework, the above error occurs in the configuration file, it may be due to the inconsistent versions of Modern.js related packages。You can upgrade and unify the version of modern.js related packages through npx modern upgrade command.

      In the monorepo, the above error may also occur due to inconsistent versions of the Modern.js framework used by different sub-projects.