Posted in Uncategorized

Webpack errors when combined with jsdom

   February 23, 2021  2 Comments on Webpack errors when combined with jsdom

I’m trying to compile this file with webpack:

var jsdom = require('mocha-jsdom');

describe('WatchlistAsset', function () {
    jsdom();

    it('has document', function () {
        var div = document.createElement('div');
        expect(div.nodeName).eql('DIV');
    });
});

It seems quite simple, yet the presence of jsdom breaks everything.

First of all it can’t find fs:

ERROR in ~/webpack-project/~/jsdom/lib/jsdom.js
Module not found: Error: Cannot resolve module 'fs' in ~/webpack-project/node_modules/jsdom/lib
 @ ~/webpack-project/~/jsdom/lib/jsdom.js 1:9-22

Afterwards a huge amount of errors are thrown by webpack, and it’s even parsing files I wouldn’t expect it to parse e.g. ~/webpack-project/node_modules/jsdom/node_modules/htmlparser2/node_modules/entities/maps/entities.json

PS: I have tried setting node: {fs: 'empty'} as suggested at pugjs/pug-loader#8, but no luck

Author: Fantashit

2 thoughts on “Webpack errors when combined with jsdom”

  1. I had this problem, but just ignored jsdom:

        plugins: [
        new webpack.IgnorePlugin(/jsdom$/)
    ]

    So my dev and production bundles don’t include jsdom, and I can run (mocha) tests from the command line.

  2. I had the same problem. I introduced a file which construct the global document and window objects by jsdom, and the file import the webpack bundles contain the test code. This will avoid to compile the jsdom module.

    var JsDom = require('jsdom');

global.document = JsDom.jsdom('<!DOCTYPE html><html><head></head><body></body></html>');
global.window = document.defaultView;
global.navigator = window.navigator;

require('./build/test.bundle.js');

Comments are closed.