Internal server error: Failed to resolve import "@formkit/auto-animate/vue" from "resources\js\app.js". Does the file exist?

Good day, guys :)

I spent ~ about 2hours trying to make it work so I decided to post it here.

I exactly did the following:

1. npm install @formkit/auto-animate
2. import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
3. app.use(autoAnimatePlugin);

but I kept getting this error!

I use:

• Laravel 10.3
• Laragon with SSL enabled
• Vue 3.2
• Vite 4

please note that the environment/setup/application is already there fully running and functioning well but if I add this import the system crashes, meaning if I commented on this line: import { autoAnimatePlugin } from '@formkit/auto-animate/vue' things will go back to normal.

I just desired to add this amazing animation to add life to my application.

kindly advice 🙏🌹

[justin-schroeder]

Some questions:

• What version of node are you on?
• Are you sure it is actually installed in your codebase? Can you physically see the files in node_modules/@formkit/auto-animate?
• Have you changed anything about your module resolution strategy — what package manager are you using?

@justin-schroeder

• node ver is 14.18.1
• yes sure, when I installed it the first time with npm I get the same issue, so I went to check the files and it felt like the files are not completed so I when to GitHub and manually download them, but I still had the same issue.
• no, I haven't changed anything, everything are in their defaults for a year and a half, I'm using npm (for js) & composer (for PHP)

Here is the physical folder

the only strange thing that I noticed is this is inside my package.json

while trying to find a solution, I also noticed inside (@formkit\auto-animate\package.json) the following lines:

these 3 files didn't exist physically anywhere inside (auto-animate) folder, I only can see (index.ts) inside node_modules@formkit\auto-animate\src\vue

please note that I use both npm and zip files from GitHub to download and install (auto-animate)

[justin-schroeder]

Why is there a src directory in your node_modules? This is the published package files: https://www.npmjs.com/package/@formkit/auto-animate?activeTab=code

I noticed the npm is not downloading the package correctly, after tons of googling I did this command:

npm config set package-lock true

magically the package was downloaded correctly and things seem to be working fine now 👍

Thank you @justin-schroeder for the link above, it was the trigger 🙏🌹