ReferenceError: window is not defined

naze

Link to test case:

https://codesandbox.io/p/sandbox/flamboyant-darkness-f2jg2x?file=%2Fpackage.json&selection=%5B%7B%22endColumn%22%3A23%2C%22endLineNumber%22%3A21%2C%22startColumn%22%3A23%2C%22startLineNumber%22%3A21%7D%5D

Debugger code (debug.datatables.net):

if (typeof window !== 'undefined') {
            module.exports = function (root, $) {
                if ( ! root ) {
                    // CommonJS environments without a window global must pass a
                    // root. This will give an error otherwise
                    root = window;
                }

                if ( ! $ ) {
                    $ = jq( root );
                }

                // cjsRequires( root, $ );
                return factory( $, root, root.document );
            };
        }
        else {
            cjsRequires( window, jq );
            module.exports = factory( jq, window, window.document );
        }

Error messages shown:

ReferenceError: window is not defined in /datatables.net-bs5/js/dataTables.bootstrap5.js

Description of problem:

This error is occuring just by importing datatables. Even if I remove the logics inside the useEffect hook, I still get the same error. Is there any update to fix this issue or does anyone have an idea about this?

allan

Thanks for the link. However, I'm getting an error when I open it::

Failed to compile

./:5:0
Module not found: Can't resolve '/project/sandbox/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/loader.js'

https://nextjs.org/docs/messages/module-not-found

That said, your dependencies on the DataTables modules there are all for old versions, although weirdly the CommonJS loader you've shown there is from a newer version.

Can you tell me how to get the codesandbox example running and I'll look into this?

Allan

naze

Hi Allan,
Yes, I kept working on the sandbox after I posted here. This created an error.

Here is a sandbox I am working on now.

I can update the packages to the latest datatables.

https://codesandbox.io/p/sandbox/naughty-nightingale-x9je2k?file=%2Fpages%2Ftable.js&selection=%5B%7B%22endColumn%22%3A17%2C%22endLineNumber%22%3A3%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A3%7D%5D

naze

Did you get some time to look at the error agai?

allan

Sorry for the delay! And the mistake that lead to this error. It is an error in my logic for checking if the execution environment is window-less or not. I've committed the fix, but now everything will need to be released.

With that change it will at least now load. However, the extensions such as Buttons and Responsive will need to be rebuilt to allow that to work as well.

I'll get them released towards the end of the week.

Regards,
Allan

naze

The same error is in all the other imports. Responsive, button, etc... When will the fix be released?

allan

I'm working on a few other tweaks and changes and hope to do the releases soon.

Allan

Ahilan

Still the error exist.Any one has solution I am trying to use datatables in a next js project.

allan

Apologies - I've got a bit of a backlog with the releases. Are you npm installing the packages? You could use the latest commit from git to get the latest until I manage the releases.

Allan

Ahilan

No need to apologize.Thanks for letting me know, Allan.I'm currently using npm to install the packages, but I'm not sure how to use the latest commit from git. Could you please guide me on how to do that?

allan

Its a bit of a pain unfortunately, but this SO post discusses how it can be done. This is our Buttons distribution repo (i.e. datatables.net-buttons). The other packages have similar distribution repos.

Allan

riz_thedesignfactory

Hi Allan,

I came across the same issue while using the datatable in nextjs13 app route. I also tried the code from this commit but the issue persists. I am not using any other plugin just datatable and window is null and window is not defined issue occured right away.

The codesandbox example you uploaded at this is also not working for me.

As workable solution I have used Script tag of nextjs to include the datatable js in a page and it is doing the job so far but this is not a proper react way. It will be really helpful if datatable works with import statement, the proper modular way as this is one of the best data-grid and we utilize it alot in our non-react app and wanted to use in our react-nextjs applications but this window not define issue is the main hurdle in using it

allan

With the package.json file updated to use the latest versions of DataTables and its extensions it runs okay.

Allan