WebPack Module not found: Error: Package path ./swiper.esm.js is not exported from package /node_modules/swiper (see exports field in /node_modules/swiper/package.json)

Hi,

Im trying to import some Swiper 7 modules into a projct and when i hit mix the following exception is thrown

Module not found: Error: Package path ./swiper.esm.js is not exported from package /node_modules/swiper (see exports field in /node_modules/swiper/package.json)

in app.js I have

// import Swiper Bundle
import Swiper, { Grid, Lazy, EffectFade, Navigation, Pagination, Scrollbar, EffectCoverflow} from 'swiper/swiper.esm.js';
Swiper.use([Grid, Lazy, EffectFade, Navigation, Pagination, Scrollbar, EffectCoverflow]);


var swiper = new Swiper('.swiper-container', {
  modules: [Navigation, Pagination, Scrollbar],
  speed: 500,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

in package.json

{
  "name": "test",
  "private": true,
  "engines": {
    "node": ">=12.14.0"
  },
  "scripts": {
    "build": "mix",
    "build:production": "mix --production",
    "start": "mix watch",
    "hot": "mix watch --hot",
    "clear": "wp acorn optimize:clear",
    "test": "npm run lint",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  },
  "devDependencies": {
    "babel-eslint": "^10.1.0",
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "laravel-mix": "^6.0.19",
    "postcss": "^8.3.0",
    "sass": "^1.34.0",
    "sass-loader": "11.1.1",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0",
    "tailwindcss": "^2.1.2"
  },
  "peerDependencies": {
    "jquery": "^3.5.1"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "alpinejs": "^3.4.2",
    "owl.carousel": "^2.3.4",
    "swiper": "^7.0.8"
  }
}

Can anyone offer a solution. many Thanks