How to use nextra-components in nextra-application?

I have a small nextJS application using nextra for my personal blog. According to the official examples in nextra, it should be possible to import some more specialized components like the Callout-component into a mdx-file:

import { Callout } from 'nextra/components'

However, it doesn't work this way and gives the following error:

Module not found: Can't resolve 'nextra/components'

My package.json looks like this:

{
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "next",
    "build": "node ./scripts/gen-rss.js && next build",
    "start": "next start"
  },
  "dependencies": {
    "gray-matter": "^4.0.2",
    "next": "12.0.8",
    "nextra": "^2.0.0-beta.5",
    "nextra-theme-blog": "^2.0.0-beta.5",
    "nextra-theme-docs": "^2.8.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "rss": "^1.2.2",
    "sharp": "^0.32.1"
  },
  "dependenciesMeta": {
    "nextra": {
      "injected": true
    },
    "nextra-theme-docs": {
      "injected": true
    }
  },
  "prettier": {
    "arrowParens": "always",
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "none",
    "semi": false
  }
}

How to fix that?

You need to update Nextra to the latest version (2.8.0 at the time of writing). It will probably cause some other issues with your dependencies because they are pretty outdated and need to be updated too.