alias({
"react": path.resolve(__dirname, 'node_modules/preact/dist/preact.js'),
"react-dom": path.resolve(__dirname, 'node_modules/preact-compat/dist/preact-compat.js'),
}),
import React, { Component } from 'react';
export default class App extends Component {
}
Throws: 'Component' is not exported by node_modules\preact\dist\preact.js
But this works
import React from 'react';
export default class App extends React.Component {
}
Related
I have installed angular material and then imported into my app-module
Now I want to use a selector of employees so I have this template in my component
<mat-form-field appearance="fill">
<mat-label>Empleado</mat-label>
<mat-select [(value)]="empleadoSeleccionado">
<mat-option [value]="empleado.empleadoID" *ngFor="let empleado of listaEmpleados">{{empleado.nombre}}</mat-option>
</mat-select>
In material module I have imported MatSelectModule and MatFormFielModule
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MatSelectModule } from '#angular/material/select';
import { MatFormFieldModule } from '#angular/material/form-field';
#NgModule({
declarations: [],
imports: [
CommonModule,
MatSelectModule,
MatFormFieldModule,
]
})
export class MaterialModule { }
But I get always this same error NG8001: 'mat-form-field' is not a known element:
Any idea, please?
Thanks
The error was in Material Module where I need export the array not import
Thanks
I'm trying to import /app/javascript/components/Videochat.js into app/javascript/packs/index.js but getting the error module not found Can't resolve Videochat ...
index.js:
import React from 'react'
import ReactDom from 'react-dom'
import Videochat from '../components/Videochat'
document.addEventListener('DOMContentLoaded', () => {
ReactDom.render(
<Videochat/>,
document.body.appendChild(document.createElement('div')),
)
})
Videochat.js
import React, { Component } from 'react'
import { BrowserRouter, Route, Switch } from "react-router-dom"
import CreateRoom from "./routes/CreateRoom"
import Room from "./routes/Room"
class Videochat extends React.Component {
render () {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component={CreateRoom} />
<Route path="/room/:roomID" component={Room} />
</Switch>
</BrowserRouter>
)
}
}
export default Videochat
I solved this by changing the component name from Videochat to App
It seems the presence of App.js in the components folder is of great significance In my case I was importing the Videochat component but not the App component even though it was present
So i am new to react native and JS in general, i have a huge background in native mobile development and i want to know more about Web Apps. So i try to begin with react native to experience that.
I wanted to do a side menu using createDrawerNavigator, so i created the following component :
// code for the menu
import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';
const App = createDrawerNavigator({
HomeScreen: {
screen: HomeScreen
},
LinksScreen: {
screen: LinksScreen
},
SettingsScreen: {
screen: SettingsScreen
}
},
{
drawerWidth: 300
});
export default createAppContainer(App);
// HomeScreen.js
import React from 'react';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
Dimensions,
} from 'react-native';
import { WebBrowser } from 'expo';
import { DrawerNavigator } from 'react-native-navigation';
import { MonoText } from '../components/StyledText';
import { createStackNavigator, createDrawerNavigator, createAppContainer, DrawerActions } from "react-navigation";
import Router from './MenuNavigator';
export default class HomeScreen extends React.Component {
static navigationOptions = {
header: 'Vapeself 2',
};
render() {
const App = createDrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
const MyApp = createAppContainer(App);
this.props.navigation.dispatch(DrawerActions.openDrawer());
return (
<Router/>
);
}
// LinkScreen.js
import React from 'react';
import { ScrollView, StyleSheet } from 'react-native';
import { ExpoLinksView } from '#expo/samples';
export default class LinksScreen extends React.Component {
static navigationOptions = {
title: 'Links',
};
render() {
return (
<ScrollView style={styles.container}>
{/* Go ahead and delete ExpoLinksView and replace it with your
* content, we just wanted to provide you with some helpful links */}
<ExpoLinksView />
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 15,
backgroundColor: '#fff',
},
});
// SettingsScreen.js
import React from 'react';
import { ExpoConfigView } from '#expo/samples';
export default class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'app.json',
};
render() {
/* Go ahead and delete ExpoConfigView and replace it with your
* content, we just wanted to give you a quick view of your config */
return <ExpoConfigView />;
}
}
I don't know what happened because the code doesn't work, and i have this kind of error The component for route 'HomeScreen' must be a React component . But the thing is that its actually work with a TabNavigator. So i really don't understand.
Thank you in advance for the help.
I use CoreUI (angular 6 version) in order to create a simple panel.
I need to have a datepicker, but cannot manage to find how to do it.
Angular material might be a nice solution, but I don manage to include it - looks like there are some basic conflicts.
Any simple solution?
you install a date-time-picker package:
npm install --save angular-bootstrap-datetimepicker bootstrap moment open-iconic
// added the following to app.module.ts
import { AppComponent } from './app.component';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { NgModule } from '#angular/core';
import { DlDateTimePickerDateModule } from 'angular-bootstrap-datetimepicker';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
DlDateTimePickerDateModule,
],
providers: [FormsModule],
bootstrap: [AppComponent]
})
export class AppModule { }
//added the following to app.component.html
<dl-date-time-picker
startView="day"
maxView="year"
minView="minute"
minuteStep="5"
[(ngModel)]="selectedDate"
>
</dl-date-time-picker>
// added following to ./src/styles.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~open-iconic/font/css/open-iconic-bootstrap.css';
You can add ngx-bootstrap, it has BootStrap datepicker compatible with Bootstrap V3 & V4.
You can check it here: https://valor-software.com/ngx-bootstrap/#/datepicker
To install ngx-bootstrap, run this command
ng add ngx-bootstrap --component datepicker
Then add the following code to your AppModule
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
#NgModule({
imports: [BsDatepickerModule.forRoot(),...]
})
export class AppModule(){}
Sample usage (at the template):
<input type="text" placeholder="Datepicker" class="form-control" bsDatepicker>
I've installed draft-js using npm and yarn. The installation seems to have been completed fine. Below is the code for my react component:
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: EditorState.createEmpty(),
}
}
onChange = (editorState) => {
this.setState({
editorState,
});
}
render() {
return (
<div>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
/>
</div>
);
}
}
export default MyEditor;
Trying to render it in my view using react-rails gem helper as below:
<%= react_component("MyEditor") %>
Still don't see anything in my view. Don't see any errors in the browser developer console or rails console. Using Webpacker for packaging.
Any suggestions out there?