gulp files aren't refresh in browser - backbone.js

I have a problem with gulp file on my Backbone project. I'm working on a project with two other peoples. With them everything is working. I have a problem with browser cache - I think is with browser cache.
How it looks:
When I made changes gulp watch doesn't return any errors. Gulp copies all files from the src to dist folder. I've checked my files and they are saving correctly.
I turned off browser cache in the developer toolbar and it won't help. Sometimes I need to wait few minutes before I see my changes, and sometimes I need to refresh 20-30 times to see changes I've made.
Many time I see in console this error:
router.js:22 Uncaught SyntaxError: Unexpected end of input
When I debug this file I see that this file is incomplete but when open this file in browser directly - it is complete but still console shows an error
What else can I do, because I can't work like this?

Related

Webpage is load but can't get css file net::ERR_ABORTED 404 after upgraded to webpack5

So the changes made before having this issue are upgrading to webpack 5 and changing AWS EC2 instances. So I checked Nginx config and webpack config files and didn't notice anything wrong. If open a new browser tab and enter the CSS file link, I am able to get the CSS file but occasionally need to fetch the 2nd or 3rd time to get the file. When the website loads, the CSS file seems not be able to loaded at the same time. In the HTMLWebpackPlugin, I have set the scriptLoading as 'blocking'. Any idea how to debug and fix this issue? Another questions, only webpack generated js and CSS file has load issue, the other files like flexbox.min.css has no issue to load.
Update: I downgraded to using webpack4 and this issue is gone. If anyone has an idea or knows any configuration regarding this, please please let me know.
Thanks

React App not loading, showing "Uncaught SyntaxError: Unexpected token '<'" in console, but works in Private Window

I have browsed many possible solutions to this error with no success. I understand the fundamental issue is that the request to /static/js/main.[hash].js is expecting JS, and instead is returning HTML. I can not, however, understand why the application runs fine while using a Private window, and also will work ONE time after clearing cache and hard reload. In addition to the error message, we get a white screen and the app does not load.
Looking at the Network tab in the browser, I compared the request when working and when not working. I noticed that when working, i.e. in private window, it seems as though the HTML is fetched using a different endpoint, /null. The response is the same HTML that causes the error (the app HTML), but for some reason it works here.
It seems as though the error could be fixed if I could define the request to accept HTML or JSX, but I don't know where to find where this request is called as it seems as though this is all handled by Webpack.
One thing to note, is that when running yarn build and serving the build locally, we still get the error message, but the app does load (no white screen). In the local build HTML, we find a script tag like this:
<script src="undefined"></script>
While the production (breaking) build gives us this:
<script type="text/javascript" src="/static/js/main.ff34f559.js"></script>
edit: The project was created using CRA then freshly ejected
Any help is greatly appreciated!

AngularJS loaded twice with Rails asset pipeline

I have set up rails to use bower according to the following guide: http://joelencioni.com/blog/2014/01/03/integrating-bower-with-rails/
I have installed AngularJS and included it in my application.js file.
Now, when I run rake assets:precompile, I get the following error in the console:
WARNING: Tried to load angular more than once.
But my application continues to (seemingly) work fine. When I run rake assets:clobber, I no longer get the error.
I read through the many StackOverflow questions and answers relating to this error and still couldn't find a solution. ng-app is only declared once, there are no errors with my templates and how I include them, turbolinks is removed, etc.
What could cause this error when I compile my assets?
UPDATE: Some strange behaviour here... running the app in production with Passenger, the above error doesn't show up.

Angular - blank page, how to diagnose bootstrapping issues?

I have a working (in development) Angular app and I've just got my Grunt distribution script working how I want it to, however when run my app through Grunt and then run it from the distribution folder I just get a blank page, no errors, no logging in console, no missing files in the network tab in Chrome etc, it appears everything loads but nothing happens.
I've run into this issue before during development and thrashed around until it worked, however this is now much more complex due to the minified files in distribution etc.
I'd like to properly diagnose this blank page issue but I'm not sure where to start, it appears that Angular is simply not bootstrapping at all after processing to dist mode.
It appears there is no such thing as a very verbose diagnostic mode for Angular, I've switched to the uniminified and there is nothing reported at all.
I checked the minified html file and my ng-app tag is still there on the html element as it should be so that's not the issue.
Also if I drop to console I can type angular and get back the output for it, so it's there, just not doing anything.
Where to start?
Start with Chrome devtools open when you load the page.
Add $log.debug statements at the top of all your services and controllers.
app.js will not work without the
['paramname1', 'paramname2', function(paramname1, paramname2) {
version (all the other files minify fine with out it.)

Sencha touch app remains on blue loading screen when viewing on Android device or emulator

I just created a basic sencha app by
sencha generate app --name AndroidDemo --path ../demo
and I viewed it in browser and everything is perfect.
I then followed the instructions here: http://www.sencha.com/blog/android-setup-for-sencha-touch/
and compiled the app with Sencha Cmd and when the emulator opens I only get a blue loading screen.
I also tried compiling/building the app with phonegap on phonegap build site and the build finishes successfully and after loading the app in my andoid device, again I only see the loading page and it stays on this page and the app does not launch.
I'm completely clueless. Need your help friends.
Thanks,
In your app code may be miner syntax error or other error so while app run in emulator check log cat or other option run or app in chrome and check console log. Because loading screen display in case of error as my expression with this.
i'm having the exact same problem..
(currently on windows, btw)
while it's not exactly a solution,
a workaround that i did (out of desperation to see the rest of my app on the emulator):
is to just install it directly to the emulator using the "adb" command.
haven't tried this on a mac, but i'm guessing it's almost the same thing?
after building the app using "sencha" cmd, open cmd/terminal to the build directory.
-assuming you did not change the output location, the apk will be created in your
project root folder under this folder:
"build\native-package-mobile\MYAPPNAME\packager.json\"
make sure the emulator is already running
run the following in command/terminal at the folder where the apk is located:
adb install -r MYAPPNAME.apk
wait for awhile and it should say successfully installed.
run the app in the emulator and hopefully it will go beyond the loading screen.
I don't know why this issue is happening though.
(only started tinkering with android dev/sencha yesterday and it seems to be doing all in it's power to prevent me from running my app. haha)
please share if you find the correct fix for this :)
This usually happens when you build your version and you did not imbed all needed components.
For example, when you use ...
Ext.Image
... in your code.
While running without ...
Sencha app build xxx
... Sencha will grab the component from the touch/src components folder.
But at the time you build the app, it cannot reference to that folder any longer and Sencha will stall.
Please open the console and look out for a warning like this:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.MessageBox';
consider adding 'Ext.MessageBox' explicitly as a require of the
corresponding class
You need to add these to the requires section of either App.js or a class where you use the item (here Ext.Messagebox).
Another way to find out what is happening is to run the build code inside the browser and look into the console (so instead of localhost/myapp/index.html you run localhost/myapp/build/{package}/{myapp}/index.html).
There is one other thing that might happen. It’s the scope of async operations.
Like this:
Ext.defer(function() {this.log(‘all good’);}, 500);
this is not the scope of your class.
You need to use:
Ext.defer(function() {this.log(‘all good’);}, 500, this);
Or you might even use ...
Ext.bind()
...to bind the scope to the function.

Resources