Hello I use requirejs in Moodle 3.5 to include js files, but I have a problem with Tempus Dominus Bootstrap 4.
Here is my config.js
define([], function () {
window.requirejs.config({
paths: {
"moment": 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min',
"datetimepicker":'https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min',
},
shim: {
'datetimepicker': {deps: ['jquery','moment'], exports: 'datetimepicker'},
}
});
});
datetimepicker.js
define(['myfolder/config', 'datetimepicker'], function(unused,datetimepicker) {
return datetimepicker;
}
);
myapp.js
define([
'jquery',
'myfolder/moment',
'myfolder/datetimepicker',
],
function ($,moment) {
function initManage() {
And it throws the error: "No define call for datetimepicker";
What is wrong?
The shim has to be:
datetimepicker: { exports: "$.fn.datetimepicker" }
Here are the files:
config.js
define([], function () {
window.requirejs.config({
paths: {
"moment": M.cfg.wwwroot + '/admin/tool/myplugin/js/moment.min',
"moment-fr": M.cfg.wwwroot + '/admin/tool/myplugin/js/moment-fr',
"bootstrap": M.cfg.wwwroot + '/admin/tool/myplugin/js/bootstrap.bundle.min',
"datetimepicker":M.cfg.wwwroot + '/admin/tool/myplugin/js/tempusdominus-bootstrap-4',
},
shim: {
bootstrap: { deps: ["jquery"], exports: 'bootstrap'},
datetimepicker: { exports: "$.fn.datetimepicker" }
}
});
});
datetimepicker.js
define(['tool_myplugin/config', 'datetimepicker'], function(unused,datetimepicker) {
return datetimepicker;
});
And app.js
define([
'jquery',
'tool_myplugin/moment',
'tool_myplugin/bootstrap',
'tool_myplugin/datetimepicker'
],
function ($,moment) {
function initManage() {
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
format: 'HH:mm',
use24hours: true,
defaultDate: moment({hour: 9,minute:0})
});
...
Related
My test runs indefinitely without results (see image below). I am pretty new to setting up backend testing environment. Any guidance is much appreciated.
I have provided the snippets of my code, please let me know if you need any additional information.
I tried the below commands.
--clearCache option which did not work
--runInBand option lead to a new error, error Command failed with signal "SIGSEGV".
// testHelper.js
import { DataSource, DataSourceOptions } from "typeorm";
import Database from "better-sqlite3";
export class TestHelper {
private static _instance: TestHelper;
private constructor() { }
public static get instance(): TestHelper {
if (!this._instance) this._instance = new TestHelper();
return this._instance;
}
private dbConnect!: DataSource;
private testdb!: any;
async setupTestDB() {
this.testdb = new Database(":memory:", { verbose: console.log });
this.dbConnect = new DataSource({
name: "default",
type: "better-sqlite3",
database: ":memory:",
entities: ["src/entities/**/*.ts"],
synchronize: true,
} as DataSourceOptions);
await this.dbConnect.initialize()
}
teardownTestDB() {
this.dbConnect.destroy();
this.testdb.close();
}
}
// test.ts
import MyEntity from "entities/MyEntity";
import { TestHelper } from './__utils/testHelper';
beforeAll(async () => {
return await TestHelper.instance.setupTestDB();
});
afterAll(() => {
return TestHelper.instance.teardownTestDB();
});
test("create test data and fetch it", async () => {
await MyEntity.insert({
name: "sqlTestEntity"
});
let sqlTestEntity = await MyEntity.find({
where: {
id: '1'
}
});
expect(sqlTestEntity[0].name).toBe("sqlTestEntity");
});
//package.json
"scripts": {
....
"test": "NODE_OPTIONS=--experimental-vm-modules npx jest",
....
}
"typeorm": "0.3",
"#types/jest": "^28.1.7",
"jest": "^28.1.3",
// jest.config.js
/** #type {import('ts-jest/dist/types').InitialOptionsTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'node',
testTimeout: 20000,
roots: ['src'],
modulePaths: ['<rootDir>/src'],
testPathIgnorePatterns: [
'<rootDir>/node_modules/', "/__utils"
],
moduleDirectories: [
"src"
],
transform: {
"^.+\\.js?$": "babel-jest",
"^.+\\.ts?$": "ts-jest"
},
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(js?|tsx?)$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
testEnvironment: "node",
"moduleNameMapper": {
"src/(.*)": "<rootDir>/src/$1"
},
globals: {
"ts-jest": {
"useESM": true
}
},
extensionsToTreatAsEsm: ['.ts'],
moduleNameMapper: {
'^(\\.{1,2}/.*)\\.js$': '$1',
},
};
I have been experiencing an error to load the last module in define array.
Ex:
define(['jquery', 'js/custom','moment','bootstrap','datetimepicker'], function ($, custom) {
$('#input_start_date').datetimepicker({});
));
Getting an error:
Uncaught TypeError: $(...).datetimepicker is not a function
define(['jquery', 'js/custom', 'chart'], function ($, custom) {
var barChart = new Chart(BARCHART_RegistrantComparison, {});
});
Getting an error:
Uncaught TypeError: Chart is not a function
define(['jquery', 'js/custom', 'bootstrap', 'mCustomScrollbar'], function ($, c) {
$("nav.side-navbar").mCustomScrollbar({
scrollInertia: 200
});
});
Getting an error:
Uncaught TypeError: $(...)mCustomScrollbar is not a function
I have tried to setup defines via chain of requires but that didn't resolve the problem.
Ex:
define(['jquery'], function($) {
require(['js/custom'], function(c) {
require(['bootstrap'], function () {
require(['mCustomScrollbar'], function () {});
});
});
});
Below is my require.js configuration.
var require = {
baseUrl: '/jsp/assets',
deps:['jquery','js/main'],
waitSeconds: 50,
enforceDefine : false,
paths: {
"jquery": ['vendor/jquery/jquery.min'],
"jqueryUI": ['js/jquery-ui.min'],
"bootstrap": ['vendor/bootstrap/js/bootstrap.bundle.min'],
"moment": ['vendor/moment/min/moment.min'],
"datetimepicker": ['js/external/bootstrap-datetimepicker.min'],
"chart" : ['vendor/chart.js/Chart.min'],
"mCustomScrollbar" : ['vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min']
},
shim: {
"jquery": {exports: ['$', 'jQuery']},
"jqueryUI": {
exports: '$',
"deps": ['jquery']
},
"bootstrap": {
"deps": ['jquery']
},
"mCustomScrollbar": {
exports: 'mCustomScrollbar',
"deps": ['jquery']
},
"chart" : {
"deps": ['jquery']
},
"datetimepicker": {
"deps": ['moment','bootstrap']
}
},
urlArgs: "1.0"
};
Anybody faced similar issue or have any suggestion, that will be much appreciated.
Thank you
My precompiled template file is templates.js -- how do I load this file using RequireJS?
requirejs.config({
paths: {
jquery: '../bower_components/jquery/jquery'
, underscore: '../bower_components/underscore/underscore'
, handlebars: '../bower_components/handlebars/handlebars'
, moment: '../bower_components/momentjs/moment'
, spin: '../bower_components/spinjs/spin'
, templates: 'templates'
},
shim: {
handlebars: {
exports: 'Handlebars'
},
templates: {
deps: ['handlebars']
}
}
});
requirejs(["jquery", "underscore", "handlebars", "templates", "moment", "spin", "test"], function($, _, Handlebars, Templates, moment, Spinner, test) {
test.init();
});
You should compile your templates with AMD support . ( I usually do it with help of this Grunt plugin .)
requirejs.config({
paths: {
jquery: '../bower_components/jquery/jquery'
, underscore: '../bower_components/underscore/underscore'
, handlebars: '../bower_components/handlebars/handlebars'
, moment: '../bower_components/momentjs/moment'
, spin: '../bower_components/spinjs/spin'
, templates: 'templates'
},
shim: {
handlebars: {
exports: 'Handlebars'
}
}
});
requirejs(["jquery", "underscore", "templates", "moment", "spin", "test"]
, function($, _, Templates, moment, Spinner, test) {
test.init();
});
Now Templates is an object whose keys are the names of the templates and whose values are the Handlebars templating functions .
Usage example :
var template = Templates['templates/posts.hbs'];
document.body.innerHTML = template({
title: 'All posts',
posts: [
{ title: 'First post', '13/11/2013'},
{ title: 'Second post', '15/11/2013'}
]
});
My Gruntfile.js file:
module.exports = function (grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
requirejs : {
compile: {
options: {
baseUrl: "public_html/js",
mainConfigFile: "public_html/js/config.js",
out: "public_html/app.min.js"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']);
};
My config.js file:
'use strict';
require.config({
deps: ['main'],
paths: {
jquery: 'vendor/jquery',
jquery_tokeninput: 'vendor/jquery.tokeninput',
underscore: 'vendor/underscore',
backbone: 'vendor/backbone'
},
shim: {
jquery: [],
jquery_tokeninput: {
deps: ['jquery']
},
backbone: {
deps: ['vendor/underscore', 'vendor/jquery', 'vendor/jquery.tokeninput'],
exports: 'Backbone'
},
underscore: {
exports: '_'
}
}
});
require(['views/app'], function(AppView) {
new AppView;
});
When I run grunt requirejs it errors with:
Running "requirejs:compile" (requirejs) task
[Error: Error: Missing either a "name", "include" or "modules" option at function.build.createConfig (D:\project\node_modules\grunt-contrib-requirejs\node_modules\requirejs\bin\r.js:24829:19)]
First time using gruntjs and requirejs so not sure why I'm getting the error.
Updated the grunt.js file to use name:
module.exports = function (grunt) {
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
requirejs : {
compile: {
options: {
name: "views/app",
baseUrl: "public_html/js",
mainConfigFile: "public_html/js/config.js",
out: "public_html/app.min.js"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.registerTask('default', ['requirejs']);
};
and removed the following from the config.js:
require(['views/app'], function(AppView) {
new AppView;
});
I have been working with Require.JS and SignalR over the past few days and I noticed that when I load my site sometimes the SignalR/Hubs seems to get loaded before jquery despite my require.js configuration appearing to be correct.
Here's my config:
require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette'
}
});
require([
'app',
'order!libs/jquery/jquery-min',
'order!libs/jQueryUI/jquery-ui-1.8.11.min',
'order!libs/jqGrid/grid.locale-en',
'order!libs/jqGrid/jquery.jqGrid.min',
'order!libs/underscore/underscore-min',
'order!libs/backbone/backbone-min',
'order!Marionette',
'order!libs/jquery.signalR-0.5.1',
'order!noext!signalr/hubs'
], function (app) {
app.initialize();
});
When this fails I get an error on line 16 of the hubs file. It says uncaught TypeError: Cannot read property 'signalR' of undefined.
Upgraded to V2 and modified my config.
var fRequire = require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette',
sigr: 'libs/jquery.signalR-0.5.1'
},
shims: {
"libs/jquery.signalR-0.5.1": {
deps: ["jQuery"]
},
"libs/jqGrid/jquery.jqGrid.min": {
deps: ["jQuery"]
},
"libs/jquery/jquery-ui-1.8.19.min": {
deps: ["jQuery"]
},
"libs/jqGrid/grid.locale-en": {
deps: ["jQuery"]
},
"noext!signalr/hubs": {
deps: ["sigr"]
}
}
});
fRequire([
'app'
], function (app) {
app.initialize();
});
Now require is looking in the wrong locations for jquery, underscore, etc...despite my telling it specifically where to look. Perhaps this has something to do with me following an old tutorial when I configured require using v1.
http://backbonetutorials.com/organizing-backbone-using-modules/
FINAL UPDATE:
Here is my working config. Hopefully it'll help any newbies like myself get passed this issue.
require.config({
baseUrl: '/js',
paths: {
"jquery": 'libs/jquery/jquery-min',
"underscore": 'libs/underscore/underscore-min',
"backbone": 'libs/backbone/backbone-min',
"marionette": 'libs/backbone/backbone.marionette',
"sigr": 'libs/jquery.signalR-0.5.1'
},
shims: {
"backbone": {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"underscore": {
deps: ["jquery"]
},
"marionette": {
deps: ["backbone", "jquery"]
},
"sigr": {
deps: ["jquery"]
},
"libs/jqGrid/jquery.jqGrid.min": {
deps: ["jquery"]
},
"libs/jquery/jquery-ui-1.8.19.min": {
deps: ["jquery"]
},
"libs/jqGrid/grid.locale-en": {
deps: ["jquery"]
},
"noext!signalr/hubs": {
deps: ["sigr"]
}
}
});
// for future ref, I loaded jquery here because app.js references sigr which requires it.
// without enabling it before the module is loaded sigr would complain jquery was not enabled.
require([
'libs/domReady',
'app',
'jquery'
], function (domReady, app, $) {
domReady(function () {
app.initialize();
});
});
It was mandatory that I load jquery in the function(domready, app, $). Failing to do so will result in signalr reporting that it cannot be found.
If you're using requirejs 2.x you can use the "shims" config attribute. There you can specify the dependencies between files that are not AMD compliant, like jquery, jqueryui, etc..
Using your configuration as example:
require.config({
paths: {
jQuery: 'libs/jquery/jquery',
Underscore: 'libs/underscore/underscore',
Backbone: 'libs/backbone/backbone',
Marionette: 'libs/backbone/backbone.marionette'
},
// specify depedencies
shim: {
"libs/jquery.signalR-0.5.1" : {
deps: ["jQuery"]
},
"libs/jqGrid/jquery.jqGrid.min" : {
deps: ["jQuery"]
}
}
});
Also, configure the dependencies in "shims" eliminates the use of the "order!" plugin.
Tip: Use "paths" to set a friendly name for apis that your system use, so when a new version of that api is released you can just change in "paths" and you're done.
Just to follow up on the answer provided and why you are still having to pre-include jQuery... the config setting for require is "shim", not "shims". Require won't recognize and preload the dependencies specified without the correct spelling of the config setting. I got hammered by this recently and posted about it: http://mikeycooper.blogspot.com/2013/01/requirejs-20-dependencies-seemingly.html