Update to 4.14 breaks website

Topic: Update to 4.14 breaks website

lyndav001 pro premium asked 6 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.)

Add comment

stathisntonas answered 6 years ago

0 0 Best answer

Same here, exact same error, 4.14

Add comment

Aliaksandr Andrasiuk staff answered 6 years ago

0 0 Best answer

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 pro premium commented 6 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 commented 6 years ago

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

Still getting the error

Add comment

lyndav001 pro premium answered 6 years ago

0 0 Best answer

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

Add comment

lyndav001 pro premium answered 6 years ago

0 0 Best answer

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

Jakub Mandra staff premium commented 6 years ago

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

lyndav001 pro premium commented 6 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.

Add comment

Jakub Mandra staff premium answered 6 years ago

0 0 Best answer

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 commented 6 years ago

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

Jakub Mandra staff premium commented 6 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

Add comment

Smiles answered 5 years ago