*Expected behavior*Creating a basic MDB PRO ReactJS should let you see the web app like it does with the free version.

I followed the steps in this tutorial: https://mdbootstrap.com/articles/react/materialize-your-next-js-project-with-mdbootstrap-for-react/

Only replacing the MDBReact setup bash line with the MDBPro setup instead of regular MDB:

npm install --save git+https://oauth2:[My Key]@git.mdbootstrap.com/mdb/react/re-pro.git  @zeit/next-css next-fonts next-images next-compose-plugins

By the end of the tutorial on the free version I can display basic MDB navigation, if I use the PRO version I get the error below.

• If I remove all MDB components it "works"
• If I revert to the MDB free version it works again
• I can use MDB PRO without reactjs, but this is useless in my project, I got the PRO version as a time saver, but it's not nearly as important as nextjs for success

Is there a solution?

*Actual behavior*I get an unexpected identifier error

    Unexpected identifier
F:\GitHub\temp-next-test\node_modules\jarallax\src\jarallax.esm.js:1
(function (exports, require, module, __filename, __dirname) { import domReady from 'lite-ready';

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (F:\GitHub\temp-next-test\node_modules\jarallax\index.js:1:80)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)

*Resources (screenshots, code snippets etc.)*Non working package.json

{
  "name": "temp-next-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "express": "^4.17.1",
    "mdbreact": "git+https://oauth2:[I'm not giving you my key]@git.mdbootstrap.com/mdb/react/re-pro.git",
    "next": "^9.1.4",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^0.19.0",
    "next-images": "^1.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

/pages/index.js

import Link from 'next/link';
import {
    MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavbarToggler, MDBCollapse, MDBFormInline,
    MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBContainer
} from "mdbreact";

class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        };
    }

    toggleCollapse = () => {
        this.setState({ isOpen: !this.state.isOpen });
    }

    render() {
        return (
            <MDBNavbar color="indigo" dark expand="md">
                <MDBNavbarBrand>
                <strong className="white-text">Navbar</strong>
                </MDBNavbarBrand>
                <MDBNavbarToggler onClick={this.toggleCollapse} />
                <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
                <MDBNavbarNav left>
                    <MDBNavItem>
                    <Link href="/">
                        <a className="nav-link">Home</a>
                    </Link>
                    </MDBNavItem>
                    <MDBNavItem>
                    <Link href="/register">
                        <a className="nav-link">Register</a>
                    </Link>
                    </MDBNavItem>
                    <MDBNavItem>
                    <MDBDropdown>
                        <MDBDropdownToggle nav caret>
                        <span className="mr-2">Dropdown</span>
                        </MDBDropdownToggle>
                        <MDBDropdownMenu>
                        <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                        <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                        <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                        <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                        </MDBDropdownMenu>
                    </MDBDropdown>
                    </MDBNavItem>
                </MDBNavbarNav>
                <MDBNavbarNav right>
                    <MDBNavItem>
                    <MDBFormInline waves>
                        <div className="md-form my-0">
                        <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
                        </div>
                    </MDBFormInline>
                    </MDBNavItem>
                </MDBNavbarNav>
                </MDBCollapse>
            </MDBNavbar>
        );
    }
}

export default Index;

_app.js

import React from 'react';
import App, { Container } from 'next/app';
import "@fortawesome/fontawesome-free/css/all.min.css";
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';

export default class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx)
        }

        return { pageProps };
    };

    render() {
        const { Component, pageProps } = this.props;

        return (

                <Component {...pageProps} />

        );
    }
}