nise cannot be used standalone in pure ESM environments

[mohamedmansour]

Hello!

I am using ES Modules for my test infra, and once Sinon v20 removed useFakeServer and asked us to use nise it doesn't work for ESM since it is CommonJS

Expected behavior:

import nise from "nise";
// or
import { fakeServer } from "nise";

Actual Behavior

SyntaxError: The requested module './../node_modules/nise/nise.js' does not provide an export named 'default'

Root Cause Analysis

1. The nise.js file starts with UMD wrapper: (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}...
2. No proper ESM exports are provided

• package.json declares "module": "nise.js" but this file is a UMD bundle, not a true ES module
• The UMD bundle creates a global nise variable but doesn't export it in ESM format
• Browser bundlers can't resolve the CommonJS exports in browser environments

Attempted solutions that failed:

1. Direct imports: import nise from "nise"
2. Named imports: import { fakeServer } from "nise"
3. Dynamic imports: await import("nise") → Returns empty object {}
4. CommonJS transformation: Using @rollup/plugin-commonjs
5. Namespace imports: import * as nise from "nise"

Workaround
Created a custom loader that dynamically loads nise as a script tag:

let niseLib: any = null;

export async function getNise(): Promise<any> {
  if (niseLib) {
    return niseLib;
  }
  
  if (typeof window !== 'undefined') {
    if (!(window as any).nise) {
      const script = document.createElement('script');
      script.src = './node_modules/nise/nise.js';
      document.head.appendChild(script);
      
      await new Promise((resolve, reject) => {
        script.onload = resolve;
        script.onerror = reject;
      });
    }
    niseLib = (window as any).nise;
  }
  
  return niseLib;
}

Recommended fixes

1. Create a dedicated ESM build alongside the UMD versions

• dist/nise.esm.js - Pure ESM with proper exports
• Update package.json to have a module entry: "module": "dist/nise.esm.js"

2. Fix package.json exports:

  "exports": {
    ".": {
      "import": "./dist/nise.esm.js",
      "require": "./lib/index.js",
      "browser": "./nise.js"
    }
  }

Thank you!

[fatso83]

Hi, some more info could be helpful, as I just did a 5 minute test that proved succesful:

First, set up a project

mkdir nise-client
cd nise-client
npm init -y
npm i nise

Create a minimal program that consumes nise:

cat > index.mjs
import nise from "nise";

console.dir(nise);
const result = nise.fakeServer.create();
console.dir(result);

Show that it works:

Running `node index.mjs` runs successfully

{
  fakeServer: {
    create: [Function: create],
    configure: [Function: configure],
    addRequest: [Function: addRequest],
    getHTTPMethod: [Function: getHTTPMethod],
    handleRequest: [Function: handleRequest],
    logger: [Function: logger],
    logError: [Function: logError],
    log: [Function: log],
    respondWith: [Function: respondWith],
    respond: [Function: respond],
    respondAll: [Function: respondAll],
    processRequest: [Function: processRequest],
    restore: [Function: restore],
    getRequest: [Function: getRequest],
    reset: [Function: reset],
    resetBehavior: [Function: resetBehavior],
    resetHistory: [Function: resetHistory]
  },
  fakeServerWithClock: {
    addRequest: [Function: addRequest],
    respond: [Function: respond],
    restore: [Function: restore]
  },
  fakeXhr: {
    xhr: {
      XMLHttpRequest: undefined,
      GlobalXMLHttpRequest: undefined,
      GlobalActiveXObject: undefined,
      supportsActiveX: false,
      supportsXHR: false,
      workingXHR: false,
      supportsTimeout: false,
      supportsCORS: false
    },
    FakeXMLHttpRequest: [Function: FakeXMLHttpRequest] {
      filters: [],
      addFilter: [Function: addFilter],
      defake: [Function: defake],
      useFilters: false,
      parseXML: [Function: parseXML],
      statusCodes: [Object],
      UNSENT: 0,
      OPENED: 1,
      HEADERS_RECEIVED: 2,
      LOADING: 3,
      DONE: 4
    },
    useFakeXMLHttpRequest: [Function: useFakeXMLHttpRequest],
    fakeXMLHttpRequestFor: [Function: fakeXMLHttpRequestFor]
  }
}
{
  logError: [Function: logError],
  requests: [],
  requestCount: 0,
  queue: [],
  responses: []
}

Details of my environment

• Node: 22.14.0
• npm: 10.9.2
• OS: macOS 15.4 (should not matter)

[fatso83]

I am guessing this works as it should, and that the issues that is being seen are due to some setup in the project. Either that, or some older Node version, but I don't think so.

[mohamedmansour]

Hi @fatso83 thank you, I will get a small repro, I am using Web Test Runner, https://modern-web.dev/docs/test-runner/overview/. This will take time cause I have a surgery soon, so after that I will report back.

We are running this in Chromium JS Tests, we have Node 22.11.0, @web/test-runner v0.20.0 and @web/test-runner-playwright 0.11.0

And on top of that, we are using package.json '"type": "module"' attribute, so we run our tests with .js and not .mjs

[mohamedmansour]

Hi @fatso83 , I updated the description of this discussion, please take a look again!

TLDR Nise doesn't work with ESM imports in browsers, 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.

When it was within Sinon, it worked perfectly, and didn't need this workaround.

Repro:
https://github.com/mohamedmansour/nise-esm