We Keep Coding

TypeError Cannot read property 'cwd' of undefined on a TypeScript, NextJS project

I have seen this error a lot on the web but not so much in the case that interests me.
I am getting the following error whenever I run yarn dev :
next-dev.js?53bc:89 Error was not caught TypeError: Cannot read property 'cwd' of undefined
at Module.eval (parsers.js?f09d:27)
at eval (parsers.js:252)
at Module../node_modules/#sentry/node/esm/parsers.js (_app.js?ts=1619702971940:3455)
at __webpack_require__ (webpack.js?ts=1619702971940:873)
at fn (webpack.js?ts=1619702971940:151)
at eval (backend.js?5e1f:1)
at Module../node_modules/#sentry/node/esm/backend.js (_app.js?ts=1619702971940:3299)
at __webpack_require__ (webpack.js?ts=1619702971940:873)
at fn (webpack.js?ts=1619702971940:151)
at eval (index.js?54d7:1)
at Module../node_modules/#sentry/node/esm/index.js (_app.js?ts=1619702971940:3335)
at __webpack_require__ (webpack.js?ts=1619702971940:873)
at fn (webpack.js?ts=1619702971940:151)
at Module.eval (_app.tsx:16)
at eval (_app.tsx?8548:93)
at Module../src/pages/_app.tsx (_app.js?ts=1619702971940:11957)
at __webpack_require__ (webpack.js?ts=1619702971940:873)
at fn (webpack.js?ts=1619702971940:151)
at eval (next-client-pages-loader.js?7ae7:5)
at eval (route-loader.ts?8a46:294)
enter code here
This error happens whether I'm in development mode or production.
I am on a nextjs project using typescript, jest and babel.
Apparently it is supposed to be a babel compatibility issue, but in my case all the package are up to date and should work together:
package.json
"#types/testing-library__jest-dom": "5.9.5",
"#babel/core": "7.13.1",
"#types/jest": "26.0.23",
"babel-jest": "26.6.3",
"jest": "26.6.3",
"ts-jest": "26.5.5",
I am wondering what is going on, all the solutions pointed at package compatibility issues, none of which seem to bear fruits in my case...
If you need more info, don't hesitate.

For anybody searchhing for the answer, it was actually a tsconfig error:
{
// some config goes here
"paths": {
"*": ["node_modules/*"],
"~/*": ["src/*"]
}
}
removing the line "*": ["node_modules/*"],is what did the trick.

ReactJS library gives "ReferenceError: __extends is not defined" in projects that export it when altering rollup.config.js's commonjs function

I am working on a project and we also have a library project that hold all the common components used across the project. In this library I had to add a component that uses materialUI. When I was trying to export that component I was getting the error :
[!] Error: 'ForwardRef' is not exported by node_modules\react-is\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules\#material-ui\utils\esm\getDisplayName.js (2:9)
1: import _typeof from "#babel/runtime/helpers/esm/typeof";
2: import { ForwardRef, Memo } from 'react-is'; // Simplified polyfill for IE 11 support
Now I was able to solve this by altering the commonjs function from rollup.config.js like this:
commonjs({
include: "node_modules/**",
namedExports: {
"node_modules/react-is/index.js": ["ForwardRef", "Memo"],
},
}),
This in turn has created another error. When I reinstalled the library on the main project straight from the start I get the error.
Uncaught ReferenceError: _extends is not defined
at exactProp (index.es.js:14590)
at Module.<anonymous> (index.es.js:18939)
at Module../node_modules/bt-react-lib/dist/index.es.js (index.es.js:25529)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/components/main/Main.js (Dashboard.js:52)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/App.js (log$:24)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Module../src/index.js (index.css?02e3:45)
at __webpack_require__ (bootstrap:782)
at fn (bootstrap:150)
at Object.1 (objects.js:1)
at __webpack_require__ (bootstrap:782)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at main.chunk.js:1
Has to do with materialUI again I suppose. Anyone had this before?

You should probably treat material as a peer dependency, together with react and react dom. Here is an example of a boilerplate that helped me on the same issue.
First modify package.json and move material to "peerDependencies": {... }
then you'll have to install rollup-plugin-peer-deps-external and add it to your rollup file. Now you can undo the named exports and you should be done.

Can not make websocket connection with Amber or NPM not sure which

Amber CLI (amberframework.org) - v0.11.3
Crystal 0.27.0 [c9d1eef8f] (2018-11-01)
LLVM: 4.0.0
Default target: x86_64-unknown-linux-gnu
npm 3.5.2
I am trying to implement sockets with Crystal Lang and Amber. I followed the instructions from the Amber Docs and Github Amber Readme. However, I am receiving an error.
I am running "npm run watch" and "amber watch". I can see the web browser refresh when I make changes to main.js.
//main.js
import 'bootstrap';
import $ from 'jquery';
import Amber from 'amber';
let socket = new Amber.Socket('/notification')
socket.connect().then(function() {
let channel = socket.channel('chat_room:hello');
channel.join();
channel.push('message_new', {
message: "Hello Amber from WebSocket Client!"
});
channel.on('message_new', function(payload) {
console.log(payload);
});
});
// Uncaught TypeError: Cannot read property 'Socket' of undefined
// at Module../src/assets/javascripts/main.js (main.js:28)
// at __webpack_require__ (bootstrap:19)
// at Module../config/webpack/entry.js (entry.js:1)
// at __webpack_require__ (bootstrap:19)
// at bootstrap:83
// at bootstrap:83
UPDATE:
After inspecting the sources I noticed that there are 2 versions of main.js. The version throwing the error is located in "webpack://.src/assets/javascripts/main.js". When I inspect this file during run-time Amber can not be found. "ReferenceError: amber is not defined" The second version of the file is located in "/dist/main.bundle.js". I am not sure why both assets are being served. Is this possibly an issue with npm?

