This is a runtime error, not a compile time error。
When I reference umd/react.development.js, the page is normal. However, when i change it to umd/react.production.min.js, I got error message
!! (dist\react.production.min.js, line:9, col:173) - ReferenceError: self is not defined
!! (dist\main.js, line:26, col:21) - ReferenceError: React is not defined
Because it is a UMD, the registration of react to global variables is done through self executing anonymous functions. I tried to change the statement of self to that in 'development. js', but it didn't work. The web still couldn't find the React
I tried react#16.1 #17 #18，
im sure react.*.js is inculded befor main.js,by console.log
Related
I have a project made with react and rest api(php+mysql).I have to put it through a codeceptjs test.The app is working properly with countless of manual testing, and as far as I can see, the codeceptjs test is working too, but it gives the following error:
Error: Clickable element "ADD" was not found by text|CSS|XPath
at new ElementNotFound (node_modules/codeceptjs/lib/helper/errors/ElementNotFound.js:14:11)
at assertElementExists (node_modules/codeceptjs/lib/helper/WebDriver.js:2835:11)
at WebDriver.click (node_modules/codeceptjs/lib/helper/WebDriver.js:917:7)
at processTicksAndRejections (internal/process/task_queues.js:97:5)I }) => {
I.amOnPage('/');
I.click('ADD');
I.seeElement('#product_form');
I.fillField('#sku', 'SKUTest000');
I.fillField('#name', 'NameTest000');
I.fillField('#price', '25');
I.waitForElement('#productType');
I.selectOption('#productType','DVD');
I.waitForElement('#size');
I.fillField('#size','200');
I.click('Save');
My add element looks like this:
<Link title="ADD" to="/add-product">ADD</Link>
Can someone please help me out why is this error appearing and how can I solve it? Thanks in advance!
Update:
I did a couple more tests, and I noticed that sometimes it gives back less/different errors depending on the test's time. For example:
http://165.227.98.170/open?testName=ed
http://165.227.98.170/open?testName=ah
http://165.227.98.170/open?testName=bc
My guess is that is has to do with how react loads in the html elements and manages the rest api calls. How/what should I change in the app to accomodate the test script?
Seems like the problem was I put the whole home page's load after the rest api call by accident.
I am using Embedly in React.js application to show URL preview in the page that has arrow navigation, and I am getting an error when switching page before embed content loaded.
The error message received is:
Uncaught TypeError: Cannot read property 'cards' of null
at n.done (platform.js:7)
at e.done (platform.js:8)
at e.each (platform.js:8)
at e.<anonymous> (platform.js:8)
at n.<anonymous> (platform.js:7)
at platform.js:7
at Array.forEach (<anonymous>)
at Object.e.each (platform.js:8)
at platform.js:7
at Array.forEach (<anonymous>)
Setting Chrome to pause on exceptions, and using its pretty print to make the code more easily readable, we see that the contentWindow property of parameter b is null, hence the error. However, this error is coming from the third party Platform.js, so I cannot amend that code myself to work around the issue there.
In order to recreate the issue, open this JS Fiddle. In the lower right pane you'll see the running example. Click the Next button several times very quickly, after a few attempts the error will appear in the console / Chrome will pause execution (if set to do so).
Question
Is there anything I can do in my own code to prevent this exception from occurring in platform.js?
I'm new to the React stack, trying to build a library of simple shared components. The components work fine in their home project. I've configured them using this advice. Dropped them into a local git, npm installed them a new project with git+https. The components show up in the new project /node_modules/.../lib, as expected.
When the following runs, I end up with undefined exports:
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NeonFooter = exports.default = undefined;
var _NeonFooter = require('./components/NeonFooter');
var _NeonMenu = require('./components/NeonMenu');
exports.default = _NeonMenu.NeonMenu;
exports.NeonFooter = _NeonFooter.NeonFooter;
Dropping into chrome's debugger and using some console statements, (for instance) _NeonFooter does show up as an _esModule, with a correctly pathed closure to the NeonFooter.js file in scope. No direct _NeonFooter.NeonFooter field, though. When _NeonFooter.NeonFooter is referenced it comes up undefined.
I can't seem to get the vscode debugger or chrome to bind to a breakpoint on the require, and there's no exception occurring to break on. How do I dig into this further to find the actual error that leads to the undefined value?
So, it looks like the issue is with a Babel transformation, or with how that transformation is being consumed by React. Changing the transformed code to
exports.NeonMenu = _NeonMenu.default;
exports.NeonFooter = _NeonFooter.default;
solves the issue.
Still trying to determine the correct Babel/React behavior, but it's a step forward.
I have started a new AngularJS project - and this time something strange is happening. Whenever I get an error in the browser's console, it references to the angular.js file. I don't know what's different with this app from all my others - maybe the AngularJS version (1.6.4). Or the fact that I'm using controllerAs syntax?
For example - if I try the following in my main controller:
vm.notdefined.somevalue = "this should give an error";
I don't get a console error with the line of code in my controller, but with a line in angular.js:
angular.js:14525 TypeError: Cannot set property 'somevalue' of undefined(…) ""
It would be ok for me if I could trace back the error from the stack trace - but also the stack trace does not contain any information on the position of the error in my project.
The error is thrown where it appears. vm.notdefined.somevalue is a part of ngControllerinstance. In the moment your controller get parsed the error is thrown. This happends inside AngularJS kernel logics. You could check the stack trace for debugging. It should lead you to your controller function. You could also use breakpoints on your code e.g. by using chrome debugger. All in all this will lead you to the origin of this error.
For more information about debugging please check this answer: How can I get more stacktrace in AngularJS
The error message is quite clear: vm.notdefined is undefined. Try:
vm = this;
vm.notdefined = {
somevalue: "this should give an error"
}
Shame on me - I missed to click on the three dots to expand the error message:
Not sure why I have to do this sometimes and other times I get the error stack in the immediate stack.
I have an angular app (using AngularAMD/RequireJS) and I'm converting the design to use angular-material. I have a toolbar directive that has md-icon using md-svg-src.
Trouble running the toolbar-directive_test.js file.
At first it kept complaining "Unresolve GET request images/icon.svg". I resolved in the test setup using:
$httpBackend.whenGET(/\.svg$/).respond('');
Now if I run that test file using fdescribe(...) all the tests pass.
But if I run all my app tests (without fdescribe on that toolbar test file), they are somehow failing because of the md-icons. The error I get, which appears on another test file:
TypeError: Cannot read property 'element' of undefined
The stack-trace does not give any guidance on what is causing it. Only mentions angular-mocks.js, and then exits around the any random assertion on this test file where the error is showing. And if I xdescribe this file which is showing the element of undefined error, the next test file is failing with this error instead.
If I use xdescribe on toolbar-directive_test.js file (the one which has the md-icon), all the tests pass.
And if I run all tests including the toolbar-directive_test.js file, but I remove all the md-icon instances from its template, again all the tests are passing.
I have tried including ngMaterial-mocks package in my tests, and that doesn't do anything. But in general, I'm not using that package (but I am using ngMocks).
Any suggestions on how to debug this?
As #Widget suggested, this works:
$httpBackend.whenGET(/\.svg$/).respond('<svg></svg>');
Where this didn't work:
$httpBackend.whenGET(/\.svg$/).respond('');