I am working on an app for Rails 4. I installed this gem to work with web components
At some point, I wanted to add this component to use Google Maps, so I installed it with bower
...
"dependencies": {
"google-map": "GoogleWebComponents/google-map#~1.0.3"
}
...
and added it to my component list on app/assets/components/application.html
// This is a manifest file that'll be compiled into application.html, which will include all the files
// listed below.
//
// Any web component HTML file within this directory or vendor/assets/components, if any,
// can be referenced here using a relative path.
//
//= require polymer/polymer
//= require google-map/google-map
so I added the code to my website quite simply
<style>
google-map {
height: 600px;
}
</style>
<google-map latitude="37.77493" longitude="-122.41942"></google-map>
But all I get is whitespace. When I open the developer tools, I get this info:
Uncaught TypeError: Cannot read property '_notifyEffect' of undefined
Uncaught TypeError: Cannot read property '_importsLoaded' of undefined
I know the element works, because if I try to use it in a vanilla website without framework, it works alright. What did I mess?
Related
I need to add react-rails to my rails 4 app, but it's giving me hard time to figure out.
my project uses sprockets for assets:precompilation,
this is my component:
import React from "react"
class Sidebar extends React.Component {
render() {
return (<p> hello from react </p> );
}
}
export default Sidebar;
when I load the page everything works fine, except for the react component, which is just rendered as a div in the html, and in the console I see:
Sidebar.self.js?body=1:1 Uncaught ReferenceError: exports is not defined
at Sidebar.self.js:1:23
there's an initial snippet added there:
Object.defineProperty(exports, "__esModule", {
value: true
});
That causes the problem.
I tried everything I could find:
Webpacker (but that gave way more troubles so I removed it)
installing https://github.com/TannerRogalsky/sprockets-es6
Typescript ReferenceError: exports is not defined
React uncaught reference error: exports is not defined
and more. I'm not sure what I'm doing wrong (or maybe I misused one of the solutions above?)
update
I figured that I can send babel configuration options via react-rails gem using:
Rails.application.config.react.jsx_transform_options = {
plugins: ["#babel/preset-react"],
loose: ["es6.modules"]
}
I'm not sure which plugins I should use, but this doesn't appear to be affecting a thing, except that it's not ignored, if I write something that is not recognised I do get an exception.
For the sake of debugging the javascript-part of a Rails 6 (version 6.0.0.rc1) web application I want to use my custom javascript functions also in the Chrome console (aka. Inspect).
Back when I used just static HTML files to build a website (as opposed to using a web-framework like Rails as of right now) you would simply embed the JS file in the DOM like this
<!-- custom JS -->
<script src="js/custom.js"></script>
and could instantly access and execute all custom functions that were placed in this file.
Background:
The JS file is placed at the correct rails 6 specific directory as provided in this article: How to require custom JS files in Rails 6
Note:
The rails 6 application also uses the JS file already, since the browser shows the console log message.
Here is the full content of the JS file:
// app/javascript/packs/custom.js
console.log("loaded custom.js successfully")
function sayHello () {
console.log("Hello good Sir or Madam!")
}
Expectation: I am expecting to open the browser's (Chrome) console and be able to use the sayHello() function in the console.
However, when I do so, I get an error message in the console stating:
Uncaught ReferenceError: sayHello is not defined
Try something like
sayHello = ()=>{
console.log("Hello good Sir or Madam!");
}
then you can evoke in console:
>sayHello();
How should I include jquery.mobile.js in my project so that I can use it with RequireJS.
When I add jquery.mobile.js in my project I start getting following error.
Uncaught Error: Mismatched anonymous define() module: function ( $ ) {
factory( $, root, doc );
return $.mobile;
}
I also followed this post.
Separating jQuery Mobile (1.1.0) from AMD (RequireJS)
Here is a working example. It includes Requirejs, jQueryMobile, Backbone, and Marinonette.
In the index.html file, you need to specify the main module for requirejs to load.
<script type="text/javascript" data-main="js/main" src="js/libs/require-2.1.2.min.js"></script>
In this example, the main module is under "js/main.js"
Inside, main.js, you specify the require.config and use define to load your modules.
I'm having a problem with the fullcalendar js which we use directly through the plugin (not the gem which is currently version incompatible anyway).
I'm upgrading rails from v3.2.6 to v3.2.8
fullcalendar is displaying the calendar ok but clicking to edit a date has a messed up ui (the action button are missgin their labels and there is no 'x' close link) and clicking to add a new event doesn't respond at all (as it's generating js errors).
I am getting these javascript errors:
Edit Event:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'curCSS'
New event:
Uncaught SyntaxError: Unexpected token N
Our code:
LISA.dayClickHandler = function(day, allDay, jsEvent, view) {
$('#event_error_container').hide();
var hours = JSON.parse(day.getHours());
fullcalendar list the jquery-ui version for it as jquery-ui 1.8.23
However the jquery version in my application's vendor/assets/javascripts is 1.8.13 (I see this by literally opening up the file and looking at the comments at the top).
My own app/assets/javascripts library does not have any jquery.js or jquery_ui.js
My app/assets/javsacript directory has application.js which includes
...
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
// more libraries
//= require jquery-ui
//= require jquery-autoSuggest.packed
...
Perhaps it might help to change my apps jquery-ui version from 1.8.13 to 1.8.23 to see if this resolves my issues but I am not sure of the right approach to do that.
This was a jquery-ui change ('curCSS' was removed) that was reversed (it was added back).
http://bugs.jquery.com/ticket/11921
The resolution was to download jquery-ui version 1.8.23 to vendor/assets/javascripts to replace the older version (1.8.11) and restart the server.
I am unable to get jasmine to load my custom javascript file, even though it works perfectly in the browser. I've reduced the javascript to the minimum to avoid any possibility of errors and I still get a failing test on the simplest thing.
Custom ARB.js file:
$(document).ready(function() {
alert('typeof ARB: ' + typeof ARB);
});
ARB = {};
ARB.VERSION = "V1.01.00 2012-08-24";
jasmine configuration file snippet (I'm on Rails 3.0.9):
src_files:
- "public/javascripts/**/*.js"
- "public/javascripts/ARB.js"
This test:
it('should define the custom javascript functions', function() {
expect(typeof ARB).toEqual('object');
});
fails with:
Expected 'undefined' to equal 'object'.
jQuery gets loaded and so does my application.js file. When running jasmine, I get no alert message, but I do when I run my app.
What am I missing?
UPDATE: If I remove the $(document).ready function, jasmine passes all the tests - what's that all about?
shioyama gave me the pointer that I needed to figure this out: my custom ARB.js file was getting loaded before the jquery files so it didn't have access to the $(document).ready function. What I had to do was explicitly spell out the order in which my javascript files were to be loaded. Here's what I put in my jasmine config file at /spec/javascripts/support/jasmine.yml:
src_files:
- "public/javascripts/**/jquery.js"
- "public/javascripts/**/jq*.js"
- "public/javascripts/**/application.js"
- "app/assets/javascripts/**/*.js"
- "public/javascripts/ARB.js"
I first force the main jquery.js file to load, then all the other jquery files, then application.js, then any other javascript files that are located in the assets directory, and finally my custom javascript file.
This works for me because I'm still on Rails 3.0.9 and starting the migration to 3.1+ and the asset pipeline.