"Cannot read property 'upgrade' of undefined" when starting vue application - vue.js

I have a project that's been running perfectly for a few months now, able to run npm run serve with no problem. I have to terminate and run the command again whenever I switch networks, but that has never been a problem and the server could always start again.
Until now - no matter what I do I can't get the server to start. I get this error:
npm run serve
> xbs#0.6.2 serve D:\workspace\[PROJECT]
> vue-cli-service serve
INFO Starting development server...
10% building 1/1 modules 0 active ERROR TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined
at Server.<anonymous> (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:667:47)
at Array.forEach (<anonymous>)
at new Server (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:666:22)
at serve (D:\workspace\[PROJECT]\node_modules\#vue\cli-service\lib\commands\serve.js:137:20)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:695:11)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
The last time I got this message was when I forgot to set the .env files, but this is a previously working copy with all necessary files set, and no changes since the last working run.
I've even tried pulling a fresh copy of the repo, running npm i and setting all env files but it still fails.
npm run lint and npm run build can still work, only npm run serve.
Am I missing anything?

The problem was again with the .env files. My vue.config.js was trying to access a previously set environment variable that had since been removed.
Only strange thing was that there weren't any problems up til now?

I guess your devServer.proxy.target is empty!
You could set this configuration

For me it was that I forgot to create (or copy from another PC) the .env file after clone and try to run my project on another PC.

I also had this problem.
I used in the project process to get the backend address(for example):
devServer: {
proxy: {
'/api/back/*': {
target: process.env.VUE_APP_BACKEND_URL,
pathRewrite: {
'/api/back': '/api/back',
},
},
},
},
But there was no .evn file.
Just create .env file:
VUE_APP_BACKEND_URL= 0.0.0.0:2222 #example
Didn't notice the answer #Sergey.

I declared this environment variable in .env.dev, but the local build failed, and the same project ran without problems, so I created a new .env file and declared it in it
proxy: {
'/api': {
target: process.env.VUE_APP_PROXY,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}

Related

How do I change public/ directory name in Laravel 9

I have seen a question with a very similar title on SO from 3 months ago but it has no answers.
After a fresh laravel 9 installation what are the minimum steps to put the laravel application into it's own directory, and also modify the public directory name? It would be handy to have a step by step guide with laravel 9 specific one as I can't seem to find one anywhere.
eg. the following root directory structure:
laravel-app/ (contains all laravel files like resources/ and storage/)
public_html/ (contains index.php and /js etc)
Using the old process (similar to this https://github.com/hannanstd/change-laravel-public) I have always used no longer works, and this seems to have something to do with vite that laravel 9 uses instead of laravel-mix. It works up to the point of running php artisan serve but fails when running npm run dev with vite. Giving this error:
$ npm run dev
> dev
> vite
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency
pre-bundling.
node:internal/fs/utils:347
throw err;
^
Error: ENOENT: no such file or directory, open 'public\hot'
at Object.openSync (node:fs:594:3)
at Object.writeFileSync (node:fs:2207:35)
at Server.<anonymous> (D:\Websites\laravel9-admin\laravel-core\node_modules\laravel-vite-plugin\dist\index.js:122:34)
at Object.onceWrapper (node:events:627:28)
at Server.emit (node:events:525:35)
at emitListeningNT (node:net:1466:10)
at processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'public\\hot'
}
So it seems that yet somewhere else the default "public/" is defined, but after searching with ctrl+shift+F in my project it doesn't seem to be anywhere that matters so really unsure where it's getting it from. Any help is highly appreciated, but really a step by step guide on how to achieve this for Laravel 9 is the end goal so it can be a reference for myself and other users with the same problem :)
Answering this myself as found the solution!
First Option: Just rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: 'public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Second option: Seperate out the laravel core files into their own directory and also rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Create a laravel-core directory and move all files and folders except public_html into the laravel-core folder.
Edit index.php in public_html folder and find/replace __DIR__.'/../ with __DIR__.'/../laravel-core/ (3 cases)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/../public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: '../public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});

I'm getting a weird (ERRCODE 243) error when installing a 3rd party js package using Rush.js by running `rush add --package <package>`

my team is migrating to rush and I had a problem while setting it up: I'm getting a weird error when trying to add any 3rd party lib (let's say react) to package.json using rush add --package react (for example). The error log:
Found configuration in /home/ivan/dev/JS/eisbuk/rush.json
Rush Multi-Project Build Tool 5.66.2 - https://rushjs.io
Node.js version is 14.19.0 (LTS)
Found configuration in /home/ivan/dev/JS/eisbuk/rush.json
Starting "rush add"
Determining new version for dependency: react
No version selector was specified, so the version will be determined automatically.
Trying to acquire lock for pnpm-6.32.3
Acquired lock for pnpm-6.32.3
Found pnpm version 6.32.3 in /home/ivan/.rush/node-v14.19.0/pnpm-6.32.3
Symlinking "/home/ivan/dev/JS/eisbuk/common/temp/pnpm-local" --> "/home/ivan/.rush/node-v14.19.0/pnpm-6.32.3"
The "ensureConsistentVersions" policy is NOT active, so we will assign the latest version.
Querying NPM registry for latest version of "react"...
ERROR: The command failed with exit code 243
I tried to find a similar problem report related to rush and looked up the 243 error with npm, both to no avail. I'm using pnpm, however, the error persists with npm and yarn all the same (with yarn it's exit code 1, everything else is the same).
Here's my .npmrc (a default really):
registry=https://registry.npmjs.org/
always-auth=false
Interestingly enough, if I manually add a dependency to package.json and run rush update, the update goes well and the dep is added to node_modules and shrinkwrap (so it shouldn't be an npm registry problem).
Here's my rush.json:
{
"$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush.schema.json",
"rushVersion": "5.66.2",
"pnpmVersion": "6.32.3",
"pnpmOptions": {
"preventManualShrinkwrapChanges": true,
"useWorkspaces": true
},
"nodeSupportedVersionRange": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0",
"gitPolicy": {},
"repository": {},
"eventHooks": {
"preRushInstall": [],
"postRushInstall": [],
"preRushBuild": [],
"postRushBuild": []
},
"variants": [],
"projects": [
/** ...other projects */
{
"packageName": "#eisbuk/functions",
"projectFolder": "packages/functions"
}
/** ...other projects */
]
}
The entire repo can be found at: https://github.com/eisbuk/EisBuk/tree/feature/rush
Solved!
In the end, I've managed to pinpoint it to the node version. I was using v14.19.0 and bumping to v16.14.2 solved it. I don't know if it's a known incompatibility, but here it is.

After create the build. while runing build showing blank white page

After running the yarn build getting the dist folder. While running the index.html I am getting the white blank page.
File structure:-
:~/Desktop/web$ ls
babel.config.js docs node_modules public src yarn.lock
dist log package.json README.md vue.config.js
vue.config.js
module.exports = {
publicPath: "./",
chainWebpack: config => {
config.plugins.delete('prefetch');
},
devServer: {
host: 'localhost',
https: false,
port: 8080,
public: 'localhost'
},
}
Web Page Output:-
Console Output:-
OneSignalError.js:18 Uncaught (in promise) f: OneSignal: This web push config can only be used on https://example.com. Your current origin is http://localhost:8080.
at Function.checkRestrictedOrigin (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:243516)
at Function.<anonymous> (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:243076)
at Generator.next (<anonymous>)
at r (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:716)
GET http://localhost:8080/sockjs-node/info?t=1632898657676 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1632898659676 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1632898662675 net::ERR_CONNECTION_REFUSED
The problem is that you are testing OneSignal with your local server from Vue, but you have entered in the OneSingal configuration corbid360.com as your URL. What you have to do to test OneSignal is to change the URL inside of the OneSignal dashboard to the local server from your Vue project. Once you have tested it in your local environment, you can change it back to corbid360.com
Most likely the reason is that you need to specify to OneSignal that you are using localhost.
Select Typical setup
Enter your localhost URL
Enable Local Testing
(Treat HTTP localhost as HTTPS for testing)
Come join us in our discord server and learn more about our community and OneSignal: https://onesignal.com/onesignal-developers
I had spent a lot of time on this issue, at last, I got the solution. on list post https://stackoverflow.com/a/60239175/13178120. if you are getting this type of error you can go through with the above link.

vue-router Failed to resolve async component default: ChunkLoadError: Loading chunk vendors~demo failed

I wrote my program with Laravel and Vuejs and it works fine on the localhost, but it gets an error on the host.
Problem:
The program runs well on local host, but when I put it on the host, the following error is appears:
[vue-router] Failed to resolve async component default:
ChunkLoadError: Loading chunk vendors~demo failed
ChunkLoadError: "Loading chunk vendors~demo failed.
(missing: http://example.com/vendors~demo.js)"
requireEnsure http://example.com/js/manifest.js:127
component webpack-internal:///./resources/js/router.js:56
resolveAsyncComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1904
flatMapComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1931
flatMapComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1931
flatMapComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1930
resolveAsyncComponents webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1866
iterator webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2121
step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1847
step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1851
step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1851
step webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1848
iterator webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2140
_callee$ webpack-internal:///./resources/js/permission.js:109
What I did:
I assumed that the files might not be properly located on the host, but that was not the problem.
The next possibility was to update Webpack, but that didn't solve the problem.
Where is the problem?
After several attempts, I used the following command to get the compiled js files, which was a mistake. These are good for development purposes.
npm run watch
or
yarn watch
Use the following command to get the output:
npm run prod

How to debug js in browserify

I have using browserify for new project. It works really well so far.
I have one big issue though. How can I debug each js file separately. It bundles all the files together and points to bundle if error occurs.
I am using chrome and source maps but it doesn't really help in debugging.
Any ideas?
Update: More info:
I'm using this command in package.json
"start": "watchify scripts/main.js -o scripts/bundle.js --debug",
and getting errors as shown above which is not ideal.
I believe my source maps are on?
I'm not exactly sure how you are using the command line tool for browserify without any code, but you you should be able to utilize debug.
--debug -d Enable source maps that allow you to debug your files
separately.
browserify main.js -o bundle.js --debug
For more info on the CLI tool you can look here - https://github.com/substack/node-browserify#usage
Edit After a bit more digging on this - the issue specifically being hit here is a ParseError - which means that Browserify is never actually getting to the proper debug stage. Hadn't really thought it through, but this made perfect sense.
In order to test this - I create two simple files:
a.js
module.exports = function(a) {
return a;
}
main.js
var a = require('./a.js');
console.log(a("something"));
I then ran browserify using watchify with an npm script:
"start": "watchify main.js -o bundle.js --debug"
Using the script in a browser, and everything worked great - it logged to console as expected. I then edited a.js with a typo:
a.js
module.exports = function(a) {
return a---
}
The browser and watchify threw the error shown above: path/to/file/a.js:3 ParseError: Unexpected Token.
Browserify is not able to compile the file properly, so it's throwing an error. You should be seeing this in the console during the build.
To test that the --debug flag works as expected, I modified the code again:
a.js
module.exports = function(a) {
return a('something');
}
The expectation here would be a TypeError since the function now expects a to be a function.
The console in the browser now displays:
Uncaught TypeError: a is not a function __________ a.js:2
Fix your parse issues, and browserify --debug will once again start behaving as expected.