Trying to implement react-lealfet-draw with react-leaflet version 3.0.0.
it throws an error
/node_modules/react-leaflet-draw/dist/esm/EditControl.js
Attempted import error: 'MapControl' is not exported from 'react-leaflet'.
import "./styles/leaflet.css";
import "leaflet/dist/leaflet.css";
import "leaflet-draw/dist/leaflet.draw.css";
import "leaflet-draw";
import L from "leaflet";
import "leaflet-splitmap";
import {MapConatiner, TileLayer} from 'react-leaflet';
import {EditControl} from 'react-leaflet-draw';
is there any way to implement leaflet-draw features with react-leaflet V3.0.0 ?
Related
I am learning to use echarts.js for my project.
I would like to know to use the extension echarts-gl (for 3D graphics) with ES modules. The documentation is very succinct and I am just a noobie.
In fact, I am trying to use echarts-gl together with the echarts-for-vue, anyone have tried it?
My main.js looks like this:
import Vue from 'vue';
import App from './App.vue';
import { plugin } from 'echarts-for-vue';
import * as echarts from 'echarts/esm/echarts';
import 'echarts/esm/chart/line';
import 'echarts/esm/chart/bar';
import 'echarts/esm/component/title';
import 'echarts/esm/component/tooltip';
import 'echarts/esm/component/legend';
import 'echarts/esm/component/toolbox';
import 'echarts/esm/component/polar';
import 'echarts/esm/component/visualMap';
// require('echarts-gl/lib/echarts-gl');
// import '../assets/echarts-gl.js';
// import 'echarts-gl/lib/component/grid3D';
// import 'echarts-gl/lib/chart/surface';
Vue.config.productionTip = false;
Vue.use(plugin, { echarts });
new Vue({
render: (h) => h(App),
}).$mount('#app');
I don't know where or how to include the imports for echarts-gl. Do I need webpack configuration?
Sorry about my lack of expertise.
Thanks!
For me it worked when I just imported it like this:
import 'echarts';
import 'echarts-gl';
Also make sure to use a compatible version of echarts-gl with echarts.
(
"echarts": "4.9.0",
"echarts-gl": "1.1.2",
"vue-echarts": "4.1.0",
)
I would like to import a MaterialUI class, without importing the component itself.
Precisely, I'd need the MuiInputBase-root styles. But the class is only defined if InputBase is imported, so solely doing className="MuiInputBase-root" does not work.
Thanks!
You can import the component class like this
import inputBaseClasses from '#mui/material';
// Reference the class in Styled Components:
[`& .${inputBaseClasses.root}`]: {
color: 'black',
}
https://mui.com/base/getting-started/customization/#applying-custom-css-rules
I imported featherlight like so:
import featherlight from 'featherlight';
and this works, but when I try to do the same with featherlightGallery:
import featherlightGallery from 'featherlight';
or
import { featherlight, featherlightGallery } from 'featherlight';
I get:
$(...).featherlightGallery is not a function
I looked it up but featherlightGallery is UDM: https://github.com/noelboss/featherlight/pull/377#issuecomment-455854609
As written in the docs here, to import FileOpener you should place
import { FileOpener } from "#ionic-native/file-opener";
in you app.module.ts, but always get "Invalid provider in ngModule..."
Apparently the right path to import FileOpener is
import { FileOpener } from "#ionic-native/file-opener/ngx";
That's looking in the plugin source file
I'm trying to use a custom component called UserCardComponent in two different pages in my ionic v3 app.
I followed this answer (the one with 26 votes) which says to declare custom components in "a specific page's module.ts file". Custom component in ionic v3
So I firstly declared the component in my HomePageModule and was able to use it fine within the home.html.
home.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardComponent } from '../../components/user-card/user-card';
#NgModule({
declarations: [
HomePage,
UserCardComponent
],
imports: [
IonicPageModule.forChild(HomePage)
],
})
export class HomePageModule {}
I then tried to declare it (in the same way) in ContactsPageModule to use in contacts.html however I get the following error:
Type UserCardComponent is part of the declarations of 2 modules: HomePageModule and ContactsPageModule!
Please consider moving UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule.
You can also create a new NgModule that exports and includes UserCardComponent then import that NgModule in HomePageModule and ContactsPageModule
When I try to just declare the UserCardComponent in the app.module.ts file I get a Template parse error and the custom component won't work in any pages.
Can you advise me on what to do? The error says to move the "UserCardComponent to a higher module that imports HomePageModule and ContactsPageModule. "
Can you tell me how I would do this? I'm new to ionic. Thanks
If you declare the UserCardComponent in the HomePageModule, you only need to import the HomePageModule in the ContactsPageModule but it introduces dirty dependency between theses modules.
A better way is to declare UserCardComponent in a specific module UserCardModule and then to import this specific module in HomePageModule and in ContactsPageModule.
user-card.module.ts
import { NgModule } from '#angular/core';
import { UserCardComponent } from './user-card';
#NgModule({
declarations: [
UserCardComponent
]
})
export class UserCardModule {}
home.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { UserCardModule } from '../../components/user-card/user-card.module';
#NgModule({
declarations: [
HomePage
],
imports: [
IonicPageModule.forChild(HomePage),
UserCardModule
],
})
export class HomePageModule {}