Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object #4566

Closed
NecatiMeral opened this issue Jul 1, 2020 · 3 comments
Closed

Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object #4566

NecatiMeral opened this issue Jul 1, 2020 · 3 comments
Assignees
@hikalkan
Labels
bug effort-1
Milestone
3.1

Comments

@NecatiMeral
Copy link
Contributor

NecatiMeral commented Jul 1, 2020 •
edited
Loading

Hi,

I'm working on integrating devextreme into a convenience abp module.

Devextreme and it's dependencies (which include jQuery) require to be loaded in the head section, before using any DevExtreme components.

When using the built-in JQueryScriptContributor, it includes the abp.jquery.js file which tries to initialize the MutationObserver. Since the body isn't available yet, it throws a Uncaught TypeError in the console:
Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object.

Consider extracting abp.jquery.js into a separate bundle contributor, so developers can use just jquery.
Currently I'm using the following workaround:

[DependsOn(
        typeof(GlobalizeScriptContributor),
        typeof(JsZipScriptContributor)
        //typeof(JQueryScriptContributor)
        )]
    public class DevExtremeScriptContributor : BundleContributor
    {
        public override void ConfigureBundle(BundleConfigurationContext context)
        {
            context.Files.AddIfNotContains("/libs/jquery/jquery.js");
            context.Files.AddIfNotContains("/libs/devextreme/js/dx.all.js");
            context.Files.AddIfNotContains("/libs/devextreme/js/dx.aspnet.mvc.js");
        }
    }

This contributor get's added in the head section, while other scripts stay in the bottom.
@hikalkan
Copy link
Member

hikalkan commented Jul 5, 2020

You can use the layout hook system to add a view component just as described here: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#layout-hooks
Then, in this component, you can add the JQueryScriptContributor bundle contributor.

Consider extracting abp.jquery.js into a separate bundle contributor, so developers can use just jquery

I didn't undestand how this will help you. When you use JQueryScriptContributor (or depend on the JQueryScriptContributor from your contributor) it should work. No problem to add abp.jquery.js just after the JQuery.

@NecatiMeral
Copy link
Contributor Author

Hi @hikalkan,

You can use the layout hook system to add a view component just as described here: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#layout-hooks
Then, in this component, you can add the JQueryScriptContributor bundle contributor.

Unfortunately this doesn't solve the main issue. DevExtreme requires to be loaded in the head-section (which will work). But the JQueryScriptContributor includes jquery.js and abp.jquery.js, which cannot be loaded in the head-section since it directly runs code which relies on the ´body-section. When using the current JQueryScriptContributor`, it'll include both scripts.

I didn't undestand how this will help you. When you use JQueryScriptContributor (or depend on the JQueryScriptContributor from your contributor) it should work. No problem to add abp.jquery.js just after the JQuery.

When having a JQueryScriptContributor and a AbpJQueryScriptContributor, I could just depend on the standard jquery contributor and don't have to deal with more dependencies. The abp.jquery.js would be defined in another contributor and will be added to the page in the bottom section (and won't cause errors in the console).

My current wip layout is created like this:

<head>
    @await Component.InvokeLayoutHookAsync(LayoutHooks.Head.First, StandardLayouts.Application)

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>@pageTitle</title>

    <abp-style-bundle name="@LuiThemeBundles.Styles.Global" />
    <abp-script-bundle name="@LuiThemeBundles.Scripts.Layout" />
    <!-- This is where just devextreme and it's dependencies should be included (without abp.jquery.js) -->
    <abp-script-bundle name="@LuiThemeBundles.Scripts.DevExtreme" />

    @await Component.InvokeAsync(typeof(WidgetStylesViewComponent))

    @await RenderSectionAsync("styles", false)

    @await Component.InvokeLayoutHookAsync(LayoutHooks.Head.Last, StandardLayouts.Application)
</head>
<body class="lui-main dx-viewport @rtl">
    @await Component.InvokeLayoutHookAsync(LayoutHooks.Body.First, StandardLayouts.Application)

    <!-- code omitted... -->
    @{ RenderContent(); }
 
    <!-- abp.jquery.js should be included with the default script contributors here -->
    <abp-script-bundle name="@LuiThemeBundles.Scripts.Global" />

    <script src="~/Abp/ApplicationConfigurationScript"></script>
    <script src="~/Abp/ServiceProxyScript"></script>

    @await Component.InvokeAsync(typeof(WidgetScriptsViewComponent))

    @await RenderSectionAsync("scripts", false)

    @await Component.InvokeLayoutHookAsync(LayoutHooks.Body.Last, StandardLayouts.Application)
</body>

@hikalkan hikalkan self-assigned this Jul 26, 2020
@hikalkan hikalkan added this to the 3.1 milestone Jul 26, 2020
@hikalkan hikalkan changed the title JQueryScriptContributor: Extract abp.jquery.js Uncaught TypeError: MutationObserver.observe: Argument 1 is not an object Aug 11, 2020
@hikalkan
Copy link
Member

The problem was we had try to find the body out of "dom ready" event. I fixed it, so it should solve your problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hikalkan hikalkan

Labels
bug effort-1
Projects
None yet
Milestone
3.1
Development

No branches or pull requests
2 participants
@hikalkan @NecatiMeral