Skip to Content
Menu
This question has been flagged
1 Reply
2868 Views

Hello, I'm trying to integrate an open source odoo 16 module that I found online in Odoo 18 but I'm receiving the following error in the developer console of chrome.

web.assets_web.min.js:17 Uncaught Error: Error while loading "@datetime_calendar/components/datetime_calendar":
TypeError: Cannot convert undefined or null to object
    at ModuleLoader.startModule (web.assets_web.min.js:17:225)
    at ModuleLoader.startModules (web.assets_web.min.js:16:57)
    at ModuleLoader.addJob (web.assets_web.min.js:13:39)
    at ModuleLoader.define (web.assets_web.min.js:12:127)
    at web.assets_web.min.js:20259:6

And here's the code:

/* @odoo-module */

import { dateField, DateTimeField } from "@web/views/fields/datetime/datetime_field";import { patch } from "@web/core/utils/patch";const { DateTime } = luxon;const { useState } = owl;

console.log(DateTimeField);

function setCalendar(date, calendar, format = DateTime.DATE_FULL) { console.log("setCalendar called with:", date, calendar); if (!date) return ''; const luxonDate = DateTime.fromISO(date); if (!luxonDate.isValid) return ''; return luxonDate.reconfigure({ outputCalendar: calendar }).toLocaleString(format);}

patch(dateField.prototype, { setup() { this._super?.(); console.log("setup: Value of this.props.value:", this.props.value);

this.calendar = useState({ 'hebrew': setCalendar(this.props.value || DateTime.now().toISO(), "hebrew"), 'islamic': setCalendar(this.props.value || DateTime.now().toISO(), "islamic"), }); },

onDateTimeChanged(date) { this._super?.(date); this.calendar.islamic = setCalendar(date, "islamic"); },

get formattedValue() { return this.isDateTime ? setCalendar(this.props.value, "islamic", DateTime.DATETIME_MED) : setCalendar(this.props.value, "islamic"); },});

patch(DateTimeField.prototype, { setup() { this._super?.(); console.log("setup: Value of this.props.value:", this.props.value);

this.calendar = useState({ 'hebrew': setCalendar(this.props.value || DateTime.now().toISO(), "hebrew"), 'islamic': setCalendar(this.props.value || DateTime.now().toISO(), "islamic"), }); },

onDateTimeChanged(date) { this._super?.(date); this.calendar.islamic = setCalendar(date, "islamic"); },

get formattedValue() { return setCalendar(this.props.value, "islamic"); },});

Why is this error showing, and how can I fix it?
Thank you!

Avatar
Discard
Best Answer

The error TypeError: Cannot convert undefined or null to object typically occurs because an object or property you're trying to use in your code is either undefined or null. Based on the provided code and error message, here's a detailed analysis and fix for the issue:

Root Cause

The error arises when the patch function tries to apply a patch to dateField.prototype or DateTimeField.prototype, but one or both of these are undefined or improperly imported in your module.

The problem seems to stem from this line:

javascriptCopy codeimport { dateField, DateTimeField } from "@web/views/fields/datetime/datetime_field";
  • Odoo 18 (or 16) may not define dateField or DateTimeField as exported members in the module @web/views/fields/datetime/datetime_field. This means you're importing something that does not exist or has changed in the newer version.

Steps to Fix

1. Check the Imports

Ensure the imports match the actual exported objects in @web/views/fields/datetime/datetime_field. Check the source code of this module to confirm whether dateField and DateTimeField are available.

  • You can inspect Odoo’s source code for this module or log the imported objects:
    javascriptCopy codeimport * as datetimeField from "@web/views/fields/datetime/datetime_field";
    console.log(datetimeField);
    
  • If dateField or DateTimeField is undefined, it means these are not part of the module's exports.

2. Update the Module Path or Import Statement

In newer Odoo versions, there might be changes in the structure of the module. Check if dateField or DateTimeField is located in another module. For instance:

javascriptCopy codeimport { DateTimeField } from "@web/views/fields/fields";

If dateField does not exist, you can drop it from your imports.

3. Ensure Luxon Is Properly Imported

Ensure that the luxon library is available in your environment and properly imported:

javascriptCopy codeimport { DateTime } from "luxon";

Odoo typically includes Luxon in its dependencies, but verify this by logging DateTime:

javascriptCopy codeconsole.log(DateTime);

If DateTime is undefined, install Luxon in your development environment:

bashCopy codenpm install luxon

4. Update the patch Function Calls

The patch function attempts to extend the prototypes of dateField and DateTimeField. If either is undefined, it will throw an error.

To prevent this error, add defensive checks before applying patches:

javascriptCopy codeif (dateField) {
    patch(dateField.prototype, {
        setup() {
            this._super?.();
            console.log("setup: Value of this.props.value:", this.props.value);

            this.calendar = useState({
                'hebrew': setCalendar(this.props.value || DateTime.now().toISO(), "hebrew"),
                'islamic': setCalendar(this.props.value || DateTime.now().toISO(), "islamic"),
            });
        },

        onDateTimeChanged(date) {
            this._super?.(date);
            this.calendar.islamic = setCalendar(date, "islamic");
        },

        get formattedValue() {
            return this.isDateTime
                ? setCalendar(this.props.value, "islamic", DateTime.DATETIME_MED)
                : setCalendar(this.props.value, "islamic");
        },
    });
}

if (DateTimeField) {
    patch(DateTimeField.prototype, {
        setup() {
            this._super?.();
            console.log("setup: Value of this.props.value:", this.props.value);

            this.calendar = useState({
                'hebrew': setCalendar(this.props.value || DateTime.now().toISO(), "hebrew"),
                'islamic': setCalendar(this.props.value || DateTime.now().toISO(), "islamic"),
            });
        },

        onDateTimeChanged(date) {
            this._super?.(date);
            this.calendar.islamic = setCalendar(date, "islamic");
        },

        get formattedValue() {
            return setCalendar(this.props.value, "islamic");
        },
    });
}

This ensures the patch is only applied when the target object exists.


5. Debugging Missing Objects

If dateField or DateTimeField is completely missing from Odoo 18, it may have been deprecated or replaced. In this case:

  1. Search the Odoo source code for similar objects.
  2. Update your module to patch the replacement objects or write a custom implementation.

Conclusion

Here’s the key takeaway:

  • Ensure dateField and DateTimeField exist in your version of Odoo.
  • Use defensive programming (e.g., checks for undefined) when applying patches.
  • Verify dependencies like luxon are correctly installed and accessible.

Avatar
Discard
Related Posts Replies Views Activity
0
Jun 25
123
1
Jun 25
465
1
Jun 25
402
1
May 25
1013
1
May 25
670