this is very weird to me when I hit this error
Uncaught ReferenceError: css is not defined
and here is the code
define(function (require) {
"use strict";
var $ = require("jquery")
_ = require("underscore"),
Backbone = require("backbone"),
Marionette = require("backbone.marionette"),
css = require("css!style/toggle-switch"),
tpl = require("text!tpl/ViewPlan/listOut_instrument.html");
return Marionette.ItemView.extend({
});
});
what is wrong with my approach?
RequireJS intentionally doesn't support loading style-sheets since a number of mainstream browsers don't notify when a style sheet is loaded. See this.
You can however roll your own (as found in the link above):
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
Related
I am using Angular 9 and SSR and I am getting the error on one of the packages.
const DragEvevent = window.DragEvent
ReferenceError: window is not defined
On the ngx-chips package
We already tried adding to the nodeJs the variables:
const domino = require('domino');
const fs = require('fs');
const template = fs.readFileSync(join(join(process.cwd(), 'dist/emaua-front/browser'), 'index.html')).toString();
console.log(template);
const win = domino.createWindow(template);
// mock
global['window'] = win;
global['document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
But still the error persists.
Update
After updating all packages I got the error:
ERROR in multi ./src/assets/css/ripple.min.scss ./src/assets/css/lounge.scss ./src/assets/css/discovery.scss ./src/assets/css/main.scss ./src/styles.scss ./node_modules/roboto-fontface/css/roboto/roboto-fontface.css ./node_modules/material-design-icons/iconfont/material-icons.css ./node_modules/bootstrap/dist/css/bootstrap.min.css ./node_modules/bootstrap/dist/css/bootstrap-theme.min.css ./node_modules/ng-bootstrap-to-bootstrap-3/dist/ng-bootstrap-to-bootstrap-3.min.css ./node_modules/jquery-ui-dist/jquery-ui.min.css ./node_modules/jquery-ui-dist/jquery-ui.theme.min.css ./node_modules/ag-grid-community/dist/styles/ag-grid.css ./node_modules/ag-grid-community/dist/styles/ag-theme-balham.css ./node_modules/slick-carousel/slick/slick.scss ./node_modules/slick-carousel/slick/slick-theme.scss ./src/assets/css/animate.css ./node_modules/cookieconsent/build/cookieconsent.min.css
Module not found: Error: Can't resolve '/Users/vinh/learning/front-end/node_modules/bootstrap/dist/css/bootstrap-theme.min.css' in '/Users/vinh/learning/front-end'
this.debug is not a function
After that I applied the fix as said in here
And again I am getting the same error like:
const DragEvent = window.DragEvent;
^
ReferenceError: window is not defined
On the ngx-chips package
UPDATE
The problems we have in ngx-chips is something that was happening before.
https://github.com/Gbuomprisco/ngx-chips/issues/740
https://github.com/Gbuomprisco/ngx-chips/issues/786
Does anyone knows a way of overcoming this problem?
I upgraded to Angular 10 and I had the same problem with ngx-chips on the server.
I solved this problem as follows:
I, probably like many, do not really need this component when rendering on the server.
Too lazy to create a separate project to exclude this module.
So I just disabled this component.
In template:
<div *ngIf="isBrowser()">
<tag-input [(ngModel)]=...
</tag-input>
</div>
In typescript:
isBrowser() {
if (window) {
return true;
}
return false;
}
function requireFromString(src, filename) {
var Module = module.constructor;
var m = new Module();
m._compile(src, filename);
return m.exports;
}
console.log(requireFromString(`
const a = require('./a');
const fs = require('fs');
module.exports = { test: a}
`));
We can require node module by this.
Can we require TypeScript module in memory?
I think what you are looking this: How to compile TypeScript code in the browser?
Or use only typescriptServices.js:
<script src="https://rawgit.com/Microsoft/TypeScript/master/lib/typescriptServices.js"></script>
And add js code:
var hello = "test";
var js = ts.transpile("let a = `<div>${hello}</div>`");
console.log(js);
eval(js);
console.log(a);
Where ts.transpile translate ts to js string.
Examle on next.plnkr.co.
I think what you are looking for is called dynamic imports. Check out https://blog.mariusschulz.com/2018/01/14/typescript-2-4-dynamic-import-expressions
I want to generate javascript for my blockly which does not have any input. I got the Javascript function from generator stub but it requires to assemble a javascript code into var code variable which I am not geting.
i already tried this:
var code = Blockly.JavaScript.workspaceToCode(workspace);
But it shows me code is undefined.
and I am getting this error:
Cannot read property 'call' of undefined at Blockly.Generator.blockToCode (blockly_compressed.js:1572) at Blockly.Generator.workspaceToCode (blockly_compressed.js:1570)
Can you please help me out that how do I generate javascript code and assemble it?
This is how you can generate JS code and run it:
<script>
var workspace = Blockly.inject('blocklyDiv',
{media: '../../media/',
toolbox: document.getElementById('toolbox')});
Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),
workspace);
// Generate JavaScript code and display it.
function showCode() {
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
var code = Blockly.JavaScript.workspaceToCode(workspace);
alert(code);
}
// Generate JavaScript code and run it.
function runCode() {
window.LoopTrap = 1000;
Blockly.JavaScript.INFINITE_LOOP_TRAP =
'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
var code = Blockly.JavaScript.workspaceToCode(workspace);
Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
try {
eval(code);
} catch (e) {
alert(e);
}
}
</script>
I am trying to wrap my head around bundling an app as a node module using browserify and I have come across the following scenario:
var
$ = require('jquery')(window),
_ = require('underscore'),
// _ = require('lodash/dist/lodash.underscore'),
Backbone = require('backbone');
Backbone.$ = $;
var TodoView = new Backbone.View.extend({
tagName: 'li',
tpl: _.template('An example template'),
events: {/* dom events */},
render: function() {
this.$el.html(this.tpl(this.model.toJSON()));
return this;
}
});
var todoView = new TodoView();
console.log(todoView.el); // => TypeError: Object [object Object] has no method 'apply'
I can't seem to get a reference for the underscore function. I will definitely be needing it to manipulate data. Templating is just an example use case here as there are other scalable options.
On the same note, I have also tried to reference lodash.underscore to no success and it gives same error.
I have hunch I am missing something here. Any help?
I'm trying to get the code below under test when occurred to me that I already included express at the top of this file. Can you some how monkey patch the express object after it's already loaded?
var express = require('express')
Helper = (function() {
var HelperObject = function(params) {
this.directories = params.directories;
};
HelperObject.prototype.addStaticPath = function(app) {
for(i = 0; i < this.directories.length; i++) {
var static = express.static('/public');
app.use(static);
}
};
return HelperObject;
})();
The problem is that when you create a node module the required modul is bound in the closure of the module and you can't start spying on it cause it isn't visible in your test.
There is Gently where you can override require but it will sprinkle your code with boilerplate test related code.
From the docs:
Returns a new require functions that catches a reference to all
required modules into gently.hijacked.
To use this function, include a line like this in your 'my-module.js'.
if (global.GENTLY) require = GENTLY.hijack(require);
var sys = require('sys');
exports.hello = function() {
sys.log('world');
};
Now you can write a test for the module above:
var gently = global.GENTLY = new (require('gently'))
, myModule = require('./my-module');
gently.expect(gently.hijacked.sys, 'log', function(str) {
assert.equal(str, 'world');
});
myModule.hello();