Setup error with MDB PRO React with NextJS (it works with th


Topic: Setup error with MDB PRO React with NextJS (it works with the free version)

dava-bergeron asked 5 years ago

*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} />

        );
    }
}

Konrad Stępień staff answered 5 years ago

Hi @dava-bergeron,

Thank you for the founded bug!

The problem is that parallax that has recently been added tries to refer to the size of the window.

We will fix this in the near future.

Best regards.


dava-bergeron commented 5 years ago

@Konrad Stępień

Thanks, but in the mean time, is there a way to install the previous version (please provide the latest version that doesn't have the broken parallax feature).

Regards,


Konrad Stępień staff commented 5 years ago

Hi @dava-bergeron, if you have your link with the token , please add #4.22.1 in end line.

Like this:

"mdbreact": "git+https://oauth2:TOKEN@git.mdbootstrap.com/mdb/react/re-pro.git#4.22.1",


Are there any updates for this issue?


Jakub Chmura staff premium commented 5 years ago

Hi @stathisntonas,

We currently working to fix this bug. I hope we publish solution soon.

Best, Kuba


Raul Luzetti commented 5 years ago

Nothing yet????

Just remove the "jarallax" from now...

I need to deploy my app in Heroku but i cant because of this problem.


dava-bergeron commented 5 years ago

I ended up re-starting the project from scratch with some other UI library (I was not as close to deployment as you - thankfully)!


Jakub Chmura staff premium commented 5 years ago

Hi @Raul Luzetti, @dava-bergeron,

We already fix the problem with SSR and MDB React Pro. These changes will be published this Monday with newest MDBreact version.

Best, Kuba


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.23.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes