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
Related
I'm working on a Laravel 5.7 project that has been through a few different developers. Recently one of the devs did an npm update that caused a few issues. I've got most all of those issues cleaned up, but now we are seeing an "o is not a function" error any time we try and access a variable in a vue component. This issue only shows up after an npm run prod. If we do an npm run dev everything works fine and the site looks perfect.
This has been a nightmare to debug since it only shows up in the minified production build. I've tried using a few different versions of npm and some different minor releases of vue. I know it's happening whenever we access a variable because I removed everything except for a #{{ status }} call inside of the component. Without that I get no error and with it I get that "o is not a function" error.
Here are the dependencies in our package.json:
"devDependencies": {
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.6.2",
"laravel-mix": "^2.1.14",
"lodash": "^4.17.15",
"popper.js": "^1.16.1",
"vue": "^2.7.14",
"vue-template-compiler": "^2.7.14"
},
"dependencies": {
"axios-retry": "^3.1.2",
"codemirror": "^5.65.10",
"es6-promise": "^4.2.8",
"inputmask": "^4.0.8",
"mjml": "^4.4.1",
"moment": "^2.24.0",
"npm": "^6.11.2",
"signature_pad": "^3.0.0-beta.3",
"spectrum-colorpicker": "^1.8.0",
"vue-ckeditor2": "^2.1.5",
"vue-markdown": "^2.2.4",
"vue-simplemde": "^1.1.2",
"vue2-dropzone": "^3.6.0",
"vuejs-datepicker": "^1.6.2",
"vuex": "^3.6.2"
}
I run into the same problem, so what i did is removing vue-bootstap package
if you changed or updated version of laravel-mix or wabpack restore the inial ones
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",
I have a Rails 6 app that was successfully deployed to Heroku and worked on localhost:3000.
I added tailwindcss via yarn and webpack. It runs perfectly fine on localhost, but does not run on heroku. When I run heroku logs I get the following error
I've read all the Heroku Rails 6 Webpacker issues, and tried all the suggestions. Nothing worked.
I have commented out <%= stylesheet_pack_tag %> ... didn't help
I have toggled extract_css: true in webpacker.yml file .... didn't help
I have run
heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby
... didn't help
Does anyone have any idea what is going on?
My github repo is https://github.com/HundredBillion/enneagram
Stumbled across this post while stuck on a similar problem, hopefully this info will help someone in the future.
I solved my issue within the package.json file by moving the "tailwindcss" reference from the devDependencies to the dependencies block.
{
"name": "app_name",
"private": true,
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "4.2.2",
"jquery": "^3.5.1",
"tailwindcss": "^1.2.0", // <--- Now here.
"turbolinks": "^5.2.0"
},
"version": "0.1.0",
"devDependencies": {
//<--- Was here.
"webpack-dev-server": "^3.10.3"
}
}
I had the same problem with you but I tried this one and it worked for me.
Inside of config/webpacker.yml, you must set extract_css: true default is false.
I had a different error where after updating/fiddling with tailwind my create-react-app wouldn't deploy (highly likely something it did).
my buildpack was node.js. changed per https://github.com/mars/create-react-app-buildpack#user-content-troubleshooting
Confirm that your app is using this buildpack:
heroku buildpacks
If it's not using create-react-app-buildpack, then set it:
heroku buildpacks:set mars/create-react-app
…and deploy with the new buildpack:
git commit --allow-empty -m 'Switch to create-react-app-buildpack'
git push heroku master
I have a few suggestions for you, let me know which one (if any) work for you.
In webpacker.yml for all instances of the below options
check_yarn_integrity: false
compile: true
Try
./bin/setup
rails webpacker:clobber
rails webpacker:compile
If none of the above work then perhaps one of these links will help:
https://github.com/tailwindcss/discuss/issues/4#issuecomment-341918136
https://github.com/rails/tailwindcss-rails
it seems a week or so ago, nativescript lost the ability to talk to the vue devtools. See this issue on github. Run this repo to reproduce -- (you will need to change the host variable in main.js to your computer's network address).
Here are some things I've tried:
Several different networks, including wired, public and private wifi, and mobile hotspot
Local Android emulator with host set to "localhost" and also host excluded.
Physical android device Samsung S9 with latest Android OS
Took the code from nativescript-vue-devtools package and added console logging. Appears to be getting stuck when connecting to the devtools socket in the connect_error -> reconnect loop. Unfortunately the arguments to the connect error event are null so there's no clear reason why it's failing.
Here is the package.json from that project -- they are all defaults after using the CLI to initialize the project:
{
"name": "nsvue-devtools-test",
"version": "1.0.0",
"description": "A native application built with NativeScript-Vue",
"author": "Will P.",
"license": "MIT",
"nativescript": {
"id": "org.nativescript.application",
"tns-ios": {
"version": "5.0.0"
},
"tns-android": {
"version": "5.0.0"
}
},
"dependencies": {
"vuex": "^3.0.1",
"#vue/devtools": "5.0.0-beta.3",
"nativescript-socket.io": "^0.9.0",
"nativescript-vue-devtools": "^1.0.0",
"nativescript-toast": "^1.4.6",
"nativescript-vue": "^2.0.0",
"tns-core-modules": "^5.0.2"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"lazy": "1.0.11",
"nativescript-dev-webpack": "next",
"nativescript-vue-template-compiler": "^2.0.0",
"nativescript-worker-loader": "~0.9.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.1.0",
"terser-webpack-plugin": "^1.1.0",
"vue-loader": "^15.2.6",
"webpack": "^4.16.4",
"webpack-bundle-analyzer": "~2.13.1",
"webpack-cli": "^3.1.0"
}
}
I have also tried on another project using the latest versions of nativescript toast and vue devtools with the same result -- vue devtools never changes from the default screen.
I am able to use termux with nmap to scan from my debugging device and see that my IP/port is open. I am also able to make a very basic website, add a vue instance, and paste the script tag shown in the developer tools UI to show that the devtools are working properly.
Nativescript: you are losing users to react native over this problem (see comments in the issue link above). Vue devtools just released a new version advertising better nativescript support, but we are completely unable to even try it out!
Since Nativescript's community has moved here, I am really just hoping to catch the attention of the devs to get this issue resolved. If anyone else is able to provide a workaround or solution to this problem that would be appreciated as well.
Thanks in advance!
To get my android emulator running NativeScript vue app talking to Vue Devtools electron app,
I needed to set android to allow clear text traffic
In AndroidManifest.xml
set
android:usesCleartextTraffic="true" on the existing node.
for example
<application
android:name="com.tns.NativeScriptApplication"
android:allowBackup="true"
android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#style/AppTheme"
android:usesCleartextTraffic="true"
>
This solution was from this comment
https://github.com/nativescript-vue/nativescript-vue-devtools/issues/8#issuecomment-496292399
It might be also possible to solve this by creating or modifying the network_security_config.xml file.
I doubt this is a change that you would want to commit and have in production, so I am using it only in local development.
Could you try with this deps in your package.json:
"nativescript-toasty": "^1.3.0",
"nativescript-socketio": "^3.2.1",
"nativescript-vue-devtools": "github:anthonny/nativescript-vue-devtools#master",
I do not use nativescript-socket.io and nativescript-toast, but nativescript-socketio (without the .) and nativescript-toasty
It is more a workaround than a real solution but if it can help ;)
I try to start a Laravel 5.4 project without Bootstrap.
After installing Laravel, I edited the following files:
resources/assets/js/app.js
require('./bootstrap');
package.json
...
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"jquery": "^3.1.1",
"laravel-mix": "^0.7.2",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
...
I've got the following error:
ERROR Failed to compile with 1 errors
error in ./resources/assets/js/app.js
SyntaxError: /Users/.../package.json: Error while parsing JSON - Unexpected end of JSON input
at JSON.parse ()
# multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Any suggestions?
By default, Laravel 5.4 ships with Bootstrap and Vue.js scaffolding, but not everyone wants to use either of those technologies. With Laravel 5.5 you can run this if you don’t want any scaffolding to be generated out of the box by Laravel:
php artisan preset none
The line
require('./bootstrap')
has nothing to do with the Bootstrap CSS library. It loads the bootstrap.js file, which you will find in your assets. This file serves the purpose of "bootstrapping" your application (front-end). If you want to remove the Bootstrap CSS library from your project you should:
remove it from package.json
remove dependencies within your app layout
remove loading of sources from app.js / bootstrap.js
If you run "npm install" in the command line, bootstrap's sass files will be downloaded. Running "npm uninstall bootstrap-sass" afterwards will get rid of them.
I also wanted to get rid of bootstrap css codes in my laravel project. I opened the file
resources/sass/app.scss
and simply commented out the corresponding line as bellow
// Bootstrap
//#import '~bootstrap/scss/bootstrap';