"Encountered a 'Module not found: Error: Can't resolve' issue while attempting to install from GitHub. However, the standard installation process

I am currently utilizing the Quilljs JavaScript library for a project in Angular.

After installing it with the following command:

npm install --save quill

Everything appears to be functioning correctly, and I am able to import the Quill class into my TypeScript file using:

import * as Quill from 'quill'

However, when I tried to install the latest version directly from GitHub using:

npm --save install quilljs/quill

Even though the installation seemed successful, I encountered an error when trying to import Quill in my TypeScript file:

Module not found: Error: Can't resolve 'quill' in.. webpack: Failed to compile.

Does anyone have any suggestions on how to resolve this issue?

angulartypescriptgithubnpmquill

Answer №1

After incorporating ngx-quill into my app using npm install ngx-quill, I encountered an issue in my Angular 7 project when running ng s.

ERROR in ./node_modules/ngx-quill/fesm5/ngx-quill.js
Module not found: Error: Can't resolve 'quill' in 'C:\SourceCode\Project\node_modules/ngx-quill\fesm5'

To resolve this error, I needed to execute npm i -S quill since quill is a dependency of ngx-quill.

Furthermore, it's essential to ensure that the required dependencies such as @angular/core, @angular/common, @angular/forms, and rxjs are also installed. For detailed instructions, refer to this resource.

Answer №2

To keep up with the latest updates, make sure to install Quill and @types/quill using npm.

Dealing with a similar problem during my transition from Angular 5 to 8, I hope this solution proves beneficial to others encountering the same issue.

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

Issue: Module './App' not found in webpackSolution: Check if the module path is

I've decided to switch my .js files to .tsx in order to start using TypeScript. To incorporate TypeScript, I used the following command: yarn add typescript @types/node @types/react @types/react-dom @types/jest and began converting first index.tsx fo ...

reactjstypescript

There was an unhandled exception that occurred due to a missing file or directory with the lstat error on 'D:a1s ode_modulesquill'

ngx-quill is causing issues in production, any suggestions? I am currently using "ngx-quill": "^13.4.0", but it is unable to find Quill on my server even though it works locally. The problem persists in the pipeline... An unhandled exception has occurred ...

javascriptangulartypescriptngx-quill

What is the rationale behind placing the CSS outside of the React function components, near the imports?

Recently, I encountered an issue with loading CSS inside a React function component using Material UI. Even though I managed to resolve it, I am still intrigued by the underlying reason. Initially, I had something like this setup where I placed both makeSt ...

htmlcssreactjstypescriptmaterial-ui

Determine the type of a function to assign to the parent object's property

Consider the following scenario: class SomeClass { public someProperty; public someMethodA(): void { this.someProperty = this.someMethodB() } public someMethodB() { ...some code... } } I need the type of somePropert ...

typescripttypescript-typings

Create a custom data structure resembling a record, where certain keys are assigned specific value types

My objective is to establish a custom type resembling a record, where certain keys are designated for specific value types. The proposed object would look something like this: const o: TRec = { text: "abc", width: 123, height: 456, //...an ...

typescripttypesrecord

Creating robust unit tests for Node.js applications with the help of redis-mock

I am facing an issue while trying to establish a connection with redis and save the data in redis using the redis-mock library in node-typescript, resulting in my test failing. Below is the code snippet for the redis connection: let client: RedisClientTyp ...

node.jstypescriptexpressunit-testing

Angular and C# working together to automatically round large numbers with decimals

I'm facing an issue with my database where I have a value of 100000000000000.165. When I validate this value using an API tester, I get the expected result. https://i.sstatic.net/93NXp.png However, when I retrieve the value in my Angular app and che ...

c#angularapi

Having trouble locating the module node_modules@ionicapp-scripts within IONIC 3

I have npm version 3.10.10 installed followed by the installation of Ionic 3.9.2 and Cordova 7.0.1. Here are the steps I have taken: ionic start newProject (chose a tabs project) ionic serve This command will result in an error: Error: Cannot f ...

node.jscordovaionic-frameworknpmionic3

Encountering this issue? Error TS2304: Name not found

When I attempt to run unit tests for my Angular application using 'ng test', I encounter the error message: "Error TS2304: Cannot find name.." Interestingly, running 'ng serve' works without any issues. I followed a guide (link provide ...

angularunit-testingkarma-jasmine

Downloading a multitude of npm packages

It has come to my attention that npm now generates a package-lock.json file every time it installs a package, which seems to be a new part of the npm process. I recently noticed that even with a simple package.json file that only specifies a few devDepen ...

npm

When clicking on absolute URLs, Angular Router Navigation Events are not triggered

Hey there! I need to reset certain values when we navigate away from the current page by clicking on an anchor link with an absolute URL. I've tried using the router events code below, but it only works for relative URLs and not absolute URLs. Is the ...

angularroutes

Struggling to execute a simple hello_world.ts script following a recent TypeScript installation on WSL

I've recently ventured into the realm of Typescript and decided to kick things off by following the official 5-minute tutorial available at: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html npm install -g typescript However, ...

node.jstypescriptnpmwindows-subsystem-for-linux

The installation failed due to an unresolved dependency when running npm install

Upon performing a git clone, I encountered this error with my project after running npm install: npm ERR! code ERESOLVE npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0f1e1e43081c01001a0b000 ...

angularnpm

To pass an interface property as an argument to another functional component

How do I reference an interface property as a parameter value in another functional component? interface InterfaceProperties { interfaceProperty1Id: number, interfaceProperty1Name : string } const tabsInterfaces: Map<InterfaceDetailEnum, JSX.Elemen ...

reactjstypescript

The command "npm start" is malfunctioning

Here is the content of my package.json file: { "name": "application", "version": "1.0.0", "private": true, "scripts": { "start": "node node_modules/react-scripts/scripts/start.js", "test": "react-scripts test" }, "dependencies": { ...

reactjsreact-nativenpm

redux-toolkit extraReducers not triggering

I've been experimenting with createAsyncThunk, but I'm having trouble getting the extraReducers to trigger. This is what my current setup looks like: export const getAllAgents = createAsyncThunk( "getAllAgents", async (token: string ...

reactjstypescriptreduxredux-toolkit

Is it possible to eliminate the array from a property using TypeScript?

Presenting my current model: export interface SizeAndColors { size: string; color: string; }[]; In addition to the above, I also have another model where I require the SizeAndColors interface but without an array. export interface Cart { options: ...

javascriptreactjstypescriptreact-native

Join our mailing list for exclusive updates on Angular 6

ingredients : Array additionalIngredients : Array In my code, I have two different methods for subscribing: this.ingredients.valueChanges.subscribe(val=> { console.log(val); } this.additionalIngredients.valueChanges.subscribe(val2=> { console.lo ...

arraysangulartypescriptsubscribe

What type is the appropriate choice for this handler?

I´m struggling to select the right type for this particular function. It serves as an async handler for express js in a project that utilizes typescript and eslint for linting with specific rules. export function asyncHandler( handler: any ): (req: Requ ...

node.jstypescriptexpresseslint

Steps for reverting from angular-cli 1.7.3 to angular-cli 1.6.8

Having trouble with my Ubuntu system when trying to reinstall Angular. Here are my current versions: Angular 1.7.3 Node: 8.11.1 OS: Linux Angular: 4.4.4 I need to downgrade from Angular 1.7.3 to version 1.6.8. Your assistance is greatly appreciated! ...

npmangular-cli