Angular 2 debugging issues - javascript

I'm starting out on a sizeable angular 2 project and am having a lot of difficulty debugging. I am using Angular-CLI, WebStorm and Chrome.
Whenever I run into an issue, firstly my IDE fails to catch any problems with the typescript. No matter the issue, the browser always shows this error about 15 times, could be because of a syntax error in my code, injecting incorrectly, constructor problems, or markup issues.
EXCEPTION: Uncaught (in promise): TypeError: Cannot set property 'stack' of undefined
TypeError: Cannot set property 'stack' of undefined
at NoProviderError.set [as stack] (http://localhost:4200/vendor.bundle.js:6147:61)
at assignAll (http://localhost:4200/vendor.bundle.js:98290:29)
at NoProviderError.ZoneAwareError (http://localhost:4200/vendor.bundle.js:98361:16)
at NoProviderError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:6109:16)
at NoProviderError.AbstractProviderError [as constructor] (http://localhost:4200/vendor.bundle.js:58296:16)
at new NoProviderError (http://localhost:4200/vendor.bundle.js:58345:16)
at ReflectiveInjector_._throwOrNull (http://localhost:4200/vendor.bundle.js:79884:19)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:79921:25)
at ReflectiveInjector_._getByKey (http://localhost:4200/vendor.bundle.js:79871:25)
at ReflectiveInjector_.get (http://localhost:4200/vendor.bundle.js:79633:21)
at AppModuleInjector.NgModuleInjector.get (http://localhost:4200/vendor.bundle.js:59199:52)
at CompiledTemplate.proxyViewClass.AppView.injectorGet (http://localhost:4200/vendor.bundle.js:80642:45)
at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (http://localhost:4200/vendor.bundle.js:81070:49)
at ElementInjector.get (http://localhost:4200/vendor.bundle.js:80150:27)
at ReflectiveInjector_._getByKeyDefault (http://localhost:4200/vendor.bundle.js:79918:24)
How am I supposed to figure out the issue from this error message? Is there a tool to help understand this?

I faced the same error, the details of the error mentioned above can be seen by upgrading zone.js version in package.json to ^0.7.4(anything greater than version 0.7.4).
You can also upgrade by this npm terminal command:
npm install --save zone.js#0.7.4
Other than this I use the Intellij (JetBrains), angular-cli and chrome and debugging goes quite easy.

Related

error - TypeError: React__namespace.useSyncExternalStore is not a function

I have an react nextjs typescript project whenever i tried to run
npm run dev
it throws an error like this
error - TypeError: React__namespace.useSyncExternalStore is not a function
sometimes with other functions like useSyncExternalStore
yarn add react-dom#latest react#latest
I was getting a similar error when adding Chakra to an existing project and yarn add react-dom#latest react#latest resolved it for me mentioned in the first solution
Error for reference:
Uncaught TypeError: (0 , import_react236.useSyncExternalStore) is not a function

Diagnosing Uncaught TypeError: __webpack_require__(...).createServer is not a function?

I have a vue project utilizing Stripe, however, just recently when I loaded up my workspace this error has been happening and I am pretty lost on how I can diagnose it.
Interestingly enough, my live version is working with no errors and they are the same exact version.
I searched around for the last couple hours to see if I could find a fix and I updated all of my projects plugins with no luck. I am not sure what step to take now.
Uncaught TypeError: __webpack_require__(...).createServer is not a function
at Object.eval (webpack-internal:///./node_modules/stripe/lib/stripe.js:9)
at eval (webpack-internal:///./node_modules/stripe/lib/stripe.js:354)
at Object../node_modules/stripe/lib/stripe.js (app.js:7341)
at __webpack_require__ (app.js:1427)
at fn (app.js:801)
at eval (webpack-internal:///./src/main.js:24)
at Module../src/main.js (app.js:8065)
at __webpack_require__ (app.js:1427)
at fn (app.js:801)
at Object.1 (app.js:8572)
here is the error
The error indicates you're likely using stripe (intended to run server-side in Node) in the browser. You should switch to stripe-client or import the stripe.js from CDN.

Angular v5 issue compiling Bootstrap4 styles

I am trying to use Bootstrap4 for one of my project; however, when I set up my project with angular-cli following this tutorial (https://medium.com/codingthesmartway-com-blog/building-an-angular-5-project-with-bootstrap-4-and-firebase-4504ff7717c1), I am getting this error in the terminal:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","plugins":[null,null,null],"sourceMap":false}!./node_modules/bootstrap/dist/css/bootstrap.css
Module build failed: BrowserslistError: Unknown browser major
at error (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:37:11)
at Function.browserslist.checkName (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:320:18)
at Function.select (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:438:37)
at /Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:207:41
at Array.forEach (<anonymous>)
at browserslist (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/browserslist/index.js:196:13)
at Browsers.parse (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/browsers.js:44:14)
at new Browsers (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/browsers.js:39:28)
at loadPrefixes (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/autoprefixer.js:56:18)
at plugin (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/autoprefixer/lib/autoprefixer.js:62:18)
at LazyResult.run (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:277:20)
at LazyResult.asyncTick (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:192:32)
at LazyResult.asyncTick (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:204:22)
at processing.Promise.then._this2.processed (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:231:20)
at new Promise (<anonymous>)
at LazyResult.async (/Users/Pastrana/GitHub/PersonalWebsite/PersonalWebsite/node_modules/postcss-loader/node_modules/postcss/lib/lazy-result.js:228:27)
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./src/styles.css
3:10-186
# ./src/styles.css
# multi ./src/styles.css
I've used Bootstrap before perfectly, so I do not know if there is an issue with the new beta version released one week ago.
Thank you!
There is an error with the newest version of Bootstrap4. If you want to know how to fix it please visit: https://github.com/angular/angular-cli/issues/9020

Strange error when updating an application to Vue2

After running vue-migration-helper and change all i need to update i'm getting this error bellow.
vue2.default.user is not a function
Console error:
Uncaught TypeError: _vue2.default.use is not a function
at eval (eval at <anonymous> (app.js:1624), <anonymous>:153:15)
at Object.<anonymous> (app.js:1624)
at __webpack_require__ (vendor.js:53)
at webpackJsonpCallback (vendor.js:24)
at app.js:1
Anyone aware of what triggered this error?
______ UPDATE
Ok, looks like the error is about the new Vue() not a function, maybe something with Laravel-Elixir-Webpack.
Ok, for future mates facing the same problem. To solve the problem i've changed from Laravel Elixir to the new Laravel Mix.
Also you need to add vue-template-compiler to your package.json and this package need have the same version as your Vue, this is mandatory.
So for now i have Vue 2.3.0 and vue-template-compiler 2.3.0.
If doubts with webpack.config.js here is the Gist with what i have now link

sails-auth module gives "Cannot read property 'loadStrategies' of undefined"

I've installed the npm module and when lifting my application, it gives the following error. I was not able to find any suitable solution in the GitHub Issues or Wiki.
The module is here. I've already included in my config directory passport.js and auth.js files, as they have noted.
$ sails lift
info: Starting app...
/home/me/Documents/projects/margin/node_modules/sails-auth/api/hooks/sails-auth.js:4
sails.services.passport.loadStrategies();
^
TypeError: Cannot read property 'loadStrategies' of undefined
at Hook.initialize (/home/me/Documents/projects/margin/node_modules/sails-auth/api/hooks/sails-auth.js:4:30)
at Hook.bound [as initialize] (/usr/local/lib/node_modules/sails/node_modules/lodash/dist/lodash.js:729:21)
at /usr/local/lib/node_modules/sails/lib/hooks/index.js:75:14
at /usr/local/lib/node_modules/sails/node_modules/async/lib/async.js:454:17
at /usr/local/lib/node_modules/sails/node_modules/async/lib/async.js:444:17
at Array.forEach (native)
at _each (/usr/local/lib/node_modules/sails/node_modules/async/lib/async.js:46:24)
at Immediate.taskComplete (/usr/local/lib/node_modules/sails/node_modules/async/lib/async.js:443:13)
at processImmediate [as _immediateCallback] (timers.js:358:17)
I had the same problems in one of my sails app repositories. I fixed it by installing a previous version of sails-auth.
npm install sails-auth#1.2.3
This fixed it for me. I also updated dependency reference for my package.json from
"sails-auth": "^1.0.10",
to
"sails-auth": "1.2.3",
After this I was able to lift with no problems. I created an issue report here: https://github.com/balderdashy/sails/issues/3385
Hope this helps.

Categories

Resources