Can't use with esbuild

[nghuuphuoc]

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": "..."
  }
}

[justin-schroeder]

Thanks, we'll get this into the next build. Are you able to provide a minimal reproduction that throws this error so we can test various import/export combos? Also relevant information:

• Node version
• OS

[lspoor]

Also getting the same, is there a temporary solution for this until a fix is pushed?

[justin-schroeder]

Still need node version and os version to begin to trouble shoot this. Most people dont seem to have this issue so its unclear what is different about your installations.

[nghuuphuoc]

I don't have enough time to create a minimal repos to reproduce the issue yet, but first here is the information

• Node version:

$ node -v
v14.17.6

• OS version: macOS Monterey 12.4

[lspoor]

Node - v14.16.0 OS - macOS Catalina 10.15.17

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

[justin-schroeder]

@nghuuphuoc Question on this — are you importing this using CommonJS (require) instead of using import? We don't ship a CJS file at all at the moment.

[nghuuphuoc]

@justin-schroeder Our codebase isn't written in JavaScript directly, that's why it is a little bit complicated to create a repos for you. However, as you can see in the error

error] ✘ [ERROR] Could not resolve "@formkit/auto-animate"
[error]     ../main.js:2:51:
[error]       2 │ ...040formkit$002fauto$002danimate = require("@formkit/auto-animate");

The code is transpiled to JavaScript via a require call. I can't change the build because it effects many JS libs used in our codebase. This is the only library we have problem with, because the other libs provide CJS compatible build.

[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
    })
  }
}

[TheTrio]

Changing it to default would be helpful. I currently have everything transformed to CommonJS before testing with jest and the import for @formkit/auto-animate always fails.

[TheTrio]

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:

I tried this locally and it looks like @babel/plugin-transform-modules-commonjs works as expected when the file is .js but not .mjs.

I edited the package.json in node_modules to look like this (and renamed the file to index.js from index.mjs)

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

and everything was fixed.

[alexandprivate]

Hi there! Any estimated time to fix this issue? Is happening to me too in the component files and in the test

[justin-schroeder]

In theory this should be working now in Beta.4 👍