I am building a small chat app with React and Flux via a tutorial, however the tutorial seems to be out of date as it is using a method from Alt (used with Flux) that throws the following error:
Cannot resolve module 'alt/utils/connectToStores'
...which I believe is coming from the line with #connectToStores. Below is my code. I looked into this issue and it seems like Alt was broken up into smaller packages, one of them being Alt-React (which is stumping me completely). My question is, how can I use this method in an up-to-date manner?
import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';
import MessageBox from './MessageBox.jsx';
import Login from './Login.jsx';
import ChannelList from './ChannelList.jsx';
import connectToStores from 'alt/utils/connectToStores';
import ChatStore from '../stores/ChatStore';
// Material UI
import * as Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
#connectToStores // es7 decorator with deprecated 'connectToStores'
class App extends React.Component {
constructor() {
super();
}
static getStores() {
return [ChatStore];
}
static getPropsFromStores() {
return ChatStore.getState();
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: getMuiTheme({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
})
};
}
render() {
var view = <Login />;
if (this.props.user) {
view = (
<div>
<div id="content-container">
<ChannelList />
<MessageList />
</div>
<MessageBox />
</div>
);
}
return (
<div>
<AppBar title="Chat App"/>
{{view}}
</div>
);
}
}
export default App;
The Alt Utils libraries have all been moved into a separate package at https://github.com/altjs/utils
Once installed
npm i --save-dev alt-utils
You can access the same libraries as the tutorial requires using:
import connectToStores from 'alt-utils/lib/connectToStores';
import {decorate, bind, datasource} from 'alt-utils/lib/decorators';
Related
I have this error when i import my component
Module not found: Can't resolve '../src/components/Menu' in '/Users/userName/Documents/folder/repository/Project/src/pages/Home'
src
components
Menu
Menu.css
Menu.js
pages
Home.css
Home.js
Menu.js
import React, { Component } from 'react';
import './Menu.css';
class Menu extends Component {
render() {
return (
<div className="menu">
<h1>Je suis un Menu</h1>
</div>
);
}
}
export default Menu;
Home.js
import React, { Component } from 'react';
import './Home.css';
import Menu from './../components/Menu';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
msg: 'Hello from the state of Home'
}
}
render() {
return (
<div className="home">
<h1 className="text">Welcome to the Home Page</h1>
<p>{this.state.msg}</p>
<Menu/>
</div>
);
}
}
export default Home;
You need to import from one level deeper:
import Menu from './../components/Menu/Menu';
You have a folder called Menu and the file you want is inside called Menu.js.
That's because '../src/components/Menu' doesn't point to your file.
Either use the path
'../src/components/Menu/Menu'
Or, if you want to use your original path, rename your Menu.js file to index.js.
In my experience the latter tends to be more popular due to it's inclusion in the hugely useful Airbnb JSX style guide.
i just started a reactJS project and when i decided to use material-ui it statrted throwing a lot of errors like this one:
bundle.js:12441 Warning: Failed Context Types: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them. Read more at fb.me/use-check-prop-types Check the render method of CardHeader.
my App component looks like this:
import React from 'react';
import PropTypes from 'prop-types';
import NavBar from './common/NavBar';
import Logo from './common/Logo';
import MuiThemeProvider from 'material-ui/styles/MuithemeProvider';
class App extends React.Component {
render() {
return (
<MuiThemeProvider>
<div className="container-fluid">
<Logo />
<NavBar />
{this.props.children}
</div>
</MuiThemeProvider>
);
}
}
App.PropTypes = {
children: PropTypes.object.isRequired
};
export default App;
material-ui version: 0.20.0
react version: 15.0.2
Try:
App.propTypes = {
children: PropTypes.object.isRequired
};
While learning react JS from official documentation page, everything is working fine so far, now when I tried to export one method from another page in another page as below ( file name on top of each snippet)
src/Greeting.js
function UserGreeting() {
return <h1>Welcome back!</h1>;
}
function GuestGreeting() {
return <h1>Please sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedin;
if(isLoggedIn) {
return <UserGreeting />;
} else {
return <GuestGreeting />;
}
}
export default Greeting;
src/LoginControl.js
import React from 'react';
import Greeting from 'Greeting';
function LoginButton(props) {
return <button onClick={props.onClick}>Login</button>;
}
function LogoutButton(props) {
return <button onClick={props.onClick}>Logout</button>;
}
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false})
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if(isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
}
}
export default LoginControl;
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import LoginControl from './LoginControl';
ReactDOM.render(
<LoginControl />,
document.getElementById('login')
);
ReactDOM.render(<App />, document.getElementById('root'));
public/index.html
<body>
<div id="root"></div>
<div id="login"></div>
</body>
but it gives below error in the browser?
./src/LoginControl.js Module not found: Can't resolve 'Greeting' in '/opt/rqt/src'
Why am I getting this error?
Do I need to create a class in Greeting.js instead of direct export a function?
You are getting that error because you are importing the module incorrectly.
If you do:
import Greeting from 'Greeting';
Your compiler will look for the file in node_modules (and possibly other directories, depending on your configuration).
Since it's in the same directory, you have to import it as:
import Greeting from './Greeting';
Basically ./ means that the file exists at the current working directory.
Another Possible Solution
FWIW I had this issue when I was importing from a single library using different import syntax approaches on more than one line in my script.
Why did this happen to me?
This problem happened because I would import like this by hand:
import { Stuff, Things } from 'some-library', then as I was coding, VS Code would automatically bring in new imports. So, I'd end up with this in my script:
import { Stuff, Things } from 'some-library'
...
import Code from 'some-library/Code'
For some reason, when this occurs, this error would get thrown.
Tech Stack
Next.js
Material UI
There is code of my component
import React from 'react';
import SearchContainer from './containers/searchContainer';
import TwitterContainer from './containers/twitterContainer';
import Twitter from 'twitter';
export default class App extends React.Component {
render() {
return (
<div>
<SearchContainer />
<TwitterContainer />
</div>
)
}
}
but after building i have an error
How solve this error?
package.json
I'm adding in Material UI to a small React app but I believe the tutorial I am going through is outdated and they are utilizing an older version of Material UI. I keep getting _materialUi2.default.Styles.ThemeManager is not a constructor in the web console as well as Missing class properties transform.
The docs for Material UI aren't so great, and I'm not sure if there's a better resource to look at their latest documentation.
I believe the problem is with ThemeManager.setPalette(). Any advice?
import React from 'react';
import mui from 'material-ui';
import MessageList from './MessageList.jsx';
// Material UI
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import Colors from 'material-ui/lib/styles/colors';
import AppBar from 'material-ui/lib/app-bar';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
class App extends React.Component {
constructor() {
super();
ThemeManager.setPalette({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
});
}
static childContextTypes = {
muitheme: React.PropTypes.object
}
getChildContext() {
return {
muiTheme: ThemeManager.getMuiTheme()
}
}
render() {
return (
<div>
<AppBar title="Chat App"/>
<MessageList />
</div>
);
}
}
export default App;
You're right the tutorial is outdated. Import it like this:
import ThemeManager from 'material-ui/lib/styles/theme-manager';
Also: the key passed through context must be called "muiTheme"
Check out number 1 on this page of the docs: http://www.material-ui.com/#/customization/themes
Yes the tutorial is outdated.
Instead of doing this:
ThemeManager.setPalette({
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
});
You can define your theme in a seperate folder like Theme.jsx
import Colors from 'material-ui/lib/styles/colors';
export default {
palette: {
primary1Color: Colors.blue500,
primary2Color: Colors.blue700,
primary3Color: Colors.blue100,
accent1Color: Colors.pink400
}
};
Then in your main App.jsx, import Theme.jsx and set it to getMuiTheme(MyTheme)
import React, {Component} from 'react';
import MessageList from './MessageList.jsx';
import ThemeManager from 'material-ui/lib/styles/theme-manager';
import AppBar from 'material-ui/lib/app-bar';
import MyTheme from './Theme.jsx';
export default class App extends Component {
constructor(){
super();
}
static childContextTypes = {
muiTheme: React.PropTypes.object
}
getChildContext(){
return {
muiTheme: ThemeManager.getMuiTheme(MyTheme)
};
}
render(){
return(
<div>
<AppBar title="Chat App"/>
<MessageList />
</div>
);
}
}
This should solve the problem