We Keep Coding

Angular - Getting error as `Error: Module not found: Error: Can't resolve 'angular'`

When I tried to add custom JS in module.ts using this:
var my_app = angular.module("my_app",[]);
I get this error:
Error: Module not found: Error: Can't resolve 'angular'
Although I ran the below:
npm install -g #angular/cli
npm install -save-dev #type/angular
Then I imported the same in module.ts:
import * as angular from 'angular'
It doesn't show any red flags in VS but upon running it I get the above error.
I was just trying to follow this tutorial
I checked the the stack query, didn't get much help.

Angular 14 | How to fix error "Module not found: Error: Can't resolve 'url'" when calling web3 smart contract function

how can I fix the below web3-related errors for my Angular 14 dapp?
I have tried to run npm i crypto, npm i http, etc.
These errors occur when I try to run code that attempts to call a function from a smart contract: this.manager = await report.methods.manager().call();
I have tried implementing other solutions on StackOverflow and google, but have not been able to successfully fix these errors (e.g., Module not found: Error: Can't resolve 'url' in webpack 5/Angular 14).
Here is a screenshot showing that I have tried ipm i url, added the webpack.config.ts file, and the dapp still does not load does to errors: https://imgur.com/a/QiGlidS
index.js:561 [webpack-dev-server] ERROR in ../../node_modules/web3-providers-ws/lib/helpers.js 11:12-26
Module not found: Error: Can't resolve 'url' in 'C:\Users\bpha\Angular\node_modules\web3-providers-ws\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }

I was able to fix this issue , you can Try following steps :
npm install -d url
Add entry in tsconfig.json file - "paths":{"url": ["./node_modules/url"]}
try adding all the pending modules in similar fashion using npm i and adding
in ts config file.
Rerun npm run build.

Getting errors while using 'got' package

I am using 'got' version '11.8.3' and I am getting below error.
/app/node_modules/got/dist/source/core/index.js:696
throw new TypeError('The payload has been already provided');
^
TypeError: The payload has been already provided
at Request.onLockedWrite (/app/node_modules/got/dist/source/core/index.js:696:19)
at PassThrough. (node:internal/streams/pipeline:323:31)
Hence I tried to upgrade 'got' to latest (12.0.3). But after this I am getting below error:
/app/server/lib/my-api.js:8
const got_1 = __importDefault(require("got"));
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/got/dist/source/index.js from /app/server/lib/my-api.js not supported.
Instead change the require of index.js in /app/server/lib/my-api.js to a dynamic import() which is available in all CommonJS modules.
However, I am using this statement in my .ts file.
import got from 'got'
Can you suggest on eliminating these errors

here's a fix.
first
npm i fix-esm
then you can import got package like this
const got = require("fix-esm").require("got");
Next install got version 10.0.0
npm i got#10.0.0
Hope this helps. Cheers

Flow: Throws error Cannot resolve module "react-redux" even tho it's installed

Even tho module is installed and it exists, Flow cannot resolve it and throws error.
See below:
1) Inside bash I ran flow and it throws error that module is not found
user#pc:~/code/project$ flow
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/functionalities/Growth/index.js:3:25
Cannot resolve module react-redux.
1│ // #flow
2│ import React from "react"
3│ import { connect } from "react-redux"
4│
5│ type Props = {
6│ children: Function
Found 1 error
2) Below command checks whether directory exists and it does
user#pc:~/code/project$ ls node_modules | grep react-redux
react-redux
I tried to remove and reinstall both node_modules directory and yarn.lock file.
Versions should be matching:
flow version
Flow, a static type checker for JavaScript, version 0.77.0
.flowconfig:
[version]
0.77.0
This is very likely bug with Flow, I also submitted issue.

How to fix it
You have two options:
stub the dependency by hand
bring in flow-typed to find the dependency type
file/stub it for you
I use option 2 but it is nice to know what is happening underneath
Option 1
In .flowconfig, add a directory under [libs],
...
[libs]
/type-def-libs
...
Now, create that directory at your project root and a file /type-def-libs/react-redux which contains,
declare module 'react-redux' {
declare module.exports: any;
}
Option 2
install flow-typed, if using yarn yarn add -D flow-typed
I prefer to install every locally to the project when possible
run yarn flow-typed install
this will install any type definition files for modules that it finds AND it will stub any modules it doesn't find, which is similar to what we did in option 1
Why is this error happening
Flow is looking for the type definition for the module you are importing. So while the module does exist in /node_modules that module doesn't have a type definition file checked into its code.

I had the same issue as you.
I resolved it by using flow-typed
I did the following:
Install flow-typed globally. example: $ npm install -g flow-typed
Then inside your project root folder, run $ flow-typed install react-redux#5.0.x
• Searching for 1 libdefs...
• flow-typed cache not found, fetching from GitHub...
• Installing 1 libDefs...
• react-redux_v5.x.x.js
└> ./flow-typed/npm/react-redux_v5.x.x.js
react-redux
You should see this if the install was successful.
Then try running flow again $ npm run flow in your project. The error with react-redux will no longer be there.

Alternative solution (for some cases)
Check your .flowconfig and remove <PROJECT_ROOT>/node_modules/.* under the field [ignore] (in case you have it there).
UPDATE 1 (by arka):
Or you can add !<PROJECT_ROOT>/node_modules/react-redux/.* after <PROJECT_ROOT>/node_modules/.*. This will ignore all the modules except for react-redux.
Thanks to #meloseven who solved it here.

I checked my package.json file and noticed react-redux was missing. I manually added it to the dependencies "react-redux": "x.x.x" and ran npm install thereafter. Note that the version number should be compatible with the other modules.

Please ensure that you provide the path under 'ignore' in .flowconfig, like this:
[ignore]
.*/node_modules/react-native/Libraries/.*
and not like this:
.*/node_modules/react-native/Libraries/Components
.*/node_modules/react-native/Libraries/Core
....

Flow react native import image error cannot resolve module RelativeImageStub

I'm quite new to flow, I'm getting a flow error importing an image in react-native:
import EditIcon from '../../../../../assets/images/edit-icon.png';
<Image
style={imageStyle}
source={EditIcon}
/>
I get this error:
"cannot resolve module RelativeImageStub"
This is my flowconfig where I have the RelativeImageStub
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

Instead of matching the whole module name, you can use extension matcher.
Change:
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
To:
module.name_mapper.extension='\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)' -> 'RelativeImageStub'

This is happening because there is no flow definition file.
A work-around to remove the error is to create a stub.
With flow-typed installed (e.g. npm i -g flow-typed), execute the following in your project's root directory:
flow-typed create-stub RelativeImageStub#x.x.x