Nova 4 Upgrade: Cannot read properties of undefined (reading 'base')

I'm upgrading from Nova 3 to Nova 4 (specifically, Nova 4.27.12), and I'm getting the following JavaScript error when trying to load the main dashboard:

Uncaught TypeError: Cannot read properties of undefined (reading 'base')

Based on that section in the code, it's trying to reference window.config.base.

I looked at my layout file, and config is defined:

(Source)

<!-- Build Nova Instance -->
<script>
    const config = @json(\Laravel\Nova\Nova::jsonVariables(request()));
    window.Nova = createNovaApp(config)
    Nova.countdown()
</script>

(Browser)

<!-- Build Nova Instance -->
<script>
    const config = {
        /* ... */
        "base": "\/nova",
        /* ... */
    };
    window.config = config;
    window.Nova = createNovaApp(config)
    Nova.countdown()
</script>

The error itself is happening within webpack:

var h = function(e) {
    var t = e.base
      , r = new m.default({
        scrollBehavior: b,
        base: t,
        mode: "history",
        routes: p.default
    });
    return r.beforeEach(l),
    r.afterEach(u),
    r
}({
    base: window.config.base
});

I've followed the upgrade guide to the best of my ability, and I can't seem to figure this one out.

Does anyone know what I need to do?

LaryAI

2 years ago

Level 58

This error occurs because the window.config object is not defined or is undefined. To fix this issue, you need to ensure that the window.config object is properly defined before it is used.

Based on the code you provided, it seems that the window.config object is defined correctly in the layout file. However, it's possible that there might be an issue with how the JavaScript files are being loaded or executed.

Here are a few steps you can take to troubleshoot and fix the issue:

Make sure that the JavaScript file containing the code snippet you provided is being loaded after the layout file. Check the order of script tags in your HTML file and ensure that the layout file is loaded before the JavaScript file.
Check if there are any JavaScript errors or warnings in the browser console. It's possible that there might be other errors in your code that are preventing the window.config object from being defined correctly.
Verify that the createNovaApp function is defined and accessible in your JavaScript code. If it's not defined or there are any issues with its implementation, it could prevent the window.config object from being set correctly.

If none of the above steps resolve the issue, you can try the following workaround:

Wrap the code that references window.config.base in a conditional statement to check if window.config is defined before accessing its properties. Here's an example:

var h = function(e) {
    var t = e.base;
    if (window.config) {
        t = window.config.base;
    }
    var r = new m.default({
        scrollBehavior: b,
        base: t,
        mode: "history",
        routes: p.default
    });
    return r.beforeEach(l),
    r.afterEach(u),
    r;
}({
    base: window.config ? window.config.base : undefined
});

This will prevent the error from occurring if window.config is undefined.

If you're still experiencing issues, it might be helpful to provide more information about your project setup and any other relevant code snippets.

tylernathanreed

2 years ago

Level 14

Sorry @laryai, but your solutions won't for me. I'll probably need human assistance on this one.

The order of the scripts in the Nova source code is likely correct, and I can't just modify webpack generated code.

My Nova installation is pretty bare bones, in that I only have a User resource (no Filters, Lenses, Actions, etc). The User resource is customized, but not heavily.

tylernathanreed

2 years ago

Best Answer

Level 14

I found the root cause. Apparently my project is set up to provide assets outside of the public directly, and our internal npm run prod command copies those files over.

Please or to participate in this conversation.