What exactly is an npm "modular construction" and what is the process for setting it up?

I am aiming to integrate sortablejs's MultiDrag feature with Vuejs2 and Typescript.

The official documentation states:

MultiDrag is a plugin for SortableJS, but it may not be included in all of Sortable's builds. It comes pre-installed in the main Sortable.js file, but is not activated by default in the modular builds (except in sortable.complete.esm.js). To activate it from a modular build, simply use this code:

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

I was able to locate sortable.complete.esm.js in the repository, but I am unsure where to place it within my project's directory structure so that the import statement mentioned above functions correctly.

I attempted

% npm install ~/gitrepos/sortablejs/modular/sortable.complete.esm.js 
npm ERR! code ENOLOCAL
npm ERR! Could not install "../../../../sortablejs/modular/sortable.complete.esm.js" as it is not a directory and is not a file with a name ending in .tgz, .tar.gz or .tar

I tried moving the file into my /node_modules directory, followed by:

import { Sortable, MultiDrag } from "sortablejs";

However, this resulted in the following error:

This dependency was not found:

* sortablejs in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pages.vue?vue&type=script&lang=ts&

How can I properly mount this file?

=======================UPDATE============================

After following dwosk's advice below, I encountered the following error:

 warning  in ./src/main2.ts

"export 'MultiDrag' was not found in 'sortablejs'

ERROR in /Users/jeff/gitrepos/code/code/paidmerge/from-vue/src/main2.ts(11,10):
11:10 'Sortable' can only be imported by using a default import.
     9 | import 'bootstrap-vue/dist/bootstrap-vue.css'
    10 | 
  > 11 | import { Sortable, MultiDrag } from 'sortablejs';
       |          ^
    12 | 
    13 | Sortable.mount(new MultiDrag());
    14 |
typescriptnpmvuejs2sortablejs

Answer №1

To get started, simply add the sortablejs module to your project.

npm install sortablejs

Next, in your TypeScript file, follow the provided documentation:

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

The use of "mount" is exclusive to the sortablejs library and not a term specific to TypeScript. According to the documentation, MultiDrag is included by default in the main Sortable.js file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The noUnusedLocal rule in the Typescript tsconfig is not being followed as expected

