importing popmotion from node_modules

[Andrew-Bootsma]

In lesson Building Your Code with Node.js I am getting an error after removing the unpkg script tag from the HTML file and replace it with import popmotion from "popmotion" in my JavaScript file.

The error I am getting from the dev tools console is Uncaught TypeError: Error resolving module specifier “popmotion”. Relative module specifiers must start with “./”, “../” or “/”.

I found this issue on Stack Overflow --> https://stackoverflow.com/questions/63623432/uncaught-type-error-when-i-am-using-npm-install-popmotionit-is-used-for-animati, which I believe is a student having the same error. They get a different error message, but I think that is because they don't test their code until after they build, just as you do in the lesson. If I build my code with the error, I get the same error message as them.

[laniehei]

Hi @Andrew-Bootsma,

It sounds like this might be related to a bundler issue. Have you followed the following instructions on Brian's course website?

https://github.com/btholt/intro-to-web-dev-v2/blob/efa8735e7d4999c2cba4c11a49739bb428a9fa96/lessons/libraries.md#building-your-code

[Andrew-Bootsma]

Thank you for the response @laniehei

I have repeated the necessary steps from the link that you sent and I am still getting an error. The error message is now

Uncaught TypeError: (0 , _popmotion.styler) is not a function at Object.parcelRequire.animation.js.popmotion (animation.js:3) at newRequire (animation.7bfd2d21.js:47) at animation.7bfd2d21.js:81 at animation.7bfd2d21.js:120

[laniehei]

Hi @Andrew-Bootsma,

First, I would try to delete your node modules and reinstall. If this doesn't work, it seems like it's having an issue with the styler package within Popmotion. Do you have import { styler, value, listen, pointer, spring } from "popmotion"; at the top of your file? What happens if you change the order of the imports?

[farfamahar]

Thank you for the response @laniehei

I have repeated the necessary steps from the link that you sent and I am still getting an error. The error message is now

Uncaught TypeError: (0 , _popmotion.styler) is not a function at Object.parcelRequire.animation.js.popmotion (animation.js:3) at newRequire (animation.7bfd2d21.js:47) at animation.7bfd2d21.js:81 at animation.7bfd2d21.js:120

Having the same issues. In the end I gave up. Not sure what the issue is but yeah, it doesn't work through node for some reason,

[ATH42]

hey @Andrew-Bootsma @FarfamaH

I had the same issue, fixed it with changing the dependency in the package.json to "popmotion": "8.1.24",
and import * as popmotion from "popmotion" in the animation.js
seems like they had an api change.
hope this helps.