I've got an Aurelia project based on the jspm skeleton. I'm using both toastr and this datepicker custom attribute https://www.danyow.net/jquery-ui-datepicker-with-aurelia/.
Each works individually. However, when I include both in my project I get the following error:
datePicker.js:12 Uncaught (in promise) TypeError: $(...).datepicker is not a function
Any ideas on how to get these to work together?
As Miroslav indicated above, the error resulted from conflicting jquery dependencies in my config.js file. Some references were to npm and some were to github. In my case, I changed all to reference github.
I changed references from:
"jquery": "npm:jquery#3.1.1"
to
"jquery": >"github:components/jquery#3.1.1"
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.
Trying to get a (what should be) simple module to work: metisMenu
However, unfortunately I'm failing in doing so, apparently something in my Webpacker setup because when loading my page I get the error: Uncaught TypeError: $(...).metisMenu is not a function
There is an issue in loading the module in application.js. The module is being loaded in vendor/assets/javascripts/app.js
I have jQuery correctly installed
the following snippet into the head section makes it work (but this is without the use of Webpaker):
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/metismenu"></script>
.
I've created a github branch. Please help! https://github.com/henkjanwils/metisMenu-error
I'm in the process of migrating a Rails 5.1.5 project, which uses CoffeeScript, from using sprockets to using webpacker. The project also uses select2.js. With sprockets, I did the following:
Install jquery-rails (jQuery is a dependency for select2).
Put select2.js code in vendor/assets/javscripts.
In application.js.coffee, add:
#= require select2
After that I was able to use select2 to in my application.js.coffee file:
$(document).on 'turbolinks:load' ->
$('select').select2
So far I've described the pretty standard way of including/using javascript libraries with sprockets.
However, with webpacker I can't make select2 work and I'm not sure why. I have two hypothesis:
I'm not importing/requiring it properly;
it doesn't find jQuery at some point of the load process;
So for jQuery, I did the following:
yarn add jquery
included in my environment.js:
const webpack = require('webpack');
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}));
I've removed the jquery-rails gem, as well as #= require 'jquery' and tested that jquery works, so I guess I have correctly included it. However, I tried several ways of importing select2 (using es6 imports) and none of them worked. I tried:
import select2 from 'select2';
import select2 from 'select2/dist/js/select2'
import select2 from 'select2/dist/js/select2.js'
import 'select2/dist/js/select2.js'
I even tried to import it from the old vendor location by writing inside app/javascript/pack/application.js.coffee:
import '../../../vendor/assets/javascripts/select2'
I can confirm that the file contents is imported, as I put a console.log within the select2 file under node_modules/select2/dist/js/select.js and it did get printed. However, I also get the error TypeError: $(...).select2 is not a function when I execute $('select').select2() in the browser's dev tool console.
What am I missing or doing wrong?
P.S. I can provide much more info, but I didn't want my question to get any more bloated.
P.P.S. With my modest JS knowledge, I looked at the source code but couldn't recognize what exactly they are exporting and how am I supposed to import it.
I know this is an old post, but just in case someone else could benefit:
app/javascript/packs/application.js
...other requires...
require('select2')
window.Rails = Rails
import 'bootstrap'
...other imports...
import 'select2'
import 'select2/dist/css/select2.css'
$(document).on("turbolinks:load", () => {
$('.select2').select2()
})
My similar problem
I have stumble upon the same problem with another web component (Switchery):
I imported the component with yarn add switchery (no error)
I could import it correctly through WebPack with import 'switchery' (no error bundling the pack)
But when I was trying to use the Switchery object in the browser like they say in the doc:
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);
I would get the error: ReferenceError: Switchery is not defined
Note: I didn't want to install RequireJS as WebPack is supposed to do the same thing (and even better) nowadays.
My solution:
The problem was the webpack doesn't expose the pack-generated variables and classes in the global scope!
So to fix this, I needed to do two things:
Explicitly give a name to the imported class from Switchery:
import Switchery from 'switchery'
Use this Class only in the same JS file where the import was done
Testing hack:
If you want to try that out and "go back" to the mess that sprocket allowed, in the same file, you can expose "globally" the variable so you can use in from the browser:
import Switchery from 'switchery'
window.Switchery = Swicthery
now you can execute the switchery almost like in the example:
var init = new window.Switchery(elem);
Hope that helps...
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?
I use jquery-ui-timepicker-addon on my page and I get this error:
TypeError: $.widget.extend is not a function on this.options =
$.widget.extend( {}, jquery-ui.js (line 579, col 17)
I create the control using:
$("input.dateInfo").datetimepicker()
and here I don't get any error. The error appears when I click the control (the input field). Instead of showing the datetime picker, I got the error above.
Any explanation for this error?
I use require.js to load the javascript libraries. I have more js files that load. If is any conflict, with some other jquery plugin, how do I know where is the conflict?
Later edit:
I load the libraries using require.js
paths: {
jquery: 'jquery/jquery.min',
jquery_ui: 'jquery-ui-1.11.2.custom/jquery-ui',
jquery_ui_widget: 'jquery-picklist/jquery.ui.widget',
jquery_ui_timepicker: 'jquery-ui-1.11.2.custom/jquery-ui-timepicker-addon',
bootstrap: 'bootstrap-3.0.0/js/bootstrap.min',
bootbox:'bootstrap-3.0.0/plugins/bootbox.min',
moment: 'moment/moment',
//bootstrap_dateTime_picker: "bootstrap-dateTimePicker/bootstrap-datetimepicker",
sugar: 'sugar/sugar-1.3.6.min'
// some more lines here
}
and
shim: {
"jquery": ["sugar"],
"slim_scroll": ["jquery"],
"jquery_ui": ["jquery"],
"jquery_ui_widget": ["jquery","jquery_ui"],
"jquery_ui_timepicker": ["jquery", "jquery_ui"],
"bootstrap": ["jquery_ui"],
"less": ["jquery"],
"sugar_loaded": ["jquery","sugar"]
// some more lines here
}
Possible duplicate of jquery-ui-typeerror-e-widget-extend-is-not-a-function
Check your sequence of script loading.
<script src="/scripts/jquery.js">
<script src="/scripts/jquery-ui.js">
<script src="/scripts/other-widgets.js">
EDIT:
In your edit you mentioned that your are using require.js. With require.js you need to mention dependencies of modules to manage the load sequence else every script will be loaded asynchronously.
Now, the problem zeros down to, that one of your script depends on jquery_ui_widget but you missed to mention it as dependency:
shim: {
"jquery": ["sugar"],
"slim_scroll": ["jquery"],
"jquery_ui": ["jquery"],
"jquery_ui_widget": ["jquery","jquery_ui"],
"jquery_ui_timepicker": ["jquery", "jquery_ui"],
"bootstrap": ["jquery_ui"],
"less": ["jquery"],
"sugar_loaded": ["jquery","sugar"]
// some more lines here
}
Here, I am about which script depends on jquery_ui_widget but my guess would be slim_scroll or jquery_ui_timepicker or bootstrap.
After adding and removing from the list of external js files I found that the conflict was with: jquery_ui_widget: 'jquery-picklist/jquery.ui.widget'. I removed this js file (I was luck that was a component that was no longer in use) and everything start working normally!
Thanks anyone for trying to help me. I think that this is a issue specific to my particular project that uses about 20 external js libraries, and one of them caused the conflict.