I'm having terrible problems when trying to import an external JS project into my meteor folder. This is the project I'll like to use: http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
As you can see, it is necessary to import two scripts. The first one is JQuery, and that was easily solved by adding it with meteor add jquery.
The problem came out when I tried to import the second script. I'm not sure how I can use it because, as far as I know, on meteor you cannot just import your script into the head section. For that reason, I've created a new template that is rendered and I put the code in there, but nothing happenend. Later on I've created an event that calls the JS when the image is clicked but without any success.
My question is, Which is the correct way to import a local JS code in meteor as in HTML is done with:
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
Since jquery-imagemapster is available as an npm package you can do:
$ npm install jquery-imagemapster
In your project directory and make it available to your project that way.
In early versions of Meteor packages were only available via atmosphere and $ meteor add. Later they added npm support and all npm packages became available.
Prefix npm installs with “meteor” -> “meteor npm install —save ‘js file’. Initializing will be the same as it would be in any other front end environment as will importing it. If you’re having trouble after that, check for it’s existance in your browser console and work from there using its built in properties and methods.
Related
I'm building a simple Electron app for MacOS (using React as the frontend). The purpose of the app was to make executing certain terminal commands a lot easier (using child_process.spawn. Primarily I am interested in using the sfdx Salesforce CLI commands.
When I run the app in dev, everything works fine. However when I package the app, the PATH variable gets changed and I'm no longer able to locate the sfdx library. (*note it is still able to find git commands though).
I found a very similar issue here and a bug report in GitHub, both of which recommend the use of the fix-path package. This is where I run into another issue. According to the docs, I should import the package like this:
import fixPath from 'fix-path';
However when I do that inside of my electron.js file I get this error: SyntaxError: Cannot use import statement outside a module. I've seen other resources that use require to bring in the package:
const fixPath = require('fix-path');
But again, when I do that I get this error require() of ES Module not supported.
I tried adding "type": "module" to my package.json file, but that breaks my app as well.
I feel like there is something simple that I am missing here, but can't seem to figure out. I believe that if I could import and use the fix-path package, then this would solve my problems. But if that isn't possible, does anyone know of a way for me to fix the path in my app so that it works in prod?
Thank you in advance!
Some extra details:
The two dependencies I check for are git and sfdx. The following image shows where both of those live on my machine:
And this is the response to the same commands within the packages asar file:
I found a workaround, it looks like fix-path made a move to ESM during the last release. Because I am using CJS modules I just needed to install version 3 of fix-path by running npm install fix-path#3.0.0 --save
I am trying to use the save-svg-as-png library with my angular 7 project.
However, I cannot manage to get it to work. I have installed the library using
npm install --save save-svg-as-png
and I can see the library under node_modules.
Unfortunately, the library is an old-style javascript library and I do not know what I need to do in order to have access to it in my typescript components.
The readme refers to the Typings library for which type definitions apparently exist. However, the Typings page mentions that it is deprecated for TypeScript 2, so I did not pursue this.
Apparently there is #types/save-svg-as-png for native Angular 2+ support, but when I try to install it with
npm install --save #types/save-svg-as-png
the library cannot be found (npm ERR! code 404).
I googled some more and came across this issue on github where somebody has apparently got it working with Angular 2 by including it in the angular-cli.js file, but with the changes to Angular, this file no longer exists in version 7 and I do not know how that would need to be done nowadays.
I've also found the following article on how to integrate javascript libraries into Angular 2+, but most of it relies on #types being available (which they are not, see above) and only has a brief section on how to supply your own typings.d.ts file but after playing around for quite a while, I did not get any further. Is there a more detailed explanation showing how to use this approach?
I've also found this article on stackoverflow on how to integrate IIFE based libraries into typescript apps but did not get it working.
I've added the following line to my index.html file
<script type="javascript" src="node_modules/save-svg-as-png/lib/saveSvgAsPng.js"></script>
but how do I now access the functions provided by the library? If I understood things correctly, they should now be available on the window object, but that does not seem to be the case.
I've also read this stackoverflow question on how to use non typescript libraries but one of my problems is that I don't even know into what namespace save-svg-as-png is being imported.
Has anyone managed to get this library working with an Angular 6/7 project and could give a detailed explanation on all steps required?
I'll try to summarise the solution as suggested by Hypenate:
Install the library:
npm install --save save-svg-as-png
At the top of my typescript file/angular component:
import * as svg from 'save-svg-as-png';
Using it in my angular component:
svg.svgAsPngUri(document.getElementById('idOfMySvgGraphic'), {}, (uri) => {
console.log('png base 64 encoded', uri);
});
All exported functions are available on svg.
Also, we can use the saveSvgAsPng.js file as an external js file instead of installing that package
Add saveSvgAsPng.js file into src/assets/js
And add this JavaScript file in scripts array in angular.json file
"scripts": [ "src/assets/js/saveSvgAsPng.js" ]
declare saveSvgAsPng in your component.ts
declare const saveSvgAsPng: any;
And call that when you need to download.
saveSVG(): void{ saveSvgAsPng(document.getElementById('id'), fileName); }
Make sure to restart your angular app (ng serve) if you change scripts array or declared name
I am creating Vue spa and integrating CKEditor here using this package I tried to do just like the tutorial by adding this to my app.js
import Vue from 'vue'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic'
import documentEditor from '#ckeditor/ckeditor5-build-decoupled-document'
import VueCkeditor from 'vue-ckeditor5'
const options = {
editors: {
classic: ClassicEditor,
document: documentEditor
},
name: 'ckeditor'
}
Vue.use(VueCkeditor.plugin, options);
and to make it work I doing NPM install to those 2 editors (ClassicEditor and documentEditor)
npm install --save #ckeditor/ckeditor5-build-decoupled-document
and since I also need CKEditor but with much more simpler or to being said without image upload features then I for the ckeditor5 build classic and remove those plugin from there and then NPM build and then I am doing this on my Vue spa
npm install --save #ckeditor/ckeditor5-build-classic
after that, I open #ckeditor folder on node_modules and find the ckeditor5-build-classic folder and replace build folder with my custom version of CKEditor build classic
but then I get this error
ckeditor-version-collision: The global CKEDITOR_VERSION constant has already been set.
even though the editor still working, but I don't like the idea my console showing error
This problem is precisely described in docs, you can't run two editors from different builds on the same page (or mixing builds and source code).
tl;dr; The easiest way to enable running two different editors on the same site is to create a custom build that will export these two builds. This is described in the above docs.
The behavior has changed ~3 months ago and the error has been added to such situation to prevent bugs and big size of the bundle. Therefore the author of the https://github.com/igorxut/vue-ckeditor5 can just update the readme to follow the latest version's API.
I recommend to create "super build".
For example you can clone repository of classic build and change 3 files.
Check my gits.
I updated example1 for using this build.
I'm building an app with Meteor 1.3, and I need Leaflet and leaflet-measure. I've installed both with NPM, and import them to my file with import. I have a simple template with a map-div, and a corresponding JS-file with a onRendered-callback. It creates my Leaflet-map and it works.
The problem starts when trying to add Leaflet-measure:
Using NPM and importing tells me that a method in fs is missing, but installing and importing that as well does not help.
I've tried adding the dist-files to a lib-folder in client and importing them, but I get an error that indicates that the code hasn't been run:
How can I make a plugin like this work with Meteor?
I'm using node.js and socket.io and doing a server/client thing. On my Server, is since its' not on a webpage, is there a way I can load the latest file (or latest jQuery?) so I can use jQuery functions inside my Server js file.
I tried doing npm install jquery then drag the jquery folder into my node_modules folder onto my website. Then at he top of my file I put var $ = require('jQuery'); and then I run it and I get the error Cannot find module 'location'
Thanks
I was getting this same issue. I created a small test applications (with express), installed jquery afresh and things started working.
Checking my initial project a couple of changes seemed significant
I did an npm unisntall for jquery and jsdom
I did an npm install jquery (note, lowercase)
I changed my require('jQuery') to be require('jquery') (again, lowercase)
I think the significant part was removing and reinstalling jsdom and jquery but the others then were required to get things working again.