Module entry point "nise.js" is wonky

[rotu]

package.json lists "module": "nise.js" as an entrypoint, but the nise.js file is a UMD module, not a ES module.

Additionally, the shape of the module when I use a ESM import is wonky. Here's what I get from Node CLI:

>>> await import("nise")
[Module: null prototype] {
  default: {
    fakeServer: {
      // ...
    },
    fakeServerWithClock: {
      // ...
    },
    fakeXhr: {
      // ...
    }
  },
  fakeServer: {
    // ...
  }
}

[fatso83]

Hi, thanks for this. The non-standard module field used by some bundlers is supposedly meant to point to a directory of ES Modules. I guess it might as well be better to simply remove it? With regards to the "shape", are you referring to the exported functions being available under the default export, instead of separate exports on the root?

[rotu]

Yep, the various options are kinda a mess to choose from. I think it should be using main and exports as documented here.

By the “shape”, I mean that fakeServer is the only option available to import by name. Either all 3 named exports should be there or none at all.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rotu]

not stale

[fatso83]

@mroderick Are you looking at this wrt your current ESM work?

[mohamedmansour]

@fatso83 @mroderick we discussed this like April 28th, 2025 :)
sinonjs/sinon#2655

Nise is currently a CommonJS only, no proper ESM exports. The hacky workaround is to load it as a script tag instead of importing it. To make it work in ESM, I had to do make my own loader this way https://github.com/mohamedmansour/nise-esm

[mohamedmansour]

I noticed that this now works:

import * as nise from 'nise';
import type * as niseTypes from 'nise';

declare global {
  interface Window {
    nise: typeof nise;
  }
}

let niseLib: typeof nise;

function useFakeServer(): niseTypes.FakeServer {
  if (!niseLib) {
    niseLib = (typeof window !== 'undefined' && window.nise) || nise;
  }
  return niseLib.fakeServer.create();
}

export type FakeServer = niseTypes.FakeServer;
export type FakeXMLHttpRequest = niseTypes.FakeXMLHttpRequest;

export default {
  ...nise,
  useFakeServer,
};

Then you can use it this way:

import nise, { type FakeServer } from 'fake-server.js';

describe('Fetch', () => {
  let server: FakeServer;

  beforeEach(() => {
    server = nise.useFakeServer();
  });

  afterEach(() => {
    server.restore();
  });

  it('should work', () => {
    server.respondWith("GET", "/api/test", [
      200,
      { "Content-Type": "application/json" },
      '{"message": "Hello from fake server!"}'
    ]);

    // Make a request (would normally be done by your application code).
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/api/test", false);
    xhr.send();

    // Respond to all pending requests.
    server.respond();

    expect(xhr.status).to.equal(200);
    expect(JSON.parse(xhr.responseText).message).to.equal("Hello from fake server!");
  });
});

[AGutierrezR]

You can also import nise for its side effects, since it adds the nise property to the window object.

The methods/functions fakeXhr, fakeServerWithClock, and fakeServer are available under window.nise or nise that is available globally.

For this, you only need to use:

import 'nise'

// then, use  fakeXhr, or fakeServerWithClock, or fakeServer
nise.fakeServer.create();

// or

window.nise.fakeServer.create()