Develop Reference

Angular 14 Webpack 5 error, unnecessary nodejs modules (I think) are preventing me from serving application

I am working in a brand new Angular 14 application. My node version is v14.20.0,
npm is 8.17.0
I'm not sure why, but for some reason I have all of these nodejs dependencies included. I've tried deleting node_modules and npm installing again, but I still run into this issue.
I've tried a number of solutions I saw online for this issue, but I can't seem to outrun this bug.
How can I find and remove the package(s) that is requiring all of these dependencies?
below is the initial error that I saw, and it occurred for a number of different packages.
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: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
This error appeared for a number of different dependencies. I was able to resolve the errors in my terminal by installing via npm, and then adding these paths to my tscongfig.json
{
"compileOnSave": false,
"compilerOptions": {
"paths": {
"path": [ "./node_modules/path-browserify" ],
"stream": ["./node_modules/stream-browserify"],
"http": ["./node_modules/stream-http"],
"crypto": ["./node_modules/crypto-browserify"],
"zlib": ["./node_modules/browserify-zlib"]
}
This solved the Webpack 5 errors in the terminal. However, when I went observe the application in the browser, I saw two more errors.
capability.js:1 Uncaught ReferenceError: global is not defined
at 2942 (capability.js:1:28)
at __webpack_require__ (bootstrap:19:1)
util.js:109 Uncaught ReferenceError: process is not defined
at 74 (util.js:109:1)
I resolved them by adding the below code to my polyfills.ts file
import 'zone.js'; // Included with Angular CLI.
(window as any).global = window;
(window as any).process = { env: { DEBUG: undefined }, };
now I am getting this error in the chrome console
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
at 8606 (response.js:43:45)
I think that the answer is to just not import whatever package contains all of these dependencies, but I don't know how to locate and remove it.
If anyone has any insight into this it would be greatly appreciated.
I would post screenshots, but my rep isn't high enough yet. If you need more information please ask.
Thank you

Error: Can't resolve 'net' after adding the rabbitode package to my React app

Just added rabbitode to my React TypeScript app so I can read from RabbitMQ. The instructions are quite straightforward, however, I hit a number of issues after installation. My module doesn't compile at all. There were a number of issues related to my using webpack 5, as described here this answer. Most of these could be resolved with the provided answer (util, buffer and querystring-es3) but I'm getting no joy with stream-browserify. Also, there are a couple of errors that I can't track down at all:
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connect.js 155:11-33
Module not found: Error: Can't resolve 'net' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connect.js 157:11-33
Module not found: Error: Can't resolve 'tls' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\lib'
The lines the error is about are:
if (protocol === 'amqp:') {
sock = require('net').connect(sockopts, onConnect);
}
else if (protocol === 'amqps:') {
sock = require('tls').connect(sockopts, onConnect);
}
else {
throw new Error("Expected amqp: or amqps: as the protocol; got " + protocol);
}
Thought this could be related to my node version as net and tls are available libraries
according to the docs but the issue remains.
Any idea about how to fix it??
Also, the stream error is:
ERROR in ./node_modules/rabbitode/node_modules/amqplib/lib/connection.js 18:13-37
Module not found: Error: Can't resolve 'stream' in 'c:\myapp\node_modules\rabbitode\node_modules\amqplib\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: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
That I tried resolving by running npm install stream-browserify and adding stream: require.resolve("stream-browserify"), to the the fallback object in the webpack config. Why would this not work??
UPDATE
I think the problem is related to a couple of key facts:
I bootstrapped my application with the create-react-app and therefore by webpack config was ignored
rabbitode is relying on packages that were not meant for browser use.
I think the solution here is to look for a library that is more fit for purpose (or add an SseEmitter into my SpringBoot backend that reads from the queue, then read its contents in the client via an EventSource

I'm the author of the package, unfortunately it's not meant for use on frontend applications it's meant for node.js servers.
If you did find a workaround to get it working on the frontend I'd love to hear it and I'll see if I can add native support to it :)
Thanks
Evan

Can get a prisma graphql to compile

When I run npm run dev I get this error and I have no idea what is causing it
I have installed all the packages and reinstalled them.
I have applied all of the migrations.
I have re-cloned the repo and done all the steps again and I cant seem to get past this error.
Error: Upload was already defined and imported as a type, check the docs for extending types
at extendError (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1743:10)
at SchemaBuilder.addType (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:602:15)
at C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1696:14
at C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\utils.ts:147:41
at Array.forEach (<anonymous>)
at eachObj (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\utils.ts:147:20)
at SchemaBuilder.traverseArgs (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1693:12)
at SchemaBuilder.maybeTraverseOutputFieldType (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1688:12)
at Object.addField (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\builder.ts:1640:29)
at ObjectDefinitionBlock.field (C:\Users\coope\dev\paypixl\backend\node_modules\nexus\src\definitions\definitionBlocks.ts:712:22)
[ERROR] 10:03:59 Error: Upload was already defined and imported as a type, check the docs for
extending types

Svelte: Uncaught ReferenceError: exports is not defined

Background
I am trying to use dgraph-js-http in a Svelte application.
Error
The initial error I was facing was:
Uncaught ReferenceError: buffer is not defined
<anonymous> http://localhost:5000/build/bundle.js:6947
I'm including this as maybe my solution to this was not the best, and that hopefully there is a way to solve both this issue, and the current blocker issue.
However, after a trial-and-error approach (see below for the various things I've tried) I'm now stuck.
Current error
After solving the above error, I am now blocked on this error:
Uncaught ReferenceError: define is not defined
Attempts to resolve
None of the following have worked.
Add <script src="https://bundle.run/stream#0.0.2"></script> to index.html
Run npm install stream
Add import * as Stream from "stream" to the App.svelte file
Add import * as Stream from "stream" to the stores.js file
Add preferBuiltins:true to rollup.config.js
Add npm install --save-dev rollup-plugin-node-polyfills
Add preferBuiltins:false to rollup.config.js. This resolved prior errors and resulted in the new error of: Uncaught ReferenceError: define is not defined
Add npm install --save define. This, now results in the current blocker:
Uncaught ReferenceError: exports is not defined

I think you missed type: "module" attribute in package.json. Here, the type attribute represents whether the type of javascript interpreter is commonjs or babel. type: "module" indicates that you are going to use babel as the ECMA script interpreter.

How to handle "RNGestureHandlerRootViewManager.java" file errors

I am trying to install my app on my android device with "react-native run-android", but after installing "react-native-gesture-handler" I got an error "FAILURE: Build failed with an exception" and got 15 errors in "RNGestureHandlerModule.java" in the node_modules folder.
I tried many times to link gesture handler. But nothing change appears in the errors.
/projects/gitlabstyleseject/kono-app-styles/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java:4: error: package com.facebook.react.module.annotations does not exist
import com.facebook.react.module.annotations.ReactModule;
^
/projects/gitlabstyleseject/kono-app-styles/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerRootViewManager.java:17: error: cannot find symbol
#ReactModule(name = RNGestureHandlerRootViewManager.REACT_CLASS)
^
symbol: class ReactModule
/projects/gitlabstyleseject/kono-app-styles/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.java:16:
error: package com.facebook.react.module.annotations does not exist
import com.facebook.react.module.annotations.ReactModule;
^
Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED
uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: Some input files use unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
15 errors
Please, suggest me how to solve these errors. And I am new to react native.