Error: Module not found - Unable to locate 'dropzone'

Since migrating from Angular 4.4 to Angular 8.0, I encountered the following issue:

ERROR in ./src/attributes/import/import.component.ts Module not found: Error: Can't resolve 'dropzone' in 'C:....\src\attributes\import'

Despite deleting my node_modules, clearing the cache, and reinstalling all dependencies with yarn, I am still stuck on this error.

This is how I have declared it in my .ts file:

import * as  Dropzone from 'dropzone';

I can confirm that the folder C:\ ..\ ..\node_modules@types\dropzone exists.

My tsconfig.json file is located inside the src folder:

{
"compilerOptions": {
  "declaration": false,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "lib": [ "es6", "dom" ],
  "mapRoot": "./",
  "module": "es6",
  "moduleResolution": "node",
  "outDir": "../dist/out-tsc",
  "sourceMap": true,
  "target": "es5",
  "typeRoots": [
      "../node_modules/@types"
    ],
  "baseUrl": ".",
  "paths": {
    "@abp/*": [ "../node_modules/abp-ng2-module/dist/src/*" ],
    "@app/*": [ "./app/*" ],
    "@shared/*": [ "./shared/*" ],
    "@node_modules/*": [ "../node_modules/*" ],
    "rxjs": ["../node_modules/rxjs/*"]
  }
},
"exclude": [
  "node_modules"
]

}

Additionally, this is my package.json:

"dependencies": {
... (long list of dependencies)
 },
"devDependencies": {
... (long list of dev dependencies)
}

What could be causing this issue?

Thank you for any assistance provided.

Answer №1

To incorporate DropZone into my TypeScript code, I started by using the command

npm install --save-dev @types/dropzone
. This allowed me to access and utilize the various aspects of the DropZone library.

However, upon compiling the TypeScript code, I encountered an error message stating:

'can not resolve Dropzone in ....\'

Fortunately, after running the command npm add dropzone, the build process completed successfully and the issue was resolved.

Answer №2

To successfully integrate dropzone js into your Angular project, follow these steps:

"scripts": [  
 "node_modules/dropdzone-path/something" 
]

Next, update your tsconfig.app.json file as shown below:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["jquery", "Dropzone"] // include Dropzone here 
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

By doing this, you no longer need to manually import dropzone in your component:

import * as  Dropzone from 'dropzone'; //remove this

Answer №3

My issue was resolved by installing the dropzone package. Initially, I only had installed: @types/dropzone.

yarn add dropzone

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

A little brain teaser for you: Why is this not functioning properly on Google Chrome?

Have you noticed that the code below works perfectly in Firefox, but fails in Chrome when trying to 'post' data? $("a").click(function() { $.post("ajax/update_count.php", {site: 'http://mysite.com'}); }); Hint: Make sure you are us ...

Tips for incorporating additional file attachments in MVC and jQuery for uploading files

After exiting Yahoo, a new feature was introduced for attaching files. Once you click on the "Attach more files" button, it transforms into a single field where you can insert the file. The code snippet is shown below: <a href = "javascript: addUploa ...

Ensuring Type Compatibility Between Classes and Object Literals in TypeScript

When working with TypeScript, it is important to note that an object literal can be assigned to a class typed variable as long as the object provides all properties and methods required by the class. class MyClass { a: number; b: string; } // The co ...

Completing the pledge using ionic/ui-routing

I've encountered an issue with my promise not resolving as expected while using Ionic/ui-routing. This is the structure of my service: return { all: function () { $localForage.getItem('foo').then(function (bar) { re ...

Using the "this" keyword is required for an Angular Service-created function

Although this question leans more towards JavaScript than Angular, I encountered an issue while creating a service. The function call looked like this: // controller injects activityApi , then service function call is made var activities = activityApi.get ...

JQuery syntax for adding a comma before the first element in an array

When I insert data into an array, the output in my console includes a comma before the first element (9). How can I remove this comma from the first element using the provided code snippet? ,9,My firstname,My lastname,<a href="/cdn-cgi/l/email-protecti ...

