Error: jQuery requires a window with a document

后端 未结 12 2272
说谎
说谎 2020-11-29 00:43

So everything was working just fine and great until doing npm update and now things do not work quite as they used to.

A little background: in my code I use jquery

相关标签:
12条回答
  • 2020-11-29 01:18

    (2018) - New jsdom API

    var jsdom = require('jsdom'),
        { JSDOM } = jsdom,
        jsdom_options = {
          runScripts: "dangerously",
          resources: "usable"
        };
    
    // external script example:
    var DOM = new JSDOM(`<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script></head><body></body></html>`, jsdom_options);
    
    // local script example:
    var jQuery = fs.readFileSync("../../jQuery.js", { encoding: "utf-8" });
    var DOM = new JSDOM(``, { runScripts: "dangerously" });
    
    var scriptElm = window.document.createElement("script");
    scriptElm.textContent = jQuery;
    DOM.window.document.head.appendChild(scriptElm);
    

    References:

    1. Loading external scripts
    2. Loading local scripts
    0 讨论(0)
  • 2020-11-29 01:19

    node.js-jQuery definition in one line:

    // definition
    var $ = require('jquery')(require("jsdom").jsdom().parentWindow);
    
    // usage
    $("body").append("<div>TEST</div>");
    console.log($("body").html());
    
    0 讨论(0)
  • 2020-11-29 01:20

    I solved it. had to first remove jsdom and jquery then npm install jsdom jquery.

    Then this:

    var jsdom = require("jsdom"); 
    $ = require("jquery")(jsdom.jsdom().createWindow()); 
    

    Turns out that it was important that I had the latest version. Otherwise it didn't work..

    0 讨论(0)
  • 2020-11-29 01:23

    I know that I am not in the correct year here, but I may have found a better way, then the ways that offered here. If you call the scripts from the .html file, the script will know the document, and it solved the problem for me (at least for now). example:

    index.html:

    <html>
    <head>
    <meta charset="UTF-8">
    <!--Scripts-->
    <script>
        window.$ = window.jQuery = require('../js/libs/jQuery.js');
    </script>
    <script src="../js/libs/materialize.js"></script>
    <script>
        const init = require("../js/initialize/initialize.js");
        init.initializer.main_init();
    </script>
    
    <!--Styles-->
    <!--Libraries-->
    <link rel="stylesheet" href="../scss/libs/materialize.css" />
    </head>
    </html>
    

    initialize.js:

    var jQuery = require('jquery');
    
    (function($, global, undefined) {
        "use strict";
    
        var Initialize = function() {
            var initializer;          
            initializer = {
                materialize_init: function () {
                console.log(document.getElementsByClassName("tooltipped"));
                },
    
                main_initialize: function () {
                    this.materialize_init();
                }
            };
    
            return {
                main_init: function () {
                    initializer.main_initialize();
                    return this;
                }
            };
        };
    
        // AMD and window support
        if (typeof define === "function") {
            define([], function () { return new Initialize(); });
        } else if (typeof global.initializer === "undefined") {
            global.initializer = new Initialize();
        }
    
    })(jQuery, this);
    

    Let me know if it's wrong, I just started to work with this framework today.

    0 讨论(0)
  • 2020-11-29 01:25

    This worked for me

    var jsdom = require('jsdom');
    $ = require('jquery')(new jsdom.JSDOM().window);
    
    0 讨论(0)
  • 2020-11-29 01:33

    The npm package for jQuery definitely used to include jsdom with it, which is why it would work at all in Node: jQuery needs to have some kind of DOM environment to work with.

    You can check that old versions used to have it by doing npm install jquery@1.8.3. You'll see jsdom being installed with it. For some reason they seem to have removed jsdom from the recent releases. I don't know why.

    However, using jsdom 7.x to run jQuery code is simple:

    var jsdom = require("jsdom");
    var window = jsdom.jsdom().defaultView;
    
    jsdom.jQueryify(window, "http://code.jquery.com/jquery.js", function () {
      var $ = window.$;
      $("body").prepend("<h1>The title</h1>");
      console.log($("h1").html());
    });
    

    The path could be changed to a different version of jQuery or to a local file.

    Note: Earlier versions of jsdom, including the 3.x series, would need the line var window = jsdom.jsdom().parentWindow; instead of var window = jsdom.jsdom().defaultView;. 4.x made it so that parentWindow no longer works.

    0 讨论(0)
提交回复
热议问题