AWS CDK 2: Package subpath './aws-cloudfront/lib/experimental' is not defined by "exports" in xxx/node_modules/aws-cdk-lib/package.json

I tried creating a demo for VueJS SSR using Lambda@Edge and using AWS CDK v2. The code is below

import { CfnOutput, Duration, RemovalPolicy, Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { Bucket } from 'aws-cdk-lib/aws-s3';
import { BucketDeployment, Source } from 'aws-cdk-lib/aws-s3-deployment'
import { CloudFrontWebDistribution, LambdaEdgeEventType, OriginAccessIdentity } from 'aws-cdk-lib/aws-cloudfront';
import { Code, Function, Runtime } from 'aws-cdk-lib/aws-lambda';
import { EdgeFunction } from 'aws-cdk-lib/aws-cloudfront/lib/experimental';

export class SsrStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    const bucket = new Bucket(this, 'DeploymentsBucket', {
      websiteIndexDocument: "index.html",
      websiteErrorDocument: "index.html",
      publicReadAccess: false,
      //only for demo not to use in production
      removalPolicy: RemovalPolicy.DESTROY,
    });

    //
    new BucketDeployment(this, "App", {
      sources: [Source.asset("../../web/dist/")],
      destinationBucket: bucket
    });

    //
    const originAccessIdentity = new OriginAccessIdentity(
      this,
      'DeploymentsOriginAccessIdentity',
    );
    bucket.grantRead(originAccessIdentity);

    const ssrEdgeFunction = new EdgeFunction(this, "ssrHandler", {
      runtime: Runtime.NODEJS_14_X,
      code: Code.fromAsset("../../lambda/ssr-at-edge/"),
      memorySize: 128,
      timeout: Duration.seconds(5),
      handler: "index.handler"
    });

    const distribution = new CloudFrontWebDistribution(
      this,
      'DeploymentsDistribution',
      {
        originConfigs: [
          {
            s3OriginSource: {
              s3BucketSource: bucket,
              originAccessIdentity: originAccessIdentity
            },
            behaviors: [
              {
                isDefaultBehavior: true,
                lambdaFunctionAssociations: [
                  {
                    eventType: LambdaEdgeEventType.ORIGIN_REQUEST,
                    lambdaFunction: ssrEdgeFunction.currentVersion,
                  }
                ]
              }
            ]
          }
        ],
        errorConfigurations: [
          {
            errorCode: 403,
            responseCode: 200,
            responsePagePath: '/index.html',
            errorCachingMinTtl: 0,
          },
          {
            errorCode: 404,
            responseCode: 200,
            responsePagePath: '/index.html',
            errorCachingMinTtl: 0,
          }
        ]
      }
    );

    new CfnOutput(this, 'CloudFrontURL', { value: distribution.distributionDomainName });
  }
}

However when I tried deploying it shows something like this

Package subpath './aws-cloudfront/lib/experimental' is not defined by "exports" in /Users/petrabarus/Projects/kodingbarengpetra/vue-lambda-ssr/deployments/cdk/node_modules/aws-cdk-lib/package.json

Here's the content of the package.json

{
  "name": "ssr-at-edge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest --verbose",
    "build": "tsc",
    "watch": "tsc -w",
    "start": "npm run build -- -w"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/aws-lambda": "^8.10.89",
    "@types/node": "^17.0.5",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.4"
  },
  "dependencies": {
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14"
  }
}

Is there anything I miss?