I followed the tutorial in online video but I got an error code like this:
Failed to compile
./node_modules/#material-ui/icons/Menu.js Module not found: Can't resolve '#babel/runtime/helpers/builtin/interopRequireDefault' inb'C:\LocalServer\static-page\node_modules\#material-ui\icons'
This error occurred during the build time and cannot be dismissed.
This is the code I write:
import React, {Component} from 'react';
import AppBar from '#material-ui/core/AppBar';
import ToolBar from '#material-ui/core/Toolbar';
import MenuIcon from '#material-ui/icons/Menu';
import IconButton from '#material-ui/core/IconButton';
class Header extends Component{
render(){
return(
<div>
<AppBar position="fixed" style={{backgroundColor:'#2f2f2f',boxShadow:'none',padding:'10px 0px'}}>
<ToolBar>
<div className="header_logo">
<div className="font_righteous header_logo_venue">The Venue</div>
<div className="header_logo_title">MUSICAL EVENTS</div>
</div>
<IconButton aria-label="Menu" color="inherit" onClick={()=>console.log('open')}>
<MenuIcon/>
</IconButton>
</ToolBar>
</AppBar>
</div>
);
}
}
export default Header
From the tutorial said that I should rename the directory from #material-ui/core/Menu on line 4 to #material-ui/icons/Menu. But when I revert back to #material-ui/core/Menu, the code is running, the button works, but no icon appeared.
But, from the tutorial shows that the program is running, with the icons appeared on it.
It has a white hamburger button icon on the header
This is the error code when I try to change core/Menu to icons/Menu
This is the result when I changed back to core/Menu
EDIT: The package.json I have right now:
{ "name": "static-page", "version": "0.1.0", "private": true, "dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#material-ui/core": "^1.4.3",
"#material-ui/icons": "^1.1.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-reveal": "^1.2.2",
"react-scripts": "2.1.3",
"react-scroll": "^1.7.9",
"react-slick": "^0.23.1" }, "scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject" }, "eslintConfig": {
"extends": "react-app" }, "browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all" ] }
Found a MUI issue which states the exact same problem. The solution is to upgrade to #material-ui/icons#1.1.1.
Since you have #material-ui/icons#^1.1.0 as a dependency, deleting node_modules and running npm install again should be sufficient.
Have a go and try:
npm add #babel/runtime
Or upgrade babel runtime:
"#babel/runtime": "7.0.0-beta.55"
Related
I'm a beginner at React app, I just finished setting up the app and want to use material UI for buttons.
Here's my code.
import Button from '#material-ui/core/Button';
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className = "App">
<header className='App-header'>
<Button>Click here</Button>
<img src={logo} className="App-logo" alt="logo" />
</header>
</div>
);
}
export default App;
I run that and it gives me Error: Invalid hook call. Hooks can only be called inside of the body of a function component. and the error points to:
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
> 7 | ReactDOM.render(
8 | <React.StrictMode>
9 | <App />
10 | </React.StrictMode>,
This is my package.json just in case, but I don't think there's anything wrong there.
{
"name": "schedule",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I've spent so much time trying to fix this, please help
I have reproduced your code in this example
https://codesandbox.io/embed/dreamy-euler-jhu8t?fontsize=14&hidenavigation=1&theme=dark
Need only install material ui with
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
And delete if no need
from './reportWebVitals'
I just needed to do npm install #material-ui/core in the terminal. It wasn't in the dependencies list before. Thanks to #Claire Lin.
I was trying to add search icon from material UI but I am getting this error. "Error: Invalid hook call. Hooks can only be called inside of the body of a function component." I was trying the amazon clone tutorial from YouTube and did everything exactly. Can someone help me? Thank you.
This is my Header.js
import React from "react";
import "./Header.css";
import { Link } from "react-router-dom";
import SearchIcon from '#material-ui/icons/Search';
function Header() {
return (
<nav className="header">
{/* Logo on the left -> img */}
<Link to="/">
<img className="header__logo" src="/logo.png"></img>
</Link>
{/* Search box */}
<input type="text" className="header__serachInput"/>
<SearchIcon />
{/* Links */}
{/* Basket icon with number */}
</nav>
)
}
export default Header
Package.json
{
"name": "amazon-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Your code looks pretty fine and I don't see the use of hooks in your code here.
Try updating your react-dom module.
See the update error here
I wonder why React can't find '#bootstrap-styled/v4'.
At first, I didn't eject. Because it's my first React project. I want simple.
yarn add '#bootstrap-styled/v4'
So this package installed in 'Project/node_modules/#bootstrap-styled/v4'.
And package.json file here.
# package.json
{
"name": "front",
"version": "0.1.0",
"private": true,
"dependencies": {
"#bootstrap-styled/v4": "bootstrap-styled/v4",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1"
},
"scripts": {
"start": "cross-env NODE_PATH=src react-scripts start",
"build": "cross-env NODE_PATH=src react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^7.0.2"
}
}
# src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'index.css';
import BaseLayout from 'BaseLayout';
import * as serviceWorker from 'serviceWorker';
ReactDOM.render(
<React.StrictMode>
<BaseLayout />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
# src/BaseLayout.js
import React, { useState } from 'react';
import {
Nav,
NavItem,
NavLink,
NavDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from '#bootstrap-styled/v4';
// root component
function BaseLayout() {
const [isOpen, setIsOpen] = useState(false);
return (
<Nav>
<NavItem>
<NavLink href="">Home</NavLink>
</NavItem>
<NavDropdown isOpen={isOpen} toggle={() => setIsOpen(true)}>
<DropdownToggle>
General
</DropdownToggle>
<DropdownMenu>
<DropdownItem>1</DropdownItem>
<DropdownItem>2</DropdownItem>
<DropdownItem>3</DropdownItem>
</DropdownMenu>
</NavDropdown>
</Nav>
);
}
export default BaseLayout;
I ran the server, error displayed.
Module not found: Can't resolve '#bootstrap-styled/v4' in 'D:\Project\src'
I have a few questions here.
I heard if you don't eject, React project will find module in src only. Is that right?
1-1. If correct, I don't make sense. Then why does node_modules exist? It would be right to go inside src, right?
What mean '#'? This isn't a scoped package, is it? Cause scoped package's structure is #scope/packageName. '#bootstrap-styled/v4' does not apply. (At https://bootstrap-styled.github.io/bootstrap-styled/, you can see their packages.)
I have created the react app using CRA (CREATE-REACT-APP). I have installed node-sass and renamed App.css to App.scss and updated its import in App.js. Now in my App.js, I am just trying to print some text inside a section.
This is the link the repo, I am talking about. For your reference
node -v v12.11.1 and npm -v 6.11.3
App.js
import React from 'react';
import './App.scss';
import Section from 'react-bulma-components/lib/components/section';
function App() {
return (
<Section>
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</Section>
);
}
export default App;
App.scss
#import 'react-bulma-components/src/index.sass';
package.json
{
"name": "just-trying",
"version": "0.1.0",
"private": true,
"dependencies": {
"node-sass": "^4.13.0",
"react": "^16.11.0",
"react-bulma-components": "^3.1.3",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass-loader": "^8.0.0"
}
}
Instead of downgrading the version of node, I have uninstalled react-bulma-components and instead just installed bulma via npa like npm i bulma.. and that works fine.
I am trying to use react-bootstrap to style a web page.
package.json
{
"name": "chrome-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.16"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-bootstrap": "^0.31.5"
}
}
App.js
import React from 'react';
import { Button } from 'react-bootstrap'
function CheckState(props){
function handleClick(e){
console.log(props.state)
}
return(
<Button bsStyle="primary" onClick={handleClick}>Click for state</Button>
)
}
However this is what I'm seeing on the web page when I refresh:
It doesn't look like the styling is being added. What am I doing wrong?
Add import "bootstrap/dist/css/bootstrap.css"; in your index.js
In your react application, open index.js file and add import 'bootstrap/dist/css/bootstrap.css';