I have a really strange problem with my libraries in WebStorm. I have been trying to find out why this does not work, but nobody seem to have the exact problem I am having, maybe because I search bad, but I have really tried.
I have followed the WebStorm support, and from their perspective it should work by now! I do not get any fault when installing the libraries with npm.
I also tried installing external libraries:
However, I am trying to use react-d3-library because I am doing a relational graph with d3. I can see that is available in my node modules in my project, the folder was gray and the others orange? Did not really know why... did some research and found something about "Right click on the directory and go to 'Mark Directory as' and select 'Resource Root'" but does not seem to work for me?
When I run this in my browser I get when pressing F12
Uncaught TypeError: Cannot read property 'force' of undefined
at App.componentDidMount (App.js:311)
at ReactCompositeComponent.js:265
at measureLifeCyclePerf (ReactCompositeComponent.js:75)
at ReactCompositeComponent.js:264
at CallbackQueue.notifyAll (CallbackQueue.js:76)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
at ReactReconcileTransaction.closeAll (Transaction.js:206)
at ReactReconcileTransaction.perform (Transaction.js:153)
at batchedMountComponentIntoNode (ReactMount.js:126)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
Code:
import d3 from 'react-d3-library';
//var d3 = require('react-d3-library);// tried this...
const force = d3.layout.force() // (App.js:311)
.charge(-120)
.linkDistance(50)
.size([width, height])
.nodes(data.nodes)
.links(data.links);
I would really like some help with this... I really do not get why it does not work? It is probably something easy but I have been fighting this the last 3 days...
P.S. Code is here on my github: https://github.com/Thelin90/react-d3.git and i have also checked this before Cannot read property 'force' of undefined (Simple D3 Network graph) This did not help me to solve the actual problem.
As far as I can see it, you are using typings of two different version of d3.js which are not compatible. In v3 there was a layout d3.layout.force in v4 this was changed to d3.forceSimulation with a way difference signature. So depending on what version you use, your code will return a TypeError with v4 but would work with v3.
Ok, I checked your package.json and you are using v4, hence this example will not run.
Ok I tried to translate your example to v4
const force = d3.layout.force()
.charge(-120)
.linkDistance(50)
.size([width, height])
.nodes(data.nodes)
.links(data.links);
const force = d3.forceSimulation(data.nodes)
.force("link", d3.forceLink(data.links).distance(50))
.force("charge", d3.forceManyBody().strength(-120))
.force('center', d3.forceCenter(width / 2, height / 2));
Related
After searching for a bit and finding others having somewhat of the same problem, but no solution for me, I figured it was my turn to seek help.
I have npm along with parceljs setup for webserving (I'm new to these but I'm quite confident it's working as you can see some output in the image I've posted)
I have the typical problem of images not displaying.
Status code of the image is returning 304 OK, and is it normal to not see the the image listed in the directory under the 'Sources' tab in Developer tools?...
The issue is with the way you are loading the image urls as hard-coded strings, for example, you wrote this:
this.load.image('sz','./src/assets/gfx/sz0001.png`)
The way this is written, parcel doesn't know that this string is actually a reference to an image file, so it doesn't know to copy over the image into your output folder and ensure that the path ends up matching the actual output location.
The way parcel works, if you want to include an asset (like an image) into your bundle and reference it by URL in some other javascript context (like the this.load.image function), you should use an import statement or a URL constructor (see docs).
So you would instead write:
import myImageUrl from './src/assets/gfx/sz0001.png`;
// 'myImageUrl' will be a string that points to the location of the image
// This will also tell parcel that sz0001.png is a dependency of this project
// so that it can take care of copying it over to the dist output.
this.load.image('sz',myImageUrl)
Another tip is that the template you referenced uses parcel-bundler which the old, unmaintained 1.x version of parcel. I'd recommend upgrading your project to parcel 2, which on npm is simply parcel (see migration guide).
The green box, is shown if the asset is not found, or some other error.
Since I'm not 100% sure how parcel works and I don't know your parcel configuration and which parcel plugins you are using (I'm assuming parcel can be configured).
You could solve the problem by: manually copying the assets folder from src/ to dist/, than it should work. (atleast this work for me, when using this parcel template, to test the issue)
Maybe a parcel - plugin like parcel-plugin-static-files-copy, could also solve the problem, and/or be useful to keep the static files up-to-date.
I have managed to build my angular app out as a dev build. I haven't done it as a production build yet as it gives me a few errors and i just need to test the dev build.
The dev build process goes fine, no errors or anything. I then use the files from the dist folder in a nginx docker container to host the files.
The problem is nothing is displayed but a white page and in the console i get an error saying 'Uncaught TypeError: Cannot read property 'id' of undefined'. The full message below doesn't seem to point to anything i have written and i've spent several hours searching online but can't find anything on this problem.
I've tried a few different things such as running 'npx ivy-ngcc' which i read manually compiles some stuff. Is there anyway i can get more details on the error to see if it's something i have done?
UPDATE
So i have restored the line that i commented out in main.ts as mentioned in the comments below. I have also tried 'ng build --aot' as suggested which presents me with a series of errors that all seem to relate to devextreme components that are used. I find this strange as i started the project with the devextreme angular starter project from github.
i get messages such as:
'dx-scroll-view is not a valid HTML element'
'node_modules/devextreme-angular/ui/drawer.d.ts - error: appears in
the NgModule.imports of SideNavOuterToolbarModule, but could not be resolved to an NgModule class'
If you go in the devtools and click on Sources, "Don't pause on exceptions" and check "Pause on caught expecptions" and continue until you get the "id error" you will find what module the error is thrown. In my case was a third party library called 'ngx-card/ngx-card' and it's module was the cause of the error (CardModule). Hope this will help find at least the cause of the error
I managed to solve the problem by disabling ivy in the angular compilation options. As soon as i did that it worked building both dev and production versions and is now working perfectly within Nginx.
Thanks to everyone who offered help :)
In tsconfig.json of your Angular project, put this to disable Ivy, the new Angular template engine
{
...
"angularCompilerOptions": {
"enableIvy": false
}
}
Typically, if it's not something that you've written, it tends to be an issue w/ your implementation - i.e. "Visiting a food vendor and ordering a food item they don't provide".
I know it's not a specific answer, but ensuring that you have appropriately configured things in your app.module would be a good first step. Perhaps attempting to build w/ AOT will also give you some more verbose failures that stem from attempting to build out.
Hopefully this helps another poor soul.
To anyone using devextreme, make sure you update your version to at least 19.2.5
https://github.com/DevExpress/devextreme-angular/issues/975#issuecomment-580172291
Starting with version 19.2.5 we support the IVY compiler.
I had the same issue and fixed it by changing from
loadChildren: './app/page/account/account.module#AccountModule'
to
loadChildren: () =>
import('./app/page/account/account.module').then(
(m) => m.AccountModule
)
in app-router.module.ts
The root cause of your error is very likely to be a module that you needed to load explicitly but didn't, or a circular reference in your own modules. Rodrigo has a good answer but to be more specific, you need to find the registerNgModuleType function in Angular's core.js and set a conditional breakpoint on the first line. The condition should be !ngModuleType || !ngModuleType.ɵmod. (You can set a conditional breakpoint in most modern browsers by right-clicking the line number.)
Once you've paused execution just before the exception happens, you can look at the value of ngModuleType if it's not undefined, or walk up a frame or two in the scope and see what the value of imports was.
For me, this issue occurred while using Storybook.
The reason it happened was because of the way I was precompiling the node modules. I was doing:
Incorrect
ngcc --properties es2015 browser module main --first-only
Correct
ngcc
Using this approach fixed it
Is this the only SO question about listing drives ??
I'm on Windows, I'm a newbee in addon developement, I (currently) use Firefox Addon SDK with Node.js/jpm, but not Web Extensions (yet), nor the XPCOM/XUL thing. Seems like some are mixing the whole thing..
Correct me if I'm wrong, but as of May 2016, Web Extensions can't parse File System (otherwise I would be very happy to have access to the documentation allowing that too ^^.) And it appears that the Require chrome is now deprecated along with XUL/XPCOM things. As I guess everyone is pushed forward (looks like) to go Web Extensions (that is out of the scope of the subject), there's no way I would go Require chrome as I would have to drop it anyway next year...
So how do we list drives in Firefox Addon SDK without importing the deprecated libraries ?
My answer below, but would like to have a better option if any. The MDN page about is :
either talking about deprecated methods
or just showing you how to manipulate a directory you already know the whereabout.
Here is what I could do with the Addon SDK (or initially jetpack if I'm not mistaken), and yeah, that's a kind of hack because I don't know how to do it in a cleaner way, and I don't want to use Require Chrome.
Minimal version :
// index.js or main.js
// declare the io/file API :
var ioFile = require('sdk/io/file');
// array to make attempts :
let drivesIds = ["c", "d", "e", "f", "g", .... "z" ]; // hack isn't it ? :/
for (let i = 0; i < drivesIds.length; i++) {
let driveName = drivesIds[i] + ":\\";
if (ioFile.exists(driveName)) {
console.log(driveName + " is a drive and is ready !");
}
}
And you're done ! Okay, that was pretty obvious, but I failed to find that code anywhere I searched, or a code that does it better (again, without require('chrome'))
Extended versions can :
put the whole thing in a function getDrives() that returns array of drives objects like { path: "c:\\", hasChildren: true, etc: "etc" }. (check for child directories by combining ioFile.isFile() with ioFile.list() in a for loop that breaks the moment a subdir is encountered.
port the code to another addon module, with exports implementations
even encapsulates io functions and properties as members of a global object in a module (you can monitor filesystem changes like unplugged dir, store filesystem tree in memory, etc.)
All that making your index.js file lighter. Can this be adapted to other OS ? I don't know. The title is misleading while this is the only question about listing drives Addon SDK tagged.
Never ever try to build an entire drive tree, that would bring the computer to a halt, and fail at a point or another because io/file is limited to 250-260 chars in path length on Windows.
Security issues ! That's probably why it's undocumented, why WebExtensions disallows io operations ? But, I use that to inject a nice windows explorer (select a dir to save whatever you want in there, shortcutting save as or download dialogs). That's the only relevant reason why I use Firefox. I would go back to dotNet and reinvent the wheel with again lots of security holes if io is not flexible enough (or missing) in WE, or try Chrome instead (if no deprecated API in the next 10 years). Fact is, the moment you can automate io parsing, there will be security issues, but the moment you disallow that, Addon extensions is not the way to go with filesystem.
I'm new to both zombie and cucumber-js, so I apologize if I leave out anything important. If you need something I missed, please just ask.
I'm trying to get cucumber-js/zombie up and running on my XP box. I've had several issues along the way, but, with help, have gotten past those. Now I'm getting a new one. I have a test feature file with test files before it (basically pulled from the cucumber.js page on github). I installed both cucumber and zombie with a -g since it didn't see it otherwise. When I run the command cucumber-js features\myfeature.feature, I get the following error:
<projfolder>\features\support\world.js
this.browser = new zombie.Browser();
^
TypeError: undefined is not a function
(followed by a stacktrace)
I.am.lost.
I would greatly appreciate ANY help that ANYONE can give me on this.
node v0.8.17
cucumber v0.3.0
WinXP
don't know how to tell a version of zombie
I understand that this is coming quite late to the question, and the author may have moved on to something else. It is to help others, who may come to this question
Hopefully, your zombie is set to this -
var zombie=require("zombie");
Having clarified that, you need to change your step from
this.browser = new zombie.Browser();
to:
this.browser=new zombie();
and that should work fine.
There is a lot more to that, for more help check this API out.
I have been using firewatir for quite some time but thinking of switching to watir-webdriver. I was playing with my existing script and getting an error in the IRB when i use watir-webdriver
Here is my code from existing script
require 'rubygems'
require 'watir-webdriver'
Watir.options_file = 'classes/options.yml'
I am getting a following error
"undefined method `options_file=' for Watir:Module (NoMethodError)"
Can someone point me to the right direction since I am lost on this for couple of days.
Thanks
Watir != Watir-Webdriver. Watir-Webdriver does not support options.yml using options_file, or most likely the options you're setting in it (browser.speed, etc).
You can find a list of available methods, as well as a comparison list of the two here: http://jarib.github.com/watir-webdriver/doc/ .
If you post the options you are setting in that file we can help you determine if they're available in Watir-Webdriver, or how else you use them.
Thanks
You can read more about watir-webdriver at http://watirwebdriver.com/