Can't use with esbuild

esbuild produces the following error

[error] ✘ [ERROR] Could not resolve "@formkit/auto-animate"
[error]     ../main.js:2:51:
[error]       2 │ ...040formkit$002fauto$002danimate = require("@formkit/auto-animate");
[error]         ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~
[error]   The path "." is not currently exported by package "@formkit/auto-animate":
[error]     ../../../../../node_modules/@formkit/auto-animate/package.json:18:13:
[error]       18 │   "exports": {
[error]          ╵              ^
[error]   None of the conditions provided ("import") match any of the currently active conditions ("browser", "default", "require"):
[error]     ../../../../../node_modules/@formkit/auto-animate/package.json:27:9:
[error]       27 │     ".": {
[error]          ╵          ^
[error]   Consider using an "import" statement to import this file, which will work because the "import" condition is supported by this package:
[error]     ../main.js:2:51:
[error]       2 │ ...040formkit$002fauto$002danimate = require("@formkit/auto-animate");
[error]         ╵                                              ~~~~~~~~~~~~~~~~~~~~~~~
[error]   You can mark the path "@formkit/auto-animate" as external to exclude it from the bundle, which will remove this error. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

I guess we need to add default property to package.json:

"exports": {
  ".": {
    "import": "./index.mjs",
    "default": "..."
  }
}

[lspoor]

Node - v14.16.0 OS - macOS Catalina 10.15.17

This is the only library I’ve ever had this issue with.

[hyrious]

I think you can just change "import" to "default" if you don’t want a CJS copy. Or only enforce the rule at node side:

"exports": {
    ".": {
      "node": { "import": "./index.js" },
      "default": "./index.js"
    }
}

I know the reason you’re doing this now is for telling people they cannot require the library. But in fact they can – when they have a bundler. Using default for exporting front-end files is a good practice since we must be careful enough to not including the same library twice (one ESM and another CJS). You can read more about dual package in Node.js’ doc.

For a temporary workaround, you can always write an esbuild plugin / tsconfig.path to manaully resolve a file:

var dedup_auto_animate_plugin = {
  name:"dedup:auto-animate",
  setup(build) {
    build.onResolve({ filter: /^@formkit\/auto-animate$/ }, args => {
      return { path: path.resolve("node_modules/" + args.path + "/index.js") } // didn't test
    })
  }
}