I am working on a feature to replace a Flash dashboard with Nivo/D3. I successfully built the dashboard and have it as a React component to be imported. The react component even loads into the browser, but does not render on the page.
I have verified that my component is built correctly, and I am able to run it in an html page by itself. The page I am trying to put it in is of file type .html.erb. I did try changing the ruby tags to HTML and that did not work. One theory is that I need to remove the JS prototype duplicate line here.
<script type="text/javascript"> </script>
<script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/prototype.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/effects.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/controls.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/application.js?1557137208" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/active_scaffold.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/dhtml_history.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/form_enhancements.js?1565285086" type="text/javascript"></script>
<script src="/javascripts/active_scaffold/default/rico_corner.js?1565285086" type="text/javascript"></script>
<link href="/stylesheets/active_scaffold/default/stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]><link href="/stylesheets/active_scaffold/default/stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/active_scaffold/default/export-stylesheet-ie.css?1565285086" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
However, I don't know where or how that code is being generated. I think it is related to active scaffolding. Does anyone have any input on that?
Presently, the error message I have been troubleshooting is this:
index.esm.js:214 Uncaught TypeError: h(...) is not a function
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Object.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
at Module.<anonymous> (index.esm.js:214)
at n (ResizeObserver.es.js:928)
but I don't think that is relevant as I have dug into it quite a bit.
Tech stack notes (I realize I am on an old version of Ruby but upgrading is unfortunately not an option):
* XML Version 1.0
* Ruby version: 1.8.6
* Ruby gems
cgi_multipart_eof_fix (2)
gem_plugin (0.2.3)
* json_pure (1.7.6)
* mongrel (1.1.5)
* rake (0.8.7)
* ruby-net-ldap (0.0.5)
* Apache version: Not used yet. Eventually Odin and Sonitor will be replaced with nifi.
* .NET version 4.0 (or 4.7)
Does anyone have advice on how to get my React component to render?
Related
I have an app I developed in Android. I installed a VM with Mac, and I'm testing it in iOS. The app worked perfectly in Android, but in iOS it is not. When I use 'ionic serve' or 'ionic serve --lab' the browser show a white screen, and in the console I get this errors (link of image below):
Console
Here is some code from the index.html:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="lib/ionic/css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/bluebird.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>
<script src="lib/ionic/js/ionic-modal-select.min.js"></script>
<script src="lib/ionic/js/ionic-toast.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
I'm really lost here because the exact same files works OK for Android.
Which error you are posted, not library error.Error coming from app.js file.If you dont mind create a new ionic app and replace your file in new app.it will works.
I am having a problem with my ionic project, it is not loading cordova.js file or ngCordova.js file.
Here is my index.html file
<!DOCTYPE html>
<html>
<head>
<script src="lib/ngCordova/dist/ng-cordova.js"/>
<script src="cordova.js"></script>
<script type='text/javascript' src="lib/cryptojslib/rollups/aes.js"></script>
...
</head>
When I deploy the app on my iphone, aes.js and cordova.js file is loaded, the problem is ng-cordova.js is not loaded because when I invoke that code I get:
Error: Can't find variable: cordova
scan#file:///var/containers/Bundle/Application/6888FB51-F164-46EC-89AC-B8960C93FC7A/Nastic.app/www/lib/ngCordova/dist/ng-cordova.js:596:16\
....
If I switch lines:
<!DOCTYPE html>
<html>
<head>
<script src="cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"/>
<script type='text/javascript' src="lib/cryptojslib/rollups/aes.js"></script>
...
</head>
Then ng-cordova.js is loaded, but aes.js is not loaded.
I was looking for a fix to this problem but couldn't find anything that solved the issue, however lot of similar issues.
Thanks
You should always include the file cordova.js after loading ng-cordova.js
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="lib/cryptojslib/rollups/aes.js"></script>
Reference: http://ngcordova.com/docs/install/
I tried to create a task who allow to download and inject dependencies in my index with gulp and wiredep. It works but like my folder bower_components it isn't in my wwwroot my scripts's links are wrong. Errors are 'Uncaught SyntaxError: Unexpected token <' for all my links. So, I tried to change my destination folder but when I run my task, I catch a new error 'bootstrap isn't installed'. And I can't reinstall bootstrap twice times in the same project.
This is my gulp task:
eval("var project = " + fs.readFileSync("./project.json"));
gulp.task('bower', function () {
gulp.src("./" + project.webroot + "/index.html")
.pipe(wiredep({
directory: "./bower_components/",
bowerJson: require('./bower.json')
}))
.pipe(gulp.dest("./" + project.webroot + "/"))
});
my project architecture:
and my index.html (head):
<!--bower:css-->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="../bower_components/bootstrap-touch-carousel/dist/css/bootstrap-touch-carousel.css" />
<!--endbower-->
<!--bower:js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.js"></script>
<script src="../bower_components/jquery-validation/dist/jquery.validate.js"></script>
<script src="../bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script src="../bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="../bower_components/hammer.js/hammer.js"></script>
<script src="../bower_components/bootstrap-touch-carousel/dist/js/bootstrap-touch-carousel.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-route/angular-route.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-parse/angular-parse.js"></script>
<script src="../bower_components/angular-locker/dist/angular-locker.min.js"></script>
<!--endbower-->
So I already tested this for my gulp task :
eval("var project = " + fs.readFileSync("./project.json"));
gulp.task('bower', function () {
gulp.src("./" + project.webroot + "/index.html")
.pipe(wiredep({
directory: "./"+project.webroot+"bower_components/",
bowerJson: require('./bower.json')
}))
.pipe(gulp.dest("./" + project.webroot + "/"))
});
With this code, the error is the bower not installed.
Thank you for all the help you could give me.
If you have a .bowerrc file with:
{
"directory": "wwwroot/lib"
}
then on the bower install, it will be copied to the destination folder.
I am trying to setup GitLab on my local machine in development env from source.
Please note that I am completely new to Ruby on rails development as my field is PHP.
I followed instructions from
https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/install/installation.md where I replaced RAILS_ENV=production with RAILS_ENV=development where appropriate and also tweaked some config files.
All installations steps went smooth, however when I open the gitlab page, it tries to load css and js files that are not present:
...
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.atwho.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/select2.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/highlightjs.min.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/dropzone/basic.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/print.css?body=1" media="print" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
...
I noticed that after I do
sudo -u git -H bundle exec rake assets:precompile RAILS_ENV=development
the only css files that are put into public/assets/ folder are
application-4979ead805bf0eb7d853f1e0104f87ef.css
application-4979ead805bf0eb7d853f1e0104f87ef.css.gz
According to css assets not precompiling in production I added this line
config.assets.precompile += ['*.css', '*.js']
in config/environments/development.rb. However now when I try to precompile assets, I get an error
...
rake aborted!
Sass::SyntaxError: Undefined mixin 'border-radius'.
(in /home/git/gitlab/app/assets/stylesheets/generic/avatar.scss:6)
/home/git/gitlab/app/assets/stylesheets/generic/avatar.scss:6:in `border-radius'
...
Does anyone know how to fix it?
Thanks!
Error
The error can be fixed by including the #border-radius mixin in your avatar.css.scss stylesheet. We typically use a variables.css.scss stylesheet, where our mixins are defined:
#app/assets/stylesheets/variables.css.scss
#mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
#app/assets/stylesheets/avatar.css.scss
#import 'variables';
This should give you the ability to call the mixin in your avatar stylesheet, which should fix the error you're receiving
--
Precompilation
Typically, if you wanted to add a specific CSS file to your pre-compilation path, you'll have to do this:
#config/environments/production.rb
config.assets.precompile += ['avatar.css']
Precompilation is only recommended for production environments, as if you precompile in development, how are you going to track / manage changes? Bottom line is you won't.
Here's what the Rails docs say about it:
In the production environment Sprockets uses the fingerprinting scheme
outlined above. By default Rails assumes assets have been precompiled
and will be served as static assets by your web server.
In my Rails app, I have ui-bootstrap-0.2.0.js in the vendor/assets/javascripts directory. I have required the file in my application.js file.
I get an error when I specify the bootstrap as my dependency in this line, angular.module('myApp',['ui.bootstrap']);, as instructed to do here, http://angular-ui.github.io/bootstrap/
Chrome detects a Uncaught ReferenceError: angular is not defined at this defined module:
angular.module("ui.bootstrap", ["ui.bootstrap.accordion", ...]) in the ui-bootstrap-0.2.0.js.
However, angular.js catches an error No module:ui.bootstrap. So it seems both of these javascript files cannot see eachother. Is there a solution to this?
Here is how I did it in my project:
<script type="text/javascript" src="libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="libs/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript" src="libs/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-ui.min.js"></script>
<script type="text/javascript" src="libs/angular-resource.min.js"></script>
<script type="text/javascript" src="libs/ui-bootstrap-tpls-0.2.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/filters.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
And this is how I set my application module:
var app = angular.module('myapp', ['ui.bootstrap','ngResource']);