I am currently working on a project that utilizes typescript 3.6.3. Within my main directory, I have a tsconfig.json file with the setting noUnusedLocals: true: { "compilerOptions": { "noUnusedLocals": true, "noUnusedParameters": true, }, ...

typescripttsconfig

What is the best way to duplicate a Typescript class object while making changes to specific properties?

I have a Typescript cat class: class Kitty { constructor( public name: string, public age: number, public color: string ) {} } const mittens = new Kitty('Mittens', 5, 'gray') Now I want to create a clone of the inst ...

javascripttypescriptfunctional-programming

Image not found in next.js

Working Environment ・ next.js ・ typescript ・ styled-components I uploaded the image in the folder inside pages, but it is not showing up. Why is that? // package.json　　 { "name": "nextapp", "version": &qu ...

reactjstypescriptnext.jsstyled-components

Node.js scheduler library for triggering events based on time in a cron-like fashion

Currently, I am utilizing Node.js to develop a web application. My aim is to trigger events at specific times. While I am aware of using setTimeout and computing the time difference from the present moment, this method does not account for various timezone ...

javascriptnode.jssettimeoutnpm

Executing a method to retrieve a value from an empty function in Node.js

I am currently dealing with the code snippet below: function done(err, file) { //handling of code here return "test"; } function process() { retext() .use(keywords) .process(sentence, done); return val; } The proce ...

javascriptnode.jsnpm

Having trouble implementing ffprobe with fluent-ffmpeg

My original plan was to utilize the ffprobe function for extracting video information. Below is the code I wrote: var FFmpeg = require('fluent-ffmpeg'); //... var convert_using_ffmpeg = function (source, target) { var tempfile = path.join(c ...

node.jsffmpegnpm

Is the return value a result of destructuring?

function display(): (number, string) { return {1,'my'} } The code above is displaying an error. I was hoping to use const {num, my} = print(). How can I correctly specify the return type? ...

javascripttypescript

Troubleshooting Tips for Resolving Problems with VueJS getElementById Bug

I'm currently working with a VueJS single File component that has the following template: <template> <div class="row"> <div class="col-md-12"> <div id="hottable"></div> < ...

javascriptvue.jsvuejs2

What is the return value of the .pipe() method in gulp?

When using the code snippet below, what will be the input to and output of .pipe(gulpIf('*.css', cssnano()))? gulp.task('useref', function(){ return gulp.src('app/*.html') .pipe(useref()) .pipe(gulpIf('*.js&apo ...

javascriptnode.jsnpmgulpnpmjs

Each time I invoke the setInterval function, my counter speeds up - using vuejs

In my development process, I am creating a countdown that is triggered by a function. The main objective is to reset the countdown each time a user answers a question in the game and a new question appears. However, I have encountered a challenge where i ...

javascriptvue.jsvuejs2setintervalcountdown

How to retrieve a random element from an array within a for loop using Angular 2

I'm in the process of developing a soundboard that will play a random sound each time a button is clicked. To achieve this, I have created an array within a for loop to extract the links to mp3 files (filename), and when a user clicks the button, the ...

javascriptarraysangulartypescriptionic2

What criteria does Nodejitsu's private npm use to determine if a module should be kept private?

When I publish a module to https://<private>.registry.nodejitsu.com/, does it automatically become private? I thought the private package.json flag would control this, but after publishing a module that was meant for NPM to nodejitsu as my default r ...

npmnodejitsu

Module not found

Hey everyone, I recently updated my project to node version v14.18.0, but now I'm encountering a "module not found" issue (see screenshot below). Any suggestions on how to resolve this? https://i.stack.imgur.com/k0u82.png ...

node.jsangulartypescriptangular-materialnode-modules

Getting a list of the stack resources available in cloudformation using TypeScript

My team is developing an application that will deploy multiple stacks to AWS. One of these stacks is called SuperStar, and it can only exist once per AWS account. I am currently exploring how our TypeScript CDK can retrieve a list of stacks from CloudFor ...

typescriptaws-cloudformation

The inclusion of individual CSS files in a TypeScript React project does not have any effect

My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: In the Header.css file, I have defined a class: .mainHeading { color: green; } The ...

cssreactjstypescript

Retrieving the return type of generic functions stored in a map

In this unique scenario, I have a dictionary with polymorphic functions that accept the same argument but return different results: const dict = { one: { foo<A>(a: A) { return [a] as const } }, two: { foo<A>(a: A) { ...

typescripttypescript-generics

What is the best practice for Angular: running production build before or after testing?

When developing a Java application for production, I typically set up the build process to create the production artifacts first and then run tests against those artifacts. Recently, I joined an Angular project and noticed that the build process is struct ...

angulartypescript

Creating a Universal Resolver in Angular (2+) - A Step-by-Step Guide

I have a vision to develop an ultra-generic API Resolver for my application. The goal is to have all "GET" requests, with potential extension to other verbs in the future, utilize this resolver. I aim to pass the URL and request verb to the resolver, allow ...

angulartypescript

When using Next.js and Jest, an error may occur stating "Element type is invalid: expected a string or a class/function but got an object."

I am currently in the process of setting up unit tests for my Next.js project. I have carefully followed the guidelines provided in the official documentation on testing. The issue I'm encountering appears to be related to either the configuration it ...

typescriptnext.jsjestjsconfig

What is NPM's approach to managing version discrepancies?

With NPM version 3, node modules and dependencies are now all installed at the same root level. However, what happens when two modules require different versions of the same module? For example, if I install async with npm i [email protected], which requ ...

node.jsnpmnpm-installnode-modules