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
Related
Working on a React project.
I start up my environment using npm start. I then start my testing infrastructure using npm test in a different terminal. While my tests are running, errors are generated and printed in the terminal that my environment is running in.
npm start
Compiled successfully!
You can now view v2 in the browser.
Local: http://localhost:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Open another terminal and run npm test
Test Suites: 1 passed, 1 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 2.415s
Ran all test suites.
Yet, some UI errors that the tests generate appear in the terminal for my local environment
Compiled successfully!
You can now view v2 in the browser.
Local: http://localhost:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
[HPM] Error occurred while trying to proxy request /directory from localhost:3000 to <TARGET> (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
[HPM] Error occurred while trying to proxy request /directory from localhost:3000 to <TARGET> (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
[HPM] Error occurred while trying to proxy request /directory from localhost:3000 to <TARGET> (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
[HPM] Error occurred while trying to proxy request /directory from localhost:3000 to <TARGET> (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
[HPM] Error occurred while trying to proxy request /directory from localhost:3000 to <TARGET> (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)
How do I prevent errors - and anything else for that matter - from being printed out to the terminal where I started my dev environment?
looking at the output of your npm test, it seems like you are using jest, which has a support for configuring setup files
A list of paths to modules that run some code to configure or set up the testing framework before each test file in the suite is executed.
you can utilize it by pointing to a file, where you can mock the implmentation for console.
add to jest.config.js the following
module.exports = {
setupFilesAfterEnv: ['./jest.setup.js'],
};
then in jest.setup.js file
global.beforeAll(() => {
// disable console.error for clarity
console.error = jest.fn().mockImplementation(() => {});
});
note that it will achieve what you desire only if the module that prints to the console during the testing is using console.error(). otherwise, you might need to mock other functions, such as console.info(), console.log(), console.debug()
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': ''
}
}
}
I did not change anything in app.scss, but when I run npm run watch I get the following errors:
error in ./resources/sass/app.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
Unsupported operation: Cannot extract a file path from a URI with a fragment component
# ./resources/sass/app.scss 2:14-254
Asset Size Chunks Chunk Names
/js/app.js 2.46 MiB /js/app [emitted] /js/app
ERROR in ./resources/sass/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
undefined
^
Join(null, "variables"): part 0 was null, but part 1 was not.
#import 'variables';
^^^^^^^^^^^
stdin 2:9 root stylesheet
in C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\resources\sass\app.scss (line 2, column 9)
at runLoaders (C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\webpack\lib\NormalModule.js:30
at C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\loader-runner\lib\LoaderRunner.js:364:11
at C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\loader-runner\lib\LoaderRunner.js:230:18
at context.callback (C:\Users\TAQI VAHEED\Desktop\#Coding\resPro\node_modules\loader-runner\lib\Loader
13)
Any help appreciated.
Finally found the issue. It is related to dart-sass being used instead of node-sass with laravel-mix v4.x.x.
Turns out something related to dart-sass or laravel-mix does not work well with paths containing a '#' symbol. In your case, your app is located at C:\Users\TAQI VAHEED\Desktop\#Coding\resPro and the #Coding folder is creating the error.
Either move your app somewhere else without a '#' symbol in the path OR enable node-sass again by following the steps from laravel-mix 4.0.0 release notes:
you can manually switch back to node-sass, like so:
npm install node-sass
mix.sass('resources/sass/app.sass', 'public/css', {
implementation: require('node-sass')
});
in your webpack.mix.js write the code
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css');
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.
How to make browserify show error line and file on compile:
browserify -t coffeeify mainPage_browserify.coffee > main.js -d
The current output don't give this information. So it is hard to debug:
⏎
Error: Cannot find module 'throw' from '/allProjectsPath/project/public/javascripts/map'
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:50:17
at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:119:43)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:128:21
at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:60:43)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:66:22
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:21:47
at Object.oncomplete (fs.js:107:15)
❯ browserify --version ⏎
5.12.1
I was interested in this by myself, so I had a quick peek into source code and run debugger. It looks like that errors from transforms are basically swallowed when using command line browserify.
Errors from coffeeify are passed using event emitter on the stream...
https://github.com/substack/coffeeify/blob/master/index.js#L35
These are handled by Browserify only if the bundle call was made with callback present...
https://github.com/substack/node-browserify/blob/master/index.js#L619
Unfortunately callback is not passed when running the command line...
https://github.com/substack/node-browserify/blob/master/bin/cmd.js#L55