I have the following:
scribe/package.js:
Package.describe({
summary: 'A rich text editor framework for the web platform http://guardian.github.io/scribe/'
});
Package.on_use(function(api) {
api.add_files('require.js', 'client');
api.add_files('scribe.js', 'client');
});
For some reason I'm getting this error:
Uncaught ReferenceError: define is not defined
Because require.js doesn't show up in the rendered page. Why is that?
File tree:
You need to export all the top global variables from the package. Add this line before the api.add_filescall:
api.export('define')
Add a similar line for every global variable you'd like to be abke to use outside of the package.
Related
I am trying to create a reusable d3 library, building the code with Babel 7 and then bundling a JS file with Webpack with UMD output. On Webpack config d3 is set as an external library:
externals: {
d3: 'd3',
...
On a simple HTML file I load d3, react and react-dom with <script> tags and everything is loaded fine. I have no errors inside my library on the React wrapper, yet calling any function of d3 says that it is undefined. With a breakpoint on that code line, running on Chrome console the code d3.min(data) returns -46, the same as calling it outside of my library, but when I run the line of code I get the error:
processDataset.js:8 Uncaught TypeError: Cannot read property 'min' of undefined
at processDataset (processDataset.js:8)
at VizService.setData (VizService.js:14)
at new VizService (VizService.js:8)
at new MiniVisual (MiniVisual.js:24)
at color-coded-bar.html:26
I have tried to set window.d3 = d3;, loading different d3 versions but nothing changes. How does the console of the Chrome devtools fail to give a correct output? What am I missing here? Maybe the problem is being obfuscated by the source mapping done by Chrome, how can I disable it and do proper debbuging?
The original processDataset.js:
import d3 from 'd3';
function processDataset(data, { scale = 'linear', range }) {
const dataMin = d3.min(data);
// Rest of the code...
}
export default processDataset;
I've created the following custom command in my cypress/support/commands.js file.
Cypress.Commands.add("login", (username, password) => {
cy.request({
method: 'POST',
form: true,
url: '/test/login/',
body: {'username': username, 'password': password}
})
})
I had tests passing and login working before moving the login functionality to this custom command. I'm invoking it in my spec with cy.login(testuser, testpwd), but I'm getting the following error message: TypeError: cy.login is not a function. The docs say that /cypress/support/commands.js is loaded before any test files are evaluated, so I assumed that simply placing a custom command in there would make the command available. I'm running the tests through the local (GUI) test runner.
All the code and referenced modules in index.js are loaded before your test file. So you need to refer(require) commands.js in your index.js file.
You can however import commands.js module directly in your test file but then you need to include it every test file.
Recommended approach is to include it in index.js file and you are not worried about explicitly refer in your test files.
To expand on #Dinesh Kumar's excellent answer, it's also important you haven't disabled support for the default support file (I know, unfortunate naming scheme in this case) inside your cypress.json by adding the line: supportFile: false.
Delete that line from your cypress.json if it's there. You can also specify a different path if you're not happy using the default path of cypress/support/index.js.
Working index.js with commands.js file - both in the support folder:
// index.js
const customCommands = require('./commands.js')
module.exports = {
commands: customCommands
}
And double check your settings:
// cypress.json
{
"baseUrl": "http://demo.your-domain.test",
"supportFile": false, // <-- delete this line present
...
}
It may help to put a line import './commands.js' into index.js.
For me it worked when I added the type signature of the custom command in the file cypress/support/index.d.ts. For more information visit: Cypress example - Custom Commands
declare namespace Cypress {
interface Chainable {
clearLocalStorageIframe(): void
}
}
I am using 7.2.0 Cypress and command.ts and index.ts file extension I have changed it to .ts
TL;DR: Check if your IDE tried to resolve cy
I slipped into this problem, because my IDE's autocomplete feature added a dependency to resolve the undeclared cy object – that gets injected by cypress.
const { default: cy } = require('date-fns/esm/locale/cy/index.js');
This was very unfortunate, as there is an ongoing (in 2022) issue with the custom commands and you can find a tons of hints..
Removing
import { cy } from "date-fns/locale";
or similar import
from the test file, resolved this. This gets added automatically to resolve undeclared cy objects
Permanent Solution: Add the following to cypress.json
"compilerOptions": {
"types": ["cypress"]
}
I added at the top of commands.js.
/// <reference types="cypress" />
export{}
//CUSTOM COMMANDS...
This then exported and exposed the custom commands after cy. .
I want to place my online game that I made that with pure javascript and html5 canvas in my angular2 project.
I wrote my scripts in external file and add the script tag in the head on angular index.html and in my component's typescript I declared my onload function like this:
declare var startGame1: any;
the startGame1 is a method that make the canvas ready for my game.
the problem is when I call startGame1() in AfterViewInit I get errors like this:
Unhandled Promise rejection: Error in :0:0 caused by: Cannot read property 'clearRect' of undefined ; Zone: angular ; Task: Promise.then ; Value:
ViewWrappedError {__zone_symbol__error: Error: Error in :0:0 caused by: Cannot read property 'clearRect' of undefined at ViewWrappedErro……} Error: Error in :0:0 caused by: Cannot read property 'clearRect' of undefined
I suggest you to load the external js using the .angular-cli.json.
In the apps -> scripts and insert the relative path of your external .js in the array.
And inside the app folder, create a .d.ts file to insert your declare var startGame1: any;. For example:
myGame.d.ts
declare var startGame1: any;
The myGame.d.ts will be loaded automatically by the webpack and then define your startGame1 for your app.
It says here(http://ace.c9.io/#nav=embedding) just copy one of src* subdirectories somewhere into your project
I have put it in mykeystoneapp/public/js(my default home is mykeystoneapp/public)
Here are the errors I get:
1.Uncaught TypeError: $.cookie is not a function(ui.js:8)
2.Uncaught Error: Missed anonymous define() module: function …(require.js:141)
http://requirejs.org/docs/errors.html#mismatch
Here is my Jade code:
script(src='/js/ace/demo/kitchen-sink/require.js')
script.
require.config({paths: {ace: "/js/ace/build/src"}});
define('testace', ['ace/ace'],
function(ace, langtools) {
console.log("This is the testace module");
var editor = ace.edit("editor_container");
editor.setTheme('eclipse');
editor.session.setMode('javascript');
require(["/js/ace/lib/ace/requirejs/text!src/ace"], function(e){
editor.setValue(e);
})
});
require(['testace']);
Secondly if I put debugger in EventEmitter(https://github.com/ajaxorg/ace-builds/blob/master/src/ace.js#L3300)
I can see it’s properly reaching EventEmitter._dispatchEvent with
eventName=‘changeMode’ but it returns without any operation as there are no !listeners or defaultHandler
editor.session.setMode('javascript'); is wrong, it should be editor.session.setMode('ace/mode/javascript'); instead. Same for theme which is supposed to be ace/theme/eclipse.
error in ui.js is not related to ace, since ace doesn't have a file named ui.
I cannot seem to access a global variable in Ext.application after I do a production or test build with Cmd 4. This happens during the first application launch. I have read other similar threads but there is nothing new in there that can solve my problem for whatever reason.
Before I started using Cmd, I would run my application from a server against the application directory, and things ran just fine. I had no problems with my other files picking up the global variables.
Now that I have moved to Cmd 4 / ST2.3.1, the test and production builds get built into one big app.js file. So it seems that when code that is earlier in the js file calls a global variable, it cannot find it, with the console exception:
Uncaught TypeError: Cannot read property 'targetServer' of undefined
This happens during the first application launch, and the app just hangs. The loading indicators are not even removed. I noticed that the Ext.application code is at the end of the app.js. Could it be some code is launching before the application is fully loaded?
In my app.js, I have the following. This is last in my app.js at line 76623. The global variable not being read is "targetServer":
Ext.application({
name: 'qxtapp',
targetServer: 'http://192.168.1.70:8080'
...
});
One of my stores looks like this. This is where I get the exception. The below code is earlier in my app.js, at line 70742:
Ext.define('qxtapp.store.AccountsListStore', {
extend : Ext.data.Store ,
xtype : 'accountsListStore',
config: {
model: 'qxtapp.model.AccountsList',
data: [
{ accountName: qxtapp.app.targetServer+'/account_one' },
// ^ Causes exception- cannot read property "targetServer"
// of undefined
{ accountName: qxtapp.app.targetServer+'/account_two' },
...
]
}
})
Any idea what I'm missing here? Any help is greatly appreciated.
Thanks!
This is an order-of-operations error.
In development, your Ext.application() code (in app.js) is run first because any other classes (e.g. qxtapp.store.AccountsListStore) are loaded dynamically after the browser physically reads app.js.
But when you use Cmd to bundle your classes together, the resulting single JS file is read entirely at once by the browser. What happens is that the Ext.define() methods all run BEFORE Ext.application()... so qxtapp.app isn't yet assigned.
The easiest way to circumvent this problem is to use a true global variable, not just a property assigned to the global "app" object (in app.js):
var TARGET_SERVER = 'http://192.168.1.70:8080';
Ext.application({
//...
})
And in your other classes...
Ext.define('qxtapp.store.AccountsListStore', {
extend : Ext.data.Store ,
xtype : 'accountsListStore',
config: {
model: 'qxtapp.model.AccountsList',
data: [
{ accountName: TARGET_SERVER + '/account_one' }
//...
]
}
});