[Bug Report]: ESM build needed

[benwoodward]

Thanks for this package, I've been using it with Svelte, and I'm migrating our codebase to SvelteKit/Vite which uses ES modules. I'm getting the following error when building the project:

> Named export 'waitUntil' not found. The requested module 'async-wait-until' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'async-wait-until';
const {waitUntil} = pkg;

file:///Users/ben/dev/myproject/.svelte-kit/output/server/app.js:12
import {waitUntil} from "async-wait-until";
        ^^^^^^^^^
SyntaxError: Named export 'waitUntil' not found. The requested module 'async-wait-until' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'async-wait-until';
const {waitUntil} = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:142:20)
    at async Loader.import (internal/modules/esm/loader.js:182:24)
    at async prerender (file:///Users/ben/dev/myproject/node_modules/@sveltejs/kit/dist/chunks/index5.js:79:14)
    at async Object.prerender (file:///Users/ben/dev/myproject/node_modules/@sveltejs/kit/dist/chunks/index5.js:296:5)
    at async adapt (file:///Users/ben/dev/myproject/node_modules/@sveltejs/adapter-netlify/index.js:33:4)
    at async adapt (file:///Users/ben/dev/myproject/node_modules/@sveltejs/kit/dist/chunks/index5.js:322:2)
    at async file:///Users/ben/dev/myproject/node_modules/@sveltejs/kit/dist/cli.js:616:5
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `svelte-kit build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ben/.npm/_logs/2021-05-18T09_25_30_601Z-debug.log

Here is an example of how to add ESM output to the package: https://github.com/prisma-labs/graphql-request/pull/193

EDIT: Oops just realised that ESM exists, changed my import statement to import { waitUntil } from 'async-wait-until/dist/es.js'; but still getting an error:

> Named export 'waitUntil' not found. The requested module 'async-wait-until/dist/es.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'async-wait-until/dist/es.js';
const {waitUntil} = pkg;

file:///Users/ben/dev/language-platform/fluent.school/.svelte-kit/output/server/app.js:18
import {waitUntil} from "async-wait-until/dist/es.js";
        ^^^^^^^^^
SyntaxError: Named export 'waitUntil' not found. The requested module 'async-wait-until/dist/es.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'async-wait-until/dist/es.js';
const {waitUntil} = pkg;

    at ModuleJob._instantiate (internal/modules/esm/module_job.js:97:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:142:20)
    at async Loader.import (internal/modules/esm/loader.js:182:24)
    at async prerender (file:///Users/ben/dev/language-platform/fluent.school/node_modules/@sveltejs/kit/dist/chunks/index5.js:79:14)
    at async Object.prerender (file:///Users/ben/dev/language-platform/fluent.school/node_modules/@sveltejs/kit/dist/chunks/index5.js:296:5)
    at async adapt (file:///Users/ben/dev/language-platform/fluent.school/node_modules/@sveltejs/adapter-netlify/index.js:33:4)
    at async adapt (file:///Users/ben/dev/language-platform/fluent.school/node_modules/@sveltejs/kit/dist/chunks/index5.js:322:2)
    at async file:///Users/ben/dev/language-platform/fluent.school/node_modules/@sveltejs/kit/dist/cli.js:616:5
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `svelte-kit build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ben/.npm/_logs/2021-05-18T09_33_57_911Z-debug.log

EDIT: Renaming the file from es.js to es.mjs seemed to fix this issue for me, let me know what you think and I can make a PR

EDIT: Perhaps the real issue is that there needs to be a "module": value pointing to the esm version in package.json, example: https://github.com/daybrush/moveable/blob/2c4420ed816f6d14ca1cb174c31c5f4f11324eae/package.json#L6

[devlato]

@benwoodward hey mate! There is already an ESM build, please check the README, pal

[benwoodward]

Maybe you missed my edit:

EDIT: Oops just realised that ESM exists, changed my import statement to import { waitUntil } from 'async-wait-until/dist/es.js'; but still getting an error

[devlato]

@benwoodward please follow #17, once it gets merged, a fixed version (2.0.6) will be released. Please reopen this issue if the bug still reproduces.

[benwoodward]

Thanks 👍🏻, I'll test it later today.

[benwoodward]

Okay, I've done a bunch more testing and created a reproduction issue. I think this is potentially a bug with SvelteKit/Vite.

SvelteKit issue: https://github.com/sveltejs/kit/issues/1498 Reproduction repo: https://github.com/benwoodward/sveltekit-named-export-issue-repro

[benwoodward]

Still having issues with this unfortunately..

I've done some more testing locally based on suggestions from Svelte team.

What I've found is that importing as an ES module only works with the following added to this repo's package.json:

  "type": "module",
  "exports": {
    ".": {
      "import": "./dist/index.esm.js",
      "require": "./dist/index.js"
    },
    "./package.json": "./package.json"
  },

From testing, I found that it wouldn't work without "type": "module", however, after specifying that in package.json, running npm install (for async-wait-until) caused the following error:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/ben/dev/oss/async-wait-until/.eslintrc.js
require() of ES modules is not supported.
require() of /Users/ben/dev/oss/async-wait-until/.eslintrc.js from /Users/ben/dev/oss/async-wait-until/node_modules/@eslint/eslintrc/lib/config-array-factory.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename .eslintrc.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/dev/oss/async-wait-until/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1015:13)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at module.exports (/Users/ben/dev/oss/async-wait-until/node_modules/import-fresh/index.js:32:59)
    at loadJSConfigFile (/Users/ben/dev/oss/async-wait-until/node_modules/@eslint/eslintrc/lib/config-array-factory.js:225:16)
    at loadConfigFile (/Users/ben/dev/oss/async-wait-until/node_modules/@eslint/eslintrc/lib/config-array-factory.js:309:20)
    at ConfigArrayFactory._loadConfigData (/Users/ben/dev/oss/async-wait-until/node_modules/@eslint/eslintrc/lib/config-array-factory.js:609:42)
    at ConfigArrayFactory.loadFile (/Users/ben/dev/oss/async-wait-until/node_modules/@eslint/eslintrc/lib/config-array-factory.js:475:40)
    at createCLIConfigArray (/Users/ben/dev/oss/async-wait-until/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:171:35)

There are a couple of other repos with this issue that have fixed the problem by adding exports configs to package.json, see: https://github.com/dankogai/js-base64/pull/140 and https://github.com/MacFJA/svelte-persistent-store/pull/4

Still hard to say whether this is an issue with node or async-wait-until.

For the time being I'm going to just copy the async-wait-until code into my src and import it that way.

[devlato]

@benwoodward thanks for your detailed report! I'll see what I can do, and will check how to auto-test this to avoid regressions in the future. In meantime, I'll keep this issue open 👀

[vkallore]

@benwoodward @devlato following worked for me (v16.13.0).

import waitUntilPackage from 'async-wait-until';
const { waitUntil } = waitUntilPackage;

I have the type module in package.json

  "type": "module",

[psulek]

I have same issue with version 2.0.12, it seems this code (tested on my local node_modules\async-wait-until\package.json will fix issues for ESM modules:

    "type": "module",
    "exports": {
        ".": {
            "require": {
                "default": "./dist/index.js"
            },
            "import": {
                "default": "./dist/index.esm.js"
            }
        }
    }

And remove these 2 lines:

      "main": "dist/index.js",
      "module": "dist/index.esm.js",

[psulek]

or maybe shorter exports:

    "type": "module",
    "exports": {
        ".": {
            "require": "./dist/index.js",
            "import": "./dist/index.esm.js"
        }
    }

[damonholden]

I had the same issue in version 2.0.12. the solution from @vkallore worked but the following two import attempts listed in the docs did not work for me and resulted in Reference Errors:

import { waitUntil } from 'async-wait-until'; import { waitUntil } from 'async-wait-until/dist/index.esm.js';