Topic: picker-date.js TypeError: Cannot read properties of undefined (reading 'defaults')
When loading MDB onto our website, we expect no console errors.
We are seeing an error for the picker-date.js file in the console:
Uncaught TypeError: Cannot read properties of undefined (reading 'defaults')
at Object.<anonymous> (picker-date.js:1373:25)
at Object.<anonymous> (mdb.min.js?ver=0.9.4.1671485864:80:13656)
at i (bootstrap:19:22)
at Module.<anonymous> (mdb.min.js?ver=0.9.4.1671485864:96:19612)
at i (bootstrap:19:22)
at Object.<anonymous> (mdb.min.js?ver=0.9.4.1671485864:53:9872)
at i (bootstrap:19:22)
at bootstrap:83:10
at mdb.min.js?ver=0.9.4.1671485864:25:916
I do not have a picker-date.js file in my mdb directory. Please advise if/where the file should be added.
Thank you for your help!
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 jQuery
- MDB Version: MDB4 4.20.0
- Device: Laptop
- Browser: Chrome
- OS: Mac Ventura 3.1
- Provided sample code: No
- Provided link: No
Mateusz Lazaru staff commented 1 year ago
How did you import MDB? Have you followed this installation guide?
marketingpayabletruckstop-com premium commented 1 year ago
I did a manual installation following the guide at the link provided.
Mateusz Lazaru staff commented 1 year ago
I need more details to better understand the problem. Can you tell me when the error exactly occurs? It looks like it could be caused by incorrect imports. I could check it for you if you send me the code that would allow me to reproduce the problem.
marketingpayabletruckstop-com premium commented 1 year ago
The error occurs on page load.
I am calling the mdb.min.js from MDB4 4.20.0 near the bottom of the body.
That is all I needed to reproduce the issue.
I am assuming that the mdb.min.js file is referencing picker-date.js, but I don't know where in the file structure the js expects to find the file. I tried to review the js, but it is minified and compressed - not human-readable.
Mateusz Lazaru staff commented 1 year ago
There is
picker-date.jsfile inmdb4\src\js\pro\but that should not be the case since you're using bundled code frommdb.min.js.Are you using any bundler or framework? Does this problem occur after running
index.htmlstraight from the downloaded zip?marketingpayabletruckstop-com premium commented 1 year ago
Thank you for your reply. The error does not occur when viewed from the index.html in the downloaded package.
Looking closer at the error, I see that the file path is webpack://src/js/vendor/pro/picker-date-time.js.
When I click through in the inspector I can see the source as you described. With this new information, I think my original ask is the wrong question. Instead, is there any insight you can give me on the error reported?
Mateusz Lazaru staff commented 1 year ago
For building with webpack, the only way is to import all files from
mdb/src/jsin the webpack configuration.marketingpayabletruckstop-com premium commented 1 year ago
The odd thing is, I do not build my project with webpack - this is just how it was arranged in the map file - so that is the source path that appears in the browser.
I am calling mdb.min.js without any build.
Any idea how to resolve the error considering it isn't being built with webpack?
Mateusz Lazaru staff commented 1 year ago
Could you send me a code with the error reproduced?
marketingpayabletruckstop-com premium commented 1 year ago
I can't seem to reproduce it on a simple HTML page.
My implementation is in a Wordpress instance if that somehow helps.
marketingpayabletruckstop-com premium commented 1 year ago
I can't seem to reproduce it on a simple HTML page. My implementation is in a Wordpress instance.
Is there any additional insight you might offer into this error?
marketingpayabletruckstop-com premium commented 1 year ago
I was finally able to determine that the "file" being referenced was not a file at all but a section of mdb.js that appears to be a file based on the way it is mapped. On line 18423, in $.extend($.fn.pickadate.defaults, "pickadate" is undefined. It looks like "pickadate" is referenced as l elsewhere in the file and when I update "pickadate" to be "l", I no longer received the error.
It would appear that the issue is in fact in the mdb.js file. I am not sure of the consequences of changing that variable name and would prefer that it be addressed by someone more familiar with the code base of your library. Would it be possible to have the bundle file corrected or could you provide some insight?
Thank you for your continuing assistance.
Grzegorz Bujański staff commented 1 year ago
mdb.min.jsis a compiled file and we do not recommend modifying it. When making changes, you do so at your own risk and we don't know if it won't cause bugs in the component. In this case, it probably shouldn't break anything unless you're using a datepicker on your site. to be able to see why this error occurs, we need to be able to reproduce it. How do you add the MDB in your project? Where do you importmdb.min.js? Are you using a datepicker in your project?