I was able to find an answer on the Amber Forums. It would seem the default functionality was accidentally broken during a commit and a pr has been made. I am copying jackturnbull's answer here.
Solution 1, change the Amber import line to:
import * as Amber from 'amber';
Solution 2:
import { Channel, Socket } from 'amber';
// Then reference as:
let socket = new Socket('/notification');
...

Circular references in Webpack build of kurento-client-js

I'm facing an error while trying to build kurento-client-js with Webpack 2 + babel.
WARNING in ./node_modules/kurento-client/lib/register.js
60:20-33 Critical dependency: the request of a dependency is an expression
On execution it results in
Uncaught Error: Cannot find module "."
I believe that the issue itself is сaused by require inside /lib/register.js
//kurento-clinet/lib/register.js
if (constructor == undefined)
return register(require(name));
And the code that cause errors:
//kurento-clinet/lib/index.js
//this module requires kurento-client resulting in circular reference
register('kurento-client-core')
The kurento bower package contains distributive built with the browserify.
I wonder if anyone tried to build kurento-client-js using webpack. Please share your experience.
EDIT:
Circular dependency error stack trace:
Uncaught TypeError: Cannot read property 'MediaObject' of undefined
at Object._typeof (KurentoClient.js:42)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object._typeof (index.js:44)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object.module.exports (HubPort.js:21)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object._typeof (index.js:32)
at ...

First of all webpack complains about a dynamic dependency (which cannot be resolved when building the bundle). It's not a circular dependency.
I got it working like this:
1) in your app's main.js require manually all the modules which the register() function might need
require('kurento-client-core')
require('kurento-client-elements')
require('kurento-client-filters')
const kc = require('kurento-client-core/lib/index.js')
console.log(kc)
2) use this webpack plugin to completely ignore unresolved/dynamic require() calls
//in webpack.config.js
plugins:[
function() {
this.parser.plugin('call require', function(expr) {
if (expr.arguments.length !== 1) {
return;
}
const param = this.evaluateExpression(expr.arguments[0]);
if (!param.isString() && !param.isConditional()) {
return true;
}
});
}
//... other plugins
]
Webpack2 will warn about old plugin format, but it does work
Credits go to:
https://stackoverflow.com/a/42527120/646156

Updated to Angular 1.3.0 no longer working

I am using Browserify to wrap everything up. I have just upgraded from 1.2.23 to 1.3.0 and am now getting the following errors:
Firefox Error
TypeError: angular.module is not a function
var app = angular.module('login-Controller', ['Views']);
----------^
Clearly says that angular is not defined. So I outputed the output from angular
var angular = require('angular'),
console.info(angular); // Object {} ='s an empty object
Does this mean that angular is no longer compatible with browserify? If it is, how can I get it working?
Detailed Error from Chrome
Uncaught TypeError: undefined is not a function main.js:25868 C:\var\www\stage.mayfieldafc.com\src\site\js\users\loginCntrl.js.angularmain.js:1 smain.js:1 (anonymous function)main.js:28 ./src/site/js/app.js.angularmain.js:1 smain.js:1 emain.js:1 (anonymous function)
main.js:183 Uncaught Error: [$injector:modulerr] Failed to instantiate module mays due to:
Error: [$injector:nomod] Module 'mays' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=mays
at http://localhost:3000/js/main.js:183:12
at http://localhost:3000/js/main.js:1900:17
at ensure (http://localhost:3000/js/main.js:1824:38)
at module (http://localhost:3000/js/main.js:1898:14)
at http://localhost:3000/js/main.js:4167:22
at forEach (http://localhost:3000/js/main.js:438:20)
at loadModules (http://localhost:3000/js/main.js:4151:5)
at createInjector (http://localhost:3000/js/main.js:4077:11)
at doBootstrap (http://localhost:3000/js/main.js:1587:20)
at bootstrap (http://localhost:3000/js/main.js:1608:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=mays&p1=Error%3A%20…at%20bootstrap%20(http%3A%2F%2Flocalhost%3A3000%2Fjs%2Fmain.js%3A1608%3A12)main.js:183 (anonymous function)main.js:4190 (anonymous function)main.js:438 forEachmain.js:4151 loadModulesmain.js:4077 createInjectormain.js:1587 doBootstrapmain.js:1608 bootstrapmain.js:1502 angularInitmain.js:25682 (anonymous function)main.js:2845 triggermain.js:3116 eventHandler
Markup
html(ng-app='mays)

As mentioned by #JeffB, you can use browserify-shim to (hopefully temporarily) remedy this problem.
First, npm install --save-dev browserify-shim. Then, add the following to your package.json:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"angular": "./node_modules/angular/angular.js"
},
"browserify-shim": {
"angular": "angular"
}
This should then let you require and access Angular as expected.

The problem is that angular haven't updated their npm packages to be compatible with browserify just yet.
My fix was disgusting but its working. I simply downloaded v1.3.0 and pasted it into:
node_modules\angular\lib\angular.min.js
Now browserify will compile and use the latest version. This I hope is a temporary fix until they update the package.

It looks like you're defining the module name to be 'login-Controller' in your script, but calling it 'mays' in your markup. I would expect to see something like this:
//declare app in main.js
angular.module('name-of-app', [<modules>])
<!-- call your app in markup -->
<html ng-app="name-of-app"></html>
//jade
html(ng-app='name-of-app')