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:

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:

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:

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": "^17",
  "@types/react-dom": "^17"
}

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.