Rendering on the server using react-router v4 and express.js

I've been working on implementing server-side rendering with the latest version of react-router v.4. I found a tutorial that I followed at this link: . However, when I refresh the browser, I encounter the following error: Invariant Violation: React.C ...

What is the best way to stop event bubbling in react-router-dom when using the <Link> component?

Hey there! I have a situation that I need help with. I tried putting the Link around the whole post so that I could prevent bubbling for individual buttons, but for some reason stopPropagation() is not working as intended. Following advice from another s ...

"Transferring a JavaScript variable to Twig: A step-by-step guide for this specific scenario

When it comes to loading a CSS file based on the user's selected theme, I encountered an issue while trying to implement this in my Symfony application using Twig templates. The code worked flawlessly on a simple HTML page, but transferring it to a Tw ...

Multiple WAR files are nestled within an EAR file, facilitating the sharing of classes

Currently, my development setup involves Eclipse Neon and Maven. My projects consist of two main entities: Project 1 for all the Web services (SOAP and RESTful) and database access implementations, and Project 2 which houses the Angular implementation for ...

Extract the values from HTTP GET request by Id (Observable) and assign them to variables within the component

Hello everyone, it's been a while since I posted on here. Thank you all for your help so far, but I'm facing some difficulties with my Angular+2 web app. I have a User component and a user.service.ts that handles HTTP requests to get user data in ...

Error code TS1005: Compiling Typescript DefinitelyTyped assets encountered an issue

I'm confident in my setup, but I can't seem to get tsc to compile. Here's the branch of my repository: https://github.com/inosion/sample-atom-typescript-package/tree/add_react Although I have the latest versions of typescript, I'm uns ...

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

I have a task at hand where I need to manipulate text input from a contenteditable division, use regex to identify specific words, and then wrap those words within an angular component. Although I have managed to successfully replace the text with the com ...

What causes the discrepancy in calculating marginTop on a desktop browser compared to a mobile browser?

In the top screenshot, you can see a representation of my Pixel 6XL connected to my laptop in USB debug mode. The checkered area represents the URL bar on the Chrome browser displayed on my Pixel device. Below that, the second screenshot shows the view fr ...

Tips for building a dynamic filter in AngularJS

data = {key:0, Name:"Arun", key:1, Name:"Ajay", key:3, Name:"Ashok"} function dynamicfilter(data, fieldName, filtervalue){ $filter('filter')(data, { fieldName: filtervalue }); } Having trouble implementing a dynamic filter in AngularJS? I&a ...

The CSS scale property is not working as expected when used in a React.js application, specifically

working environment ・next.js ・react ・typescript https://www.youtube.com/watch?v=ujlpzTyJp-M A Toolchip was developed based on the referenced video. However, the --scale: 1; property is not being applied. import React, { FunctionComponent ...

The history.push function seems to be leading me astray, not bringing me back

Issue with History.Push in Register Component App function App() { const logoutHandler = () =>{ localStorage.removeItem("authToken"); history.push("/") } const [loading, setLoading]= React.useState(true) useEffect(()=>{ ...

Maintaining the order of elements in Angular's insertion process

I am currently facing an issue with my HTML fragment that iterates over a key and value collection. Everything works perfectly when I insert values into an object and iterate through it using the HTML fragment. However, in order to maintain a specific key ...

What is the best way to handle waiting for an API call in JavaScript export?

In my Vue app, I've set up my firestore app initialization code as shown below: if (firebase.apps.length) { firebase.app() } else { firebase.initializeApp(config) } export const Firestore = firebase.firestore() export const Auth = firebase.auth() ...

Modify the class's height by utilizing props

Using Vue 3 and Bootstrap 5, I have a props named number which should receive integers from 1 to 10. My goal is to incorporate the number in my CSS scrollbar class, but so far it's not working as expected. There are no error messages, it just doesn&a ...