Topic: Update to 4.14 breaks website

lyndav001 premium asked 5 years ago


Expected behavior Not to break website after update

Actual behavior Website crashes, error message: ReferenceError: Element is not defined at Object. (.../node_modules/mdbreact/dist/mdbreact.js:3468:44)

Resources (screenshots, code snippets etc.)


Smiles free answered 5 years ago


Still see same error in latest version


Piotr Glejzer staff commented 5 years ago

Are you using SSR?


Jakub Mandra staff answered 5 years ago


Hi,

We could not reproduce your issue on Linux/Chrome nor on Mac/Chrome with freshly installed create-react-app and added mdbreact via gitlab link, what is described in 'Existing project' section of this Getting Started page: https://mdbootstrap.com/docs/react/getting-started/quick-start/

But we have found the potential culprit which is this line of code:

inputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),

It is a prop-type in selectOption component and in the provided by @lyndav001 error message me can read that Element is not defined.

Discussion about prop types for Refs: https://stackoverflow.com/questions/48007326/what-is-the-correct-proptype-for-a-ref-in-react

https://github.com/facebook/prop-types/issues/240

So this prop-type will break under server-side rendering. Do you use SSR in your projects?

There are several ways to get rid of your issue:

1.Produce global shim for Element in your project: Element = typeof Element === 'undefined' ? function(){} : Element

2.downgrade to 4.13.0 version:

  • add the desired tag on the end of the repository link: "mdbreact": "git+https://oauth2:YOUR_TOEKN@git.mdbootstrap.com/mdb/react/re-pro.git#4.13.0"

  • remove node_modules and lock files (to be sure that the package will be overwritten)

  • run npm install

3.Find the broken line in your node_modules/mdbreact/dist/mdbreact.js and comment it (this is just prop-types)

4.Request a hot-fix, but we have only 2 users with that problem so we will be more keen to provide a new branch named #next for you (installation process same as from tag)

Hope my analysis will help.

Best,

Jakub


stathisntonas free commented 5 years ago

I’m using Next 8.1 so this is related to SSR. Waiting for a fix, thanks


Jakub Mandra staff commented 5 years ago

You can use package from branch #next for now: git+https://oauth2:YOUR_TOEKN@git.mdbootstrap.com/mdb/react/re-pro.git#next


lyndav001 premium answered 5 years ago


The lack of response isn't ideal, especially as we are paying customers.


Jakub Mandra staff commented 5 years ago

We answer for questions on support forum within our working hours :)


lyndav001 premium commented 5 years ago

Thanks. The issue was raised 2 days ago and the response was we can't replicate it and I replied instantly and had to wait another 24 hours for a reply.


lyndav001 premium answered 5 years ago


Hi

Please can we get this resolved, or provide an explanation on how to downgrade to v4.13.


Aliaksandr Andrasiuk staff answered 5 years ago


Hello,

I've tried to update the package and it works fine...

Can you describe this problem more detailed please :

1) How did you update to the new mdbreact version?

2) Did you delete node_modules folder ?

3) Did you use npm install / yarn after changing version?

4) Which version of react do you use in your project?

Best regards.


lyndav001 premium commented 5 years ago

Hi 1) I ran npm update 2) No I did not delete node_modules folder 3) Yes I ran npm install 4) React v16.8.6


stathisntonas free commented 5 years ago

1) npm update 2) yes 3) yes 4) 16.8.6

Still getting the error


stathisntonas free answered 5 years ago


Same here, exact same error, 4.14



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

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.13.0
  • Device: MacBook
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: No