In my application I want to use ClarityIcons.add() to add a custom icon. However I get the following error:
index.js:402 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
at Object../src/clr-icons/index.ts (http://localhost:4200/vendor.js:84958:20)
at __webpack_require__ (http://localhost:4200/vendor.js:84586:30)
at ./src/clr-icons/clr-icons-api.ts.Object.defineProperty.value (http://localhost:4200/vendor.js:84635:18)
at http://localhost:4200/vendor.js:84638:10
at webpackUniversalModuleDefinition (http://localhost:4200/vendor.js:84564:20)
at Object../node_modules/#clr/icons/index.js (http://localhost:4200/vendor.js:84566:3)
at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
at Module../src/app/core/components/core/core.component.ts (http://localhost:4200/main.js:1528:68)
at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
at Module../src/app/app.module.ts (http://localhost:4200/main.js:618:94)
I tried reproducing it in a stackblitz but there it worked fine. In other questions I read about deleting the package-lock.json and then reinstalling node modules. I tried this but I still have the same result. Any idea where the error could be?
It looks like you are somehow including Clarity Icons twice in your app. Typically, this can happen if you include the pre-compiled clr-icons.min.js and also bundle the icons library as part of your own JS bundle.
Since you call ClarityIcons.add(), I'm guessing you import { ClarityIcons } from "#clr/icons";. If you do this, you want to remove clr-icons.min.js from your index.html and follow the "Load Clarity Icons API and icon sets in Typescript" section in the documentation: https://vmware.github.io/clarity/icons/clarity-icons
Related
I'm currently developing two different React applications which use Deck.GL to render two maps, each with a different type of layer.
When using them as standalone they both work perfectly, however, when the two get mounted in the same parent application, the second map I visit crashes (due to loading the library two times or so it seems).
Given that, I added Deck.GL to Webpack externals of both applications and added an unpkg link to the parent application. However, this gives an "Unable to resolve 'h3'" error, so I also put h3-js in externals but it keeps searching for it on Deck.GL javascript.
My next step was to import from the #deck.gl/core, #deck.gl/react, #deck.gl/layers, etc instead and only load what is needed, but I got a similar error as it was searching for 'luma' in #deck.gl/layers.
So, how do I correctly define Deck.GL as a Webpack external?
Edit:
The error I get when adding deck.gl to externals:
Unable to resolve bare specifier "h3" from https://unpkg.com/deck.gl#7.3.6/dist.min.js
The errors when I navigate to the second map which uses different layers:
It seems this error is launched when using Angular routing to navigate through the page, if I use simple <a href> they work perfectly because it reloads the whole page and doesn't load two instances of the library.
The problem was caused by incorrect webpack externals configurations and mistakes selecting what bundles to import from unpkg/jsdelivr. If anyone runs into the same problem just look at Deck's own website:
config.externals = {
'highlight.js': 'hljs',
'h3-js': 'h3',
'deck.gl': 'deck',
'#deck.gl/aggregation-layers': 'deck',
'#deck.gl/core': 'deck',
'#deck.gl/extensions': 'deck',
'#deck.gl/geo-layers': 'deck',
'#deck.gl/layers': 'deck',
'#deck.gl/mesh-layers': 'deck',
'#loaders.gl/core': 'loaders',
'#luma.gl/core': 'luma',
'mapbox-gl': 'mapboxgl'
};
https://github.com/uber/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/webpack.config.js#L128-L141
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<script src="https://unpkg.com/h3-js"></script>
<script src="https://bundle.run/s2-geometry#1.2.10"></script>
<script src="https://unpkg.com/deck.gl#^8.0.0/dist.min.js"></script>
https://github.com/uber/deck.gl/blob/94bad4bb209a5da0686fb03f107e86b18199c108/website/src/static/index-prod.html#L17-L19
tried dozens of workarounds now and I am really not able to get it to work.
My Setup is a clean "reactGo"-App ( https://github.com/reactGo/reactGo ) which has Webpack2 included.
Now i am trying to bring react-calendar-timeline ( https://github.com/namespace-ee/react-calendar-timeline ) to life.
Right after doing this, the first error you got is:
D:\Users\Documents\sandbox\reactGo\node_modules\react-calendar-timeline\modules\lib\Timeline.css:1
(function (exports, require, module, __filename, __dirname) { .react-calendar-timeline * { SyntaxError: Unexpected token .
In the reactGo-Repository you can see the full Webpack configuration. As I told, I tried several workarounds, but everything returns in other error-messages.
If I exclude the required css in the calendar-timeline.js directly and import it in my own jsx file, it works of course. But this is a really ugly workaround and I want to collaborate with other developers. Can't told them we have to exlude a require out of an external module.
Can you told me what is going wrong here? I'm out of ideas.
Thanks!
I'm trying to make this JS Bin example https://jsbin.com/pineyec/edit?html,console,output works but I've got the following error :
"ReferenceError: require is not defined
at eval (eval at <anonymous> (https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js:4:28099), <anonymous>:8:14) ...blablaba...
Don't know if it's directly related to React though... Anyone ?
Thanks.
Compare to https://gist.github.com/zvweiss/66517767889a7ed9895a
You are not able to use import in the browser, look to the top of that gist to see how he pulls the bits you need out of the Globals that are created.
I am migrating an application from Angular1 to Angular2, in which I used the svg.js library to draw an SVG. Some elements of the SVG contained "ng-click" directives, that I made the SVG library print to the final SVG.
That worked alright in Angular1, however, now the directive is called "(click)" and everything breaks. I traced the SVG sources and found that the following call
this.node.setAttribute(attr, value.toString())
results in the following error message:
VM22161:1 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name.(…)
Any ideas to solve that problem? Patching the SVG source would be ok for me, if there's no other way.
A valid and quick workaround is to use the binding syntax of Angular2, that allows to use "on-click" instead of "(click)".
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('');