I am trying to create a table component but cant import TableContainer Component from material-ui:
Attempted import error: 'TableContainer' is not exported from '#material-ui/core'.
I require it at the top of the page like this:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { TableRow, TableHead, TableContainer, TableCell, TableBody, Table, Paper } from '#material-ui/core';
And here is my package.json and i tried npm install && npm update too.
{
"name": "link_validator",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.8.0",
"#material-ui/icons": "^4.5.1",
"#material-ui/styles": "^4.7.1",
"#material/button": "^4.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-scripts": "^3.3.0",
"redux": "^4.0.4",
"styled-components": "^4.4.1",
"typescript": "^3.7.4"
},
"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"
]
}
}
As #AtinSingh suggested i tried npm uninstall and installing again with writing latest to package.json + importing without destructuring, it worked.
I run npm i #material-ui/core --save and fix my problem. My version now is 4.9.9
Related
I'm creating my own React components for Google's Material Components for Web. I'm trying to get the styling to work. According to the docs, you need to add the following to your sass file:
#use "#material/button";
// #include button.core-styles;
Note: I think there is a bug in the docs - button.core-styles doesn't exist. I just commented it out.
When the button renders, it has all the classes on the element, but all the styles associated with those classes are missing. So it doesn't look like an MDC button.
I found this bug report, which lead me to try this:
#import "#material/button/mdc-button";
And voila! The button is styled!
Can someone explain to me what the difference is between the #use and #import options? And why I would use one over the other?
Full example:
Button.scss
#import "~#material/button/mdc-button";
Button.js
import './Button.scss';
import {useEffect, useRef} from 'react';
import {MDCRipple} from '#material/ripple';
function Button(props) {
const buttonElement = useRef(null);
useEffect(() => {
const ripple = new MDCRipple(buttonElement.current);
return () => {
ripple.destroy();
}
});
return (
<button className="mdc-button mdc-button--raised" ref={buttonElement}>
<span className="mdc-button__ripple"></span>
<span className="mdc-button__label">{props.children}</span>
</button>
);
}
export default Button;
package.json
{
"name": "button-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material/button": "^12.0.0",
"#material/ripple": "^12.0.0",
"#material/theme": "^12.0.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"install": "^0.13.0",
"npm": "^7.20.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"sass": "^1.37.5",
"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"
]
}
}
Ugh. I just found this bug report. But the material.io website still has old info on it....
When I use:
#use "~#material/button/styles";
The button is now styled.
I'm getting an error after I tried adding ChakraUI to my create-react-app. Hoping for any help (also suggestions for what to add to a stackoverflow question is also appreciated)
I ran yarn add #chakra-ui/react #emotion/react#^11 #emotion/styled#^11 framer-motion#^4 as suggested in https://chakra-ui.com/docs/getting-started
I used CRA to start my app but decided to add chakra after I already started a bit of development. That's why I didn't use yarn create react-app my-app --template #chakra-ui
However after running yarn & yarn start I get this error about framer-motion:
TypeError: framer_motion__WEBPACK_IMPORTED_MODULE_1__.motion.custom is not a function
my index.js file looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ChakraProvider } from '#chakra-ui/react';
ReactDOM.render(
<React.StrictMode>
<ChakraProvider>
<App />
</ChakraProvider>
</React.StrictMode>,
document.getElementById('root')
);
package.json:
{
"name": "gad-questionaire",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.3.4",
"#emotion/react": "^11",
"#emotion/styled": "^11",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"framer-motion": "^4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
Using react version: 17.0.1
npm i framer-motion#3.10.6
👆 worked for me, 4.0 appears to have breaking changes
I am doing a basic import of a component and it keeps on giving me this error:
./src/Nav.js
Module not found: You attempted to import ..\node_modules\#pmmmwh\react-refresh-webpack-plugin\lib\runtime\RefreshUtils.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
But my Nav component is inside the /src.
my import
import React from 'react'
const Nav = () => {
return(
<header class="header">
</header>
)
}
export default Nav
Here is my package.json:
{
"name": "react-timesheet-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.12.16",
"#babel/preset-env": "^7.12.16",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-scripts": "4.0.2",
"web-vitals": "^1.0.1"
},
"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"
]
},
"devDependencies": {
"babel-loader": "^8.2.2",
"webpack": "^5.22.0"
}
}
I recently had a similar problem with missing packages, if that is the reason for the error, why do I keep on getting them?
I was unable to get Font Awesome icon working when using string as value for icon parameter.
This working:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
<FontAwesomeIcon icon={faCoffee} />
However this does not:
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
<FontAwesomeIcon icon="coffee" />
And according to this documentation it should.
But I am new to React so may be missing something.
Using javascript. Project created with react cli.
Package.json:
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-regular-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.2",
"font-awesome": "^4.7.0",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-metismenu": "^1.4.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"rsuite": "^4.8.8",
"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"
]
}
}
By "not working" I mean that icon is not visible on the page and console have an error: "Could not find icon {prefix: "fas", iconName: "coffee"}"
You'll need to import library like this: import { library } from '#fortawesome/fontawesome-svg-core'
Then add the icon(s) you wish to use.
import { faCoffee } from '#fortawesome/free-solid-svg-icons'
library.add(faCoffee /*, faCheckSquare, etc*/)
After this, you should be able to use the icon as "coffee". If you are not adding the icons to the library, they will not be included in the bundle, hence the error.
I have the issue ./src/index.js Module not found: Can't resolve '~ antd / dist / antd.css', I can not fix it.
I tried to put the #import '~ antd / dist / antd.css'; . In css file.
Without success.
package.json:
{
"name": "time-clock",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.5.0",
"antd": "^4.9.2",
"firebase": "^8.1.2",
"polished": "^4.0.5",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"styled-components": "^5.2.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"
]
}
}
#import '~antd/dist/antd.css';
is only meant for css or scss files.
if you started your app with -> npx create-react-app yourAppName
don't import 'antd/dist/antd.css'; into your index.js it will fail !!!
Solution
DO NOT USE THE GET STARTED DOCS
Instead use the Use in create-react-app found here
Add #import '~antd/dist/antd.css'; to the top of App.css file
Then you should be able to use it on any component like import { Button } from 'antd';
Add in App.js
import 'antd/dist/reset.css';
documentation