I am using browserify rails and reactify and have the following component (pasted below). But, when I call it for rendering from a javascript file as shown in the second part below, I get the following error at the return line of the render method. Can you kindly help and let me know what is wrong?
Uncaught SyntaxError: Unexpected identifier error
Component:
/** #jsx React.DOM */
var React = require('react')
var Hello = React.createClass({
render: function() {
return <div>Hello, {this.props.name}</div>
}
})
Calling from JS file:
var React = require('react');
var HelloMessage = require('alacalc/test_react');
Related
I'm using Playwright to test my TypeScript webapp, and I want to ensure no errors are logged to the console. (I want my tests to fail if an error occurs.)
To do so, based on this post, I use the following code:
import { test as base, expect } from '#playwright/test';
export const test = base.extend({
page: async ({ baseURL, page }, use) => {
const messages: string[] = [];
page.on('console', (msg) => {
// Ignore regular log messages; we are only interested in errors.
if (msg.type() === 'error') {
messages.push(`[${msg.type()}] ${msg.text()}`);
}
});
await use(page);
expect(messages).toStrictEqual([]);
},
});
export default test;
This code will correctly cause the test to fail if console.error is used in the app.
However, Uncaught (in promise) TypeError is ignored by this check; the test completes successfully even though the following message is logged to the console:
ion-refresher.js:526 Uncaught (in promise) TypeError: ee.componentOnReady is not a function
at _class._callee8$ (ion-refresher.js:526:21)
at tryCatch (regeneratorRuntime.js:86:17)
at Generator._invoke (regeneratorRuntime.js:66:24)
at Generator.next (regeneratorRuntime.js:117:21)
at asyncGeneratorStep (asyncToGenerator.js:3:20)
at _next (asyncToGenerator.js:25:9)
at asyncToGenerator.js:32:7
at new Promise (<anonymous>)
at _class.<anonymous> (asyncToGenerator.js:21:12)
at _class.connectedCallback (ion-refresher.js:187:51)
I want to catch this kind of error (Uncaught (in promise) TypeError) automatically when running my Playwright tests because it should never occur. How can I do that?
(I tried removing the msg.type() === 'error' check from my code, but that didn't help-- Uncaught (in promise) TypeError do not show up as console errors in Playwright, so where are they?)
Based on the comment from #stefan judis, I was able to capture this error by checking for page errors in addition to console errors.
Here's the final code:
import { test as base, expect } from '#playwright/test';
export const test = base.extend({
page: async ({ baseURL, page }, use) => {
const messages: string[] = [];
page.on('console', (msg) => {
// Ignore regular log messages; we are only interested in errors.
if (msg.type() === 'error') {
messages.push(`[${msg.type()}] ${msg.text()}`);
}
});
// Uncaught (in promise) TypeError + friends are page errors.
page.on('pageerror', (error) => {
messages.push(`[${error.name}] ${error.message}`);
});
await use(page);
expect(messages).toStrictEqual([]);
},
});
export default test;
I’m experimenting Elm 0.19 with Electron building a simple Elm app (based on the Counter example) in Electron. When I run electron-forge start, I get an error that says Cannot read property 'Elm' of undefined highlighting scope[‘Elm’] part of the elm.js file.
function _Platform_export(exports) {
scope[‘Elm’] ? _Platform_mergeExportsDebug(‘Elm’, scope[‘Elm’], exports) : scope[‘Elm’] = exports;
}
The interesting thing is that the exact same files (Main.elm, index.html) open up just fine (showing the counter as expected), if I run elm-live Main.elm --open -- --output=elm.js instead.
So it appears that this passed to elm.js in Electron is undefined, which then caused scope to be undefined.
The Chrome Dev Tool shows the scope variable passed to elm.js is undefined in the case of the Electron app. In the case of elm-live, that value was the Window object.
elm.js
(function(scope){
'use strict';
--- omitted ----
var author$project$Main$main = elm$browser$Browser$sandbox({ init: author$project$Main$init, update: author$project$Main$update, view: author$project$Main$view });
_Platform_export({ 'Main': { 'init': author$project$Main$main(elm$json$Json$Decode$succeed(_Utils_Tuple0))(0) } });
})(undefined);
elm.js? [sm]
(function(scope){
'use strict';
--- omitted ----
var author$project$Main$main = elm$browser$Browser$sandbox(
{init: author$project$Main$init, update: author$project$Main$update, view: author$project$Main$view});
_Platform_export({'Main':{'init':author$project$Main$main(
elm$json$Json$Decode$succeed(_Utils_Tuple0))(0)}});}(this));
Error message
Uncaught TypeError: Cannot read property 'Elm' of undefined
at _Platform_export (elm.js:1949)
at elm.js:4004
at elm.js:4005
index.html:44 Uncaught ReferenceError: Elm is not defined
at index.html:44
Index.html
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="elm"></div>
</body>
<script src="./elm.js"></script>
<script>
var app = Elm.Main.init({
node: document.getElementById('elm')
});
</script>
</html>
Main.elm
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = init, update = update, view = view }
-- MODEL
type alias Model = Int
init : Model
init =
0
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
In the Elm #electron channel on Slack, I saw a discussion about this issue and here is a recap for anyone interested.
The issue is that 'this' is not defined in the electron renderer
This causes scope within Elm runtime to be undefined.
Possible work-around is
uglify the compiled elm code using the instructions at https://elm-lang.org/0.19.0/optimize
or change (this) to (this||window) at the bottom of the compiled elm.js file (Opened an issue here https://github.com/elm/core/issues/998)
I am trying to animate a 'Skillbar' using HTML, CSS, JS, and animate.css. I am getting the error:
Error feedback: Uncaught TypeError: Cannot read property 'top' of undefined.
I am using a grid system rather than bootstrap
var skillBarTopPos = jQuery('.skillbar').position().top;
jQuery(document).scroll(function(){
var scrolled_val = $(document).scrollTop().valueOf();
if(scrolled_val>skillBarTopPos-250)
startAnimation();
});
function startAnimation(){
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
};
I have an AngularJs + Ruby on Rails app and I'm trying to integrate ng-token-auth, however I am getting the following warning and errors when my app loads, preventing the app from actually loading:
jQuery.Deferred exception: Cannot read property 'validateOnPageLoad' of
undefined TypeError: Cannot read property 'validateOnPageLoad' of
undefined
-
TypeError: Cannot read property 'proxyIf' of undefined
at Object.apiUrl (ng-token-auth.self-50017ec….js?body=1:689)
at ng-token-auth.self-50017ec….js?body=1:789
at Object.invoke (angular.self-5592af5….js?body=1:4626)
at request (ng-token-auth.self-50017ec….js?body=1:786)
at processQueue (angular.self-5592af5….js?body=1:15758)
at angular.self-5592af5….js?body=1:15774
at Scope.$eval (angular.self-5592af5….js?body=1:17026)
at Scope.$digest (angular.self-5592af5….js?body=1:16842)
at angular.self-5592af5….js?body=1:17065
at completeOutstandingRequest (angular.self-5592af5….js?
body=1:5825)
-
TypeError: Cannot read property 'url' of undefined
at ng-token-auth.self-50017ec….js?body=1:815
at Object.invoke (angular.self-5592af5….js?body=1:4626)
at responseError (ng-token-auth.self-50017ec….js?body=1:813)
at processQueue (angular.self-5592af5….js?body=1:15758)
at angular.self-5592af5….js?body=1:15774
at Scope.$eval (angular.self-5592af5….js?body=1:17026)
at Scope.$digest (angular.self-5592af5….js?body=1:16842)
at angular.self-5592af5….js?body=1:17065
at completeOutstandingRequest (angular.self-5592af5….js?
body=1:5825)
at angular.self-5592af5….js?body=1:6101
-
Uncaught TypeError: Cannot read property 'validateOnPageLoad' of undefined
at Object.addScopeMethods (ng-token-auth.self-50017ec….js?
body=1:168)
at Object.initialize (ng-token-auth.self-50017ec….js?body=1:109)
at ng-token-auth.self-50017ec….js?body=1:836
at Object.invoke (angular.self-5592af5….js?body=1:4626)
at angular.self-5592af5….js?body=1:4434
at forEach (angular.self-5592af5….js?body=1:322)
at createInjector (angular.self-5592af5….js?body=1:4434)
at doBootstrap (angular.self-5592af5….js?body=1:1711)
at bootstrap (angular.self-5592af5….js?body=1:1732)
at angularInit (angular.self-5592af5….js?body=1:1617)
here's my app index and auth config:
(function(){
'use strict';
angular.module('MyApp', [
'restangular',
'ui.router',
'templates',
'ui.bootstrap',
'ng-token-auth'
]).config(authConfig);
authConfig.$inject = ['$authProvider'];
/** #ngInject */
function authConfig($authProvider) {
$authProvider.configure({
apiUrl: 'http://localhost:8000/'
});
}
})();
UPDATE
It seems that it either cannot find my config or getConfig does not exist:
addScopeMethods: function() {
return c.user = this.user,
c.authenticate = angular.bind(this, this.authenticate),
c.signOut = angular.bind(this, this.signOut),
c.destroyAccount = angular.bind(this, this.destroyAccount),
c.submitRegistration = angular.bind(this, this.submitRegistration),
c.submitLogin = angular.bind(this, this.submitLogin),
c.requestPasswordReset = angular.bind(this, this.requestPasswordReset),
c.updatePassword = angular.bind(this, this.updatePassword),
c.updateAccount = angular.bind(this, this.updateAccount),
this.getConfig().validateOnPageLoad ? this.validateUser({
config: this.getSavedConfig()
}) : void 0
},
It fails in the above code on this.getConfig().validateOnPageLoad because getConfig() is undefined. getSavedConfig() returns the expected config, however...
I'm using devise on the back end, so my understanding is that I just need a minimal config like this to get started.
Please let me know what other info I can provide!
I figured it out!
I changed my config to:
function authConfig($authProvider) {
$authProvider.configure([{
default: {
apiUrl: 'http://localhost:8000/'
},
user: {
apiUrl: 'http://localhost:8000/'
}
}]);
}
in getConfig e was undefined, so return t[this.getCurrentConfigName(e)] was returning 'user', but I had no config named 'user', so 'undefined' was returned. Adding a named config fixed this issue since t here is an object with keys that are the names of your config values.
I do not understand why the following test is failing with the error:
TypeError: (intermediate value).should.be.type is not a function
describe('#Option object', function() {
it('returns value as whatever type was passed to the constructor', function() {
var o = function() {
this.getValue = function() {
return new Date();
}
};
var i = new o();
i.getValue().should.be.type('Date');
})
});
I've read [most] of the Should.js documentation but I must be missing something. Can anyone tell me what is wrong with my test?
Actually only one thing wrong. You read not should.js docs, but unit.js docs - it is not related to should.js at all.
Correct link.
Correct code will be:
i.getValue().should.be.instanceOf(Date);
or
i.getValue().should.be.Date();