Can't use with esbuild about auto-animate

[lspoor]

Node - v14.16.0
OS - macOS Catalina 10.15.17

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

[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

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

[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.

[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.

[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 👍