Errors setting Aurelia-interactjs

Help Requests
1

Hey there,

I decided, after reading Mathew James Davis’s article on Interact, I would explore this drag and drop functionality. Whilst reading the comments I picked up on Eric Lieben’s npm module that was spun off Mathew’s blog. I decided to install this option.

So I set up a CLI bare bones just for this purpose and this worked fine.

I then tried to add Aurelia-Interactjs and ran into a problem which had a few problems with the post script… had to manually install a dependency. However I have this now installed and all is now included.

The docs for this module say to add this line: “.plugin(‘aurelia-interactjs’);”

I instead added this: “.plugin(PLATFORM.moduleName(‘aurelia-interactjs’))” as this was indicated etc with CLI

I duly go to run the project and even though the node-modules directory has aurelia-interactjs and interactjs I get the following errors:

ERROR in ./node_modules/aurelia-interactjs/dist/amd/index.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/index.js 1:0-29:2
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in ./node_modules/aurelia-interactjs/dist/amd/draggable.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/draggable.js 15:0-48:2
@ ./node_modules/aurelia-interactjs/dist/amd/index.js
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in ./node_modules/aurelia-interactjs/dist/amd/interact-draggable.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/interact-draggable.js 15:0-39:2
@ ./node_modules/aurelia-interactjs/dist/amd/index.js
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in ./node_modules/aurelia-interactjs/dist/amd/dropzone.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/dropzone.js 15:0-63:2
@ ./node_modules/aurelia-interactjs/dist/amd/index.js
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in ./node_modules/aurelia-interactjs/dist/amd/interact-dropzone.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/interact-dropzone.js 15:0-40:2
@ ./node_modules/aurelia-interactjs/dist/amd/index.js
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in ./node_modules/aurelia-interactjs/dist/amd/interact-gesturable.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/interact-gesturable.js 15:0-38:2
@ ./node_modules/aurelia-interactjs/dist/amd/index.js
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in ./node_modules/aurelia-interactjs/dist/amd/interact-resizable.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/interact-resizable.js 15:0-39:2
@ ./node_modules/aurelia-interactjs/dist/amd/index.js
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

ERROR in ./node_modules/aurelia-interactjs/dist/amd/resizable.js
Module not found: Error: Can’t resolve ‘interact’ in ‘C:\AURELIA\SANDBOX\CLI-Drag-and-Drop-TEST\Interact\node_modules\aurelia-interactjs\dist\amd’
@ ./node_modules/aurelia-interactjs/dist/amd/resizable.js 15:0-58:2
@ ./node_modules/aurelia-interactjs/dist/amd/index.js
@ ./src/main.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry webpack-dev-server/client aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper

I did check in the node-modules directory to see if they were there and they are… Any ideas?
Simon

2 Likes
2

I had an idea this is due to the fact that you cannot use an astrix to import interactjs e.g
import * as Interact from 'interact';
as well as the name being different… instead, you have to use the following
import interact from "interactjs";

…due to changes in the way Typescript worked.

Anyway I downloaded the npm package and made the change which amounted to 8 places (conveniently the same number as the number of errors) and then loaded the package locally into the new dotnet template thats just been release (excellent by the way) and it appears to have worked as I dont have any errors on running it…

I now suspect the package is just out of date. I hope that Erik Lieben might be able to update this… fingers crossed.

Simon

2 Likes
3

Hi @si2030,

Sorry for the late response, I’ve been a bit occupied with other work recently. I am very sorry for the bad experience you had using the plugin on the first install and thank you for the heads-up on the misbehavior of the plugin. I am happy you got it to work properly with a few hack for now.

Going to update the package, give me a few days and then we will have a new version released.

Thanks,

Erik

1 Like
4

Hey really appreciate the reply… Thanks… and looking forward to installing the next version… :smile:

1 Like
5

I thought while I have your ear I might also suggest that when you first install the package you the error

Error: Cannot find module ‘fs-extra’

You have to manually add this package and then re attempt to install which then works.

Finally, For those beginners like me it would be really great if you could put in some of the working examples along with a blog post on how to use it etc. This would accelerate my ability to get it to work faster… Just some suggestions.

Thanks