I am using AgGridReact and grid is not being displayed properly. rows are having unwanted gap between each other and line between the grid rows are being overlapped with text . I am using version an version . This is the basic first example. Pls let me know how to fix this. This code snippet is same as youtube tutorial : Youtube Demo ( 3:29 / 7:24 )
"ag-grid-community": "^25.3.0",
"ag-grid-react": "^18.1.0",
import React, { useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css'
import 'ag-grid-community/dist/styles/ag-theme-alpine.css'
function App() {
const [rowData] = useState([
{make: "Toyota", model: "Celica", price: 65000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxster", price: 72000}
]);
const [columnDefs] = useState([
{ field: 'make' },
{ field: 'model' },
{ field: 'price' }
])
return (
<div className="ag-theme-alpine" style={{height: 600, width: 600}} >
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}>
</AgGridReact>
</div>
);
}
export default App;
package.json
{
"name": "my-app-typescript",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^11.0.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.56",
"#types/react": "^16.9.53",
"#types/react-dom": "^16.9.8",
"ag-grid-community": "^25.3.0",
"ag-grid-react": "^18.1.0",
"fix": "^0.0.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "5.0.1",
"rxjs": "6.5.5",
"typescript": "^4.0.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "set PORT=3007 && 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"
]
}
}
Related
Module not found: Error: Can't resolve '#mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'
Failed to compile.
Module not found: Error: Can't resolve '#mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'
ERROR in ./src/components/Header.js 9:0-52
Module not found: Error: Can't resolve '#mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'
webpack compiled with 1 error
import styled from "styled-components";
import { Avatar } from '#mui/material';
import SearchIcon from "#mui/icons-material/Search";
import AccessTimeIcon from "#mui/icons-material/AccessTime";
import HelpOutlineIcon from "#mui/icons-material/HelpOutline";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../Firebase";
const Header = () => {
const [user] = useAuthState(auth);
return (
<HeaderContainer>
{/* header left */}
<HeaderLeft>
<HeaderAvatar
onClick={() => auth.signOut()}
alt={user?.displayName}
src={user?.photoURL}
/>
<AccessTimeIcon />
</HeaderLeft>
<HeaderSearch>
<SearchIcon />
<input type = "text" placeholder="Search" />
</HeaderSearch>
<HeaderRight>
<HelpOutlineIcon />
</HeaderRight>
</HeaderContainer>
);
};
export default Header;
package.json file
{
"name": "slack-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#mui/icons-material": "^5.8.4",
"#mui/material": "^5.9.3",
"#reduxjs/toolkit": "^1.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.3.0",
"firebase": "^9.9.1",
"firebase-hooks": "^0.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-firebase-hooks": "^5.0.3",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-spinkit": "^3.0.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.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"
]
},
"resolutions": {
"styled-components": "^5"
},
"devDependencies": {
"#types/react-spinkit": "^3.0.7",
"#types/styled-components": "^5.1.25"
}
}
I have added the below packages, and the icons are working fine.
"#emotion/react": "11.10.0",
"#emotion/styled": "11.10.0",
"#mui/icons-material": "5.8.4",
"#mui/material": "5.9.3",
#emotion/styled and #emotion/react are the dependency packages for icons. Attaching the sandbox for reference.
I can't clear this error. I've installed and reinstalled webpack types but can't figure out how to make this work. Is there a way to clear or bypass this error?
Error
TypeScript error in /app/src/components/MoviePage/MoviePage.tsx(9,11):
Property 'context' does not exist on type 'NodeRequire'. TS2339
Code with error
const movieThumbImages = importAll(
require.context("../../assets/moviePosterImages", false, /\.(png|jpe?g|svg)$/)
);
Function
export const importAll = (r: any) => {
return r.keys().map(r);
};
package.json
{
"name": "movie-hunt",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "^26.0.24",
"#types/node": "^12.20.20",
"#types/react": "^17.0.19",
"#types/react-dom": "^17.0.9",
"#types/react-router": "^5.1.16",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"typescript": "^4.3.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"
]
},
"devDependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"#types/react-router-dom": "^5.1.8",
"#types/webpack-env": "^1.16.2",
"webpack-env": "^0.8.0"
}
}
I want to display a Material UI list as part of my drop down menu (a Material UI drawer component) for mobile view but for some reason the actual list doesn't get displayed.
The code for the list looks like this:
const menuItems = [
{
text: 'Home',
path: '/'
},
{
text: 'About',
path: '/about'
}
];
...
<List>
{menuItems.map(item => (
<ListItem
button
key={item.text}
onClick={() => history.push(item.path)}
>
<ListItemText>{item.text}</ListItemText>
</ListItem>
))}
</List>
This is the result where my list items should be displayed but instead I get this strange icon:
Here is my package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/icons": "^4.11.2",
"#material-ui/styles": "^4.11.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"firebase": "^8.7.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-timeago": "^6.2.1",
"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"
]
}
}
--
EDIT:
Here is a working CodeSandbox example
The error is in the import.
Correct:
import List from "#material-ui/core/List";
You imported List from "#material-ui/icons/List". You should remove it and import List from "#material-ui/core":
import { List } from "#material-ui/core";
./src/App.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./src/App.less)
TypeError: this.getOptions is not a function
// package.json
{
"name": "demo_react",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"antd": "^4.15.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired 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-plugin-import": "^1.13.3",
"customize-cra": "^1.0.0",
"less": "^4.1.1",
"less-loader": "^8.0.0",
"react-app-rewire-less": "^2.1.3",
"react-app-rewired": "^2.1.8"
}
}
// config-overrides.js
const { override, fixBabelImports, addLessLoader } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true
}),
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {}
}
})
);
delete your node_modules folder from the project and run this command npm install then run your project
I have following function in actions.js file
export const mockFunction = () => {
return true
}
I have an index.js file, where I want to export this function to the rest of the app
import * as actions from './actions'
export {actions}
I get as error:
Failed to compile
./src/providers/xxform_provider/actions.jsx
Error: ENOENT: no such file or directory, open '/Users/client/xxxx/src/providers/xxform_provider/actions.jsx'
I am not using webpack, actually I guess no, if I have a look at my package.json
I am using create-react-app
https://github.com/facebook/create-react-app
Does anybody know what create-react-app uses as a js bundler? I can not tell from the package.json file
{
"name": "react_porter",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#material-ui/core": "^4.9.0",
"#material-ui/lab": "^4.0.0-alpha.40",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-datetime": "^2.16.3",
"react-dom": "^16.12.0",
"react-facebook-login": "^4.1.1",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"react-swipe": "^6.0.4",
"react-swipeable-views": "^0.13.5",
"styled-components": "^5.0.0",
"swipe-js-iso": "^2.1.5",
"swipejs": "^2.2.14"
},
"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"
]
}
}
actions.js
const mockFunction = () => true;
export default mockFunction;
index.js
import mockFunction from './actions';
i hope this helps