did anybody tried to use yfiles html with webpack and es6?
// All yfiles modules return the yfiles namespace object
import yfiles from '../../lib/yfiles/graph-input';
import '../../lib/yfiles/graph-style-defaults';
import '../../lib/yfiles/layout-organic';
import '../../lib/yfiles/layout-misc';
import '../../lib/yfiles/graph-layout-bridge';
const graphControl = new yfiles.canvas.GraphControl.ForId('graph');
When I tried to instantiate a new graph I get the following error:
Uncaught TypeError: Cannot read property 'ForId' of undefined(…)
I digged around a little bit and I noticed that yfiles.canvas.GraphControl in undefined.
Do you have any idea why this is happening? Or a webpack example that I can use?
Thank you
With ReactJS I use
componentDidMount() {
const yfiles = require('../lib/yfiles/complete');
const styles = this.__createStyles(yfiles);
}
The yfiles is available and you can inject it in other functions. Loading of the library happens only when I am rendering that Component..meaning it behaves the same as import.
See the yeoman generator for yFiles apps - it can scaffold an es6 webpack powered application using yFiles for HTML:
npm install -g yo
npm install -g generator-yfiles-app
yo yfiles-app
Related
I built my Vue 3 project with Vite. I was in need of some plugins for my app. I have tried importing both of them. I have installed both with npm i vue-i18n vue-flag-icon and tried importing both of them independently.
// In main.js
import VueI18n from 'vue-i18n' // error
This gives the following error:
main.js:4 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue-i18n.js?v=4951897a' does not provide an export named 'default' (at main.js:4:8)
// In main.js
import FlagIcon from 'vue-flag-icon' // error
This crashes the app with the following error:
[[ERROR] Could not resolve "./icon/Flag"
node_modules/vue-flag-icon/components/index.js:1:17:
1 │ import Flag from './icon/Flag'
╵ ~~~~~~~~~~~~~
I have tried both of these in a non-Vite project with the standard vue-cli and it works flawlessly. Is there something I need to do for it to work with Vite?
I fixed the first import by using this line:
// In main.js
...
import {createI18n} from 'vue-i18n' // no error
// Whereafter I can use the function I need to set the plugin.
const i18n = createI18n({
locale: 'en', // set locale
fallbackLocale: 'nl', // set fallback locale
messages, // set locale messages
}
createApp(App).use(i18n)
...
I understand that I imported the function to make an instance of I18n instead of importing the whole object. But I do not understand why that works or why I would need to do that.
I also have no idea the second plugin doesn't work, I have heard that Vue 2 plugins don't work on Vue 3 and that plugin is 5 years old, so I assume it's made for Vue 2. Anyways, that doesn't explain why it works with vue-cli.
I do my development using modern JS (ES6) which means modules.
Although Three.js is available as an ES6 module. The line library - LineSegmentsGeometry, LineGeometry, LineSegments2, etc. - is not.
What are my options here?
You have a couple options.
First and foremost, edit the code.
You're welcome to modify the code, and so you could manually turn it into an ES6 module. You would want to remove any references of THREE, and export anything that was normally attached to that object. You'll also need to import any required core THREE.js components, like Mesh, Vector3, etc.
The way I prefer to do this is to copy the file I'm updating locally, and change references to it. For example:
// local_three_modules/LineSegments2.js
import { Mesh, Vector3, etc. } from "three"
let LineSegments2 = function ( geometry, material ) {
// ...
}
export default LineSegments2
// app.js
import { Mesh, Vector3, etc. } from "three"
import LineSegments2 from "./local_three_overrides/LineSegments2.js"
// and so on...
Your other option is to use a bundler with an export loader.
Webpack (and other bundlers, I'm just more familiar with Webpack) provides a exports-loader which can be used against specific files that don't export anything. For example, you can tell the exports-loader to export THREE from LineSegments2.js. To get webpack involved in this process, you need to tell it to use the loader on the file. You can do this through the webpack configuration, or inline in the code like this:
import THREE from "exports-loader?THREE!./node_modules/three/examples/js/lines/LineSegments2.js"
I want to publish a JS library and let anyone develop plugins for the library.
For example, here's a library I publish:
// awesome-lib.js
export class Library {
registerPlugin(plugin) {
...
}
}
export class PluginBase {
...
}
And a plugin implemented by other developer:
// third-party-plugin.js
import {PluginBase} from './awesome-lib';
export default MyPlugin extends PluginBase {
...
}
And the end-user's code would be something like this:
import {Library} from './awesome-lib';
import MyPlugin from './third-party-plugin';
const lib = new Library();
lib.registerPlugin(new MyPlugin());
However, there's a restriction that the end-user needs to deploy the awesome-lib.js and third-party-plugin in the same directory because the latter imports PluginBase from the awesome-lib.js in the same directory.
In Node.js, this kind of plugin is easy because its module discovery is managed by npm. But in browsers, things get difficult as its module discovery only relies on relative/absolute paths.
Is there any solution for this?
I cannot figure out how to get this code to transform to compatible code in Node.js v4 env: [].includes('anything')
Becuase this throws an error in Node.js v4 Error: includes is not a function...
Can anyone help me understand why babel does not transform .includes()? I have tried using babel-preset-es2015 and babel-preset-es2016 as well as the babel repl: Example babel repl code usage
You need to import babel-polyfill to use static methods like Array.from or Object.assign, instance methods like Array.prototype.includes.
If you don't want to modify globals, checkout the transform-runtime plugin. This means you won't be able to use the instance methods mentioned above like Array.prototype.includes.
I am following Joshua Morony's Getting Started with Google Maps in Ionic 2 video tutorial.
I want to use google maps in my application and i end up with a typescript error. this is a part of the
pages/home/home.ts file
initMap(){
let latLng= new google.maps.LatLng(6.929848, 79.857407);
let mapOpt={
center : latLng,
zoom : 15,
mapTypeId :google.maps.MapTypeId.ROADMAP
};
this.map= new google.maps.Map(this.mapElement.nativeElement,mapOpt);}
I tried npm install --save #types/googlemaps,
but it still gives me the same typescript error Typescript Error
Cannot find name 'google'
I solved it by installing:
$npm install #types/googlemaps --save-dev
To expand on the answer from #suraj, you should have:
declare var google;
outside of the class you are trying to use it in.
Just like in the Josh Morony video, I put it beneath the imports but before the class declaration and annotations (#Injectable() and so forth). I suppose it would still work if you put it above the imports or beneath the end of the class (and still outside of the class), if you were so inclined for whatever reason.
npm install --save-dev #types/googlemaps
import {} from '#types/googlemaps';
from this answer
Or
in your component.ts file of your page declare it like this
declare var google; before export class component {}
An easy way Angular 6+ available in typescript is:
You only have to add this line at the beginning (meaning
line 1, with nothing before) of your Typescript file :
/// <reference types="#types/googlemaps" />
And then
import {RemainingItems} from 'whicheverfolderyouwant';
Updated from
You have to install types:
npm install --save-dev #types/googlemaps
And in your Typescript file where you use the namespace 'google':
[Angular 6+] Add this line at the beginning:
/// <reference types="#types/googlemaps" />
[Angular 5-] Add this line:
import {} from '#types/googlemaps';
from this answer
Newer version!
#types/googlemaps has been deprecated, instead, you need to install a different library:
npm install #types/google.maps
and at the very first line in your file, you will need to add a triple-slash directive:
/// <reference types="#types/google.maps" />
No need to do some thing extra Just go into index.d.ts and paste this before declare namespace google.maps
declare module 'googlemaps';