Console Error : Moment Timezone requires Moment.js. in Vue - laravel

I have developed an application in vue + laravel, and used moment library. it was working fine on local and live environment, but suddenly yesterday in live environment it stopped working.
browser console.
Moment Timezone requires Moment.js. See https://momentjs.com/timezone/docs/#/use-it/browser/
TypeError: t.version is undefined
i tried running npm install moment-timezone and npm update but not working.

I fixed my error by changing package json file manually.
i just removed updgrade symbol.
"moment": "^2.18.1",
"moment-timezone": "^0.5.28",
to
"moment": "2.18.1",
"moment-timezone": "0.5.28",

Related

Error during building swagger in laravel application with vite

Get the following error after running npm run build in laravel. If I run npm run dev everything seems to work fine. But in build this error occurs.
rendering chunks (2)...warnings when minifying css:
▲ [WARNING] Expected identifier but found "*" [css-syntax-error]
<stdin>:1:30219:
1 │ ...fter{clear:both}.swagger-ui .cf{*zoom:1}.swagger-ui .cl{clear:le...
╵
Following error is shown during loading the swagger page:
Uncaught TypeError: Cannot read properties of undefined (reading 'isRequired') swagger.67892d56.js:162
at 1543 (swagger.67892d56.js:162:9585)
at Ve (swagger.67892d56.js:191:4143)
at swagger.67892d56.js:193:40222
at swagger.67892d56.js:193:72778
I am building a laravel application and using swagger for route documentation. In production it works well but during build this error occurs.
Looks like this issue which was fixed in Swagger UI v. 4.15.3. Update your app to use the latest version of Swagger UI.

InertiaJS/Breeze throwing 'undefined reading $page' in prod

Upon running yarn prod inside a Laravel Breeze project with Vue3 and InertiaJS, this console error is thrown:
Cannot read properties of undefined (reading '$page')
I am unable to find anything anywhere else that will fix my issue, I first thought it was a <script setup> issue with Vue3, and tried the solution found in this issue which ended up not working for me, which makes me believe it's an Inertia issue potentially.
We have another project running Breeze, Vue3 and Inertia currently in production working perfectly fine which is only confusing myself even more.
Dependencies as below
"laravel/framework": "^9.11",
"php": "^8.0.2",
"inertiajs/inertia-laravel": "^0.5.4",
"vue-loader": "^17.0.0"
"vue": "^3.2.31",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
Any help will be greatly appreciated.
Thanks

Laravel Vue.js components are not working on server

I am new to Laravel Vue and I recently came to a project. at my localhost everything working fine, but when I pushed my project to the server via git, the Vue components not working. it says this error in the console...
Uncaught SyntaxError: Unexpected token '<' app.js:1
there is no npm install on the server so I run the command locally "npm run production" and pushed the app.js and all other js files via git to the server.. the server files are the same as localhost but Vue components not working on the server, but they are running on localhost..., I am stuck to the problem with 3 days, any help will be highly appreciated.
Thanks
Just for clarity, the CSS file is rendering but the JS file not
In my console:
Resource interpreted as Stylesheet but transferred with MIME type text/html: /rider/auth/public/css/app.css.
Uncaught SyntaxError: Unexpected token '<' app.js:1
So the issue was in the .env file , and there was a variable "ASSET_URL = ./public" , this was not allowing the application to go to the correct path . Thanks #Aless55 for your great support

how to compile js to es5 with laravel mix?

I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!?
How to compile or transpile to es5 with laravel mix and webpack?
could you show the correct configuration for webpack.mix.js?
tnx alot
UPDATE February 2020
If anyone still need help with this, mix already provide a babel compilation to es5:
A slight variation of mix.scripts() is mix.babel(). Its method
signature is identical to scripts; however, the concatenated file will
receive Babel compilation, which translates any ES2015 code to vanilla
JavaScript that all browsers will understand.
You can use it like this:
mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')
DOCS
In order to compile your es6 code to es5 follow the following steps:
1) install the babel-env preset
npm install #babel/preset-env --save
And then declare it in your .babelrc in the root directory:
{
"presets": ["#babel/preset-env"]
}
2) compile your code using
npm run dev //for dev environment
or
npm run prod // for production environment
after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.
the edge console error:
Expected identifier, string or number
and the corresponding line that it shows is this:
setOption(val = []) {
this.select2.empty();
this.select2.select2({
-----> ...this.settings,
data: val
});
this.setValue(this.value);
},
sorry for taking your time

Debugging Axios requests in React Native

I'm trying to debug axios requests in my React Native app using axios-debug-log.
I've added the library: npm install --save-dev axios-debug-log
Before a user logs in and starts using the app, I set the local storage (or in RN's case, the AsyncStorage): AsyncStorage.setItem('debug', 'axios')
In the top of the file with my axios API requests, I added require('axios-debug-log');
However, I'm not seeing any logs when I use axios. The docs for axios-debug-log don't include any specifics about using the library with RN, so I'm not sure if there's something I'm doing wrong. If there is another library/ techniques I could use to debug axios requests in my RN app I would be open to using those as well.
Using AsyncStorage will not work. You need to set NODE environment variable.
Option 1
Add the following code on top of your index.js file.
let debug = require('debug');
debug.enable('axios');
Option 2
Other way you can do it is using npm 'babel-plugin-transform-inline-environment-variables' npm package.
run
npm install babel-plugin-transform-inline-environment-variables
Now got to .babelrc file inside your react-native app directory and add following code.
// .babelrc
{
“presets”: [“react-native”],
“plugins”: [
“transform-inline-environment-variables”
]
}
Finally run your app with following command. It will set a node env variable DEBUG as axios.
DEBUG=axios react-native run-ios
DEBUG=axios react-native run-android

Resources