Trying to dynamically import ("lazy-load") d3 as module from within my existing module to make it self-reliant, as per the es6 syntactic feature (https://developers.google.com/web/updates/2017/11/dynamic-import#dynamic). The source at https://d3js.org/d3.v5.min.js includes no "export" statement, only a literal function call (
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(...)
), yet it does get retrieved, only it doesn't receive its parameters it would expect from a normal <script src="https://d3js.org/d3.v5.min.js"/> tag import. How do I manually provide them, or how am I rather supposed to do this? thanks!
import('https://d3js.org/d3.v5.min.js').then(function(d3){d3.json()})
d3.v5.min.js:2 Uncaught (in promise) TypeError: Cannot read property 'd3' of undefined
at d3.v5.min.js:2
My first guess was wrong...
This error happens because this build of d3 is trying to read this.d3 (the function argument that receives this is called global, or t in the minified version), but this is undefined in a module context (which a script runs in when imported).
It is simply a bug in whatever build tool is used to produce this d3 build. It should use self (or perhaps this || self).
rollup for example used to have this bug but it was fixed a while ago.
Regardless, even after d3 is fixed, you won't get anything in .then(), it will set the d3 global. (Unless they release an ES module build.)
Related
I need to calculate the center (or rather the visible/inner centroid - this is a problem with U-shaped polygons) of a complex polygon, so i found this library called "polylabel" by mapbox on github.
Link: https://github.com/mapbox/polylabel
The problem is that there aren't any instructions on how to implement this on a local html file, where i stored my geojson object inside the javascript section.
I tried making a new js file, copying the code found on github inside of it and then importing it into the hmtl file but i get this error:
polylabel.js:3 Uncaught ReferenceError: require is not defined
at polylabel.js:3:13
(anonymous) # polylabel.js:3
polylabel.js:35 Uncaught TypeError: Queue is not a constructor
at polylabel (polylabel.js:35:21)
at parceleTest.html:85:33
this leads me to believe that polylabel is a node.js function so it is supposed to run on the server side, but i'm still very new to this and very confused, can someone tell me how to call this function in my local javascript?
i also tried using this version:
<script src="https://bundle.run/#mapbox/polylabel#1.0.2"></script>
but it doesn't work or i'm missing something.
Thanks.
In Webpack 5, module.reasons was removed (see: https://webpack.js.org/blog/2020-10-10-webpack-5-release/). From what I have been able to find, the documentation doesn't list an alternative. Documentation for the module graph is also pretty scarce.
We have build code that currently checks module.reasons inside of the splitChunksPlugin test() function. That code breaks in Webpack 5.
Does anyone know what the replacement for module.reasons is? I've tried looking stuff up in the module graph but I don't think the current module has been added yet because it is always undefined when calling getModule() on the graph.
I'm getting this error when try to create a map:
I'm currently using version "datamaps": "^0.5.8", this is directly from my package.json. I also checked the package.json in the actual package to see where main was pointing:
I found a related issue, maybe even the same issue here:
https://github.com/markmarkoh/datamaps/issues/259
Problem is that no one ever said what the answer was, one person mentioned that only a specific country js file was being loaded but I checked and datamaps.all.js is being loaded.
This is to be attributed to the new modularity of D3 v4, which made it necessary to flatten namespaces:
However, there is one unavoidable consequence of adopting ES6 modules: every symbol in D3 4.0 now shares a flat namespace rather than the nested one of D3 3.x.
For your code this means that some references using the d3-geo module are invalid because they refer to properties which are no longer available in v4:
Geographies (d3-geo)
d3.geo.albersUsa ↦ d3.geoAlbersUsa
Because datamaps has defined a dependency on D3 like ^3.5.6 this will include D3 v4. However, because of the above mentioned changes in the namespace you will have to use a D3 v3 instead.
I am new to GWT and trying to create a small application. I am currently assembling a small framework for the app, a generic layout handler, etc. This may not be the last problem I will bump into, but I just cannot find any solution to this on google.
So I have a class type, which return me Composites. Also, I have another one, which stores these kind of classes in Stack (I also tried Vector, I thought maybe GWT has issues with it). It didn't matter. If I call the .clear method on the Stack, I have the aforementioned error in the inspection menu of Chrome:
Uncaught TypeError: Cannot read property 'clear_31_g$' of undefined
Like if GWT does not know, how to convert this method to javascript or what? Do you know what is the problem here?
eclipse neon, Java 7 setting on Java SDK 1.8 (maybe this?), GWT 2.7.0 and App Engine 1.9.34
Thanks!
edit1: I also found the page, which contains the emulated JRE classes' list (http://www.gwtproject.org/doc/latest/RefJreEmulation.html) with all supported methods. Now I see, that clear is not on that list for Stack, but empty does and that gives me the same error. :-/
This error simply means that you try to call the clear() method on a null object (the object is undefined).
The error message itself is not as clear as it could be. First, it's not always about reading a property but also about calling a method. Second, remember that you run a compiled to javascript code and the property (or method) name may differ from the original one - it has something like _31_g$ added in the runtime.
I am writing one Angularjs app. I am using MEAN stack with Grunt. I have written one directive that uses d3 library. I have d3.js file in the following location:
/client/app/lib/d3.js
The file is automatically included in the index.html and it runs fine in development mode. But when I run it in production mode I get the following error:
Uncaught ReferenceError: d3 is not defined
Then I did some R&D and found that if any java script file is included with the following syntax it gives same error:
!function foo() {
var myd3 = {};
...
...
...
this.myd3 = myd3;
}();
The above code will give error: Uncaught ReferenceError: myd3 is not defined
If you don't return anything from a function explicitly, undefined is returned. Now the ! makes it true. That's all.
I think the problem is execution of scripts. Are you sure that d3 is loaded first before it is utilized anywhere in your project ? Make sure <script src='d3.js'></script> is present before your code scripts.
Generally, for production grade code, concatenation of scripts is done. Make sure that the concatenation is done in order (d3, your-app-scripts).