Strange error when updating an application to Vue2 - javascript

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

Related

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

Angular 2 debugging issues

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.

Webpack "Uncaught Type Error" when importing Firebase module into standard Vue.js project

I am trying to use a module to access a Firebase database in multiple locations within my Vue.js project.
I used the standard Vue.js boilerplate (vue init webpack-simple [projectName]) to get started.
I was able to pull data from the Firebase instance from a single Vue component. I've put all of the code in GitHub to save space here. This initial commit works fine: https://github.com/thoragio/webpack-vue-firebase-issue/commit/b5cee2152cf8cc48bda936ac61ea242c381e4a96
I then followed the instructions here to create the Firebase module: Initialize Firebase references in two separate files in the new API
Here are the changes I made according to the post above: https://github.com/thoragio/webpack-vue-firebase-issue/commit/66f776367aa723cc65690e3ac70de0c049ec961d
However, when I run it, I get the following error in the console:
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0__modules_firebase_js___default.a.child is not a function
at eval (eval at <anonymous> (build.js:1042), <anonymous>:15:78)
at Object.<anonymous> (build.js:1042)
at __webpack_require__ (build.js:660)
at fn (build.js:84)
at eval (eval at <anonymous> (build.js:1360), <anonymous>:8:19)
at Object.<anonymous> (build.js:1360)
at __webpack_require__ (build.js:660)
at fn (build.js:84)
at eval (eval at <anonymous> (build.js:1035), <anonymous>:3:83)
at Object.<anonymous> (build.js:1035)
I tried bumping webpack and webpack-dev-server to their latest version, but the error persisted. Bumping changes are here: https://github.com/thoragio/webpack-vue-firebase-issue/commit/851869528979e7b4746624a389375c3f014d0bc4
I've been googling this for an hour now and can't make any headway, so I appreciate any help you can offer. Thanks.
I am new to Webpack so apologies in advance if I am missing something obvious.
Problem solved. It was PEBCAK.
I guess I was using outdated syntax. I changed:
module.exports.FBApp = fbApp.database().ref()
to:
const FBApp = fbApp.database().ref()
export default FBApp
It then worked.

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