I am using mui and when using named export, it gives error of module not found issue.
followed this mui blog and use babel-plugin approach but error still remian same.
package.json
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@mui/icons-material": "^5.10.14",
"@mui/material": "^5.10.14",
"@mui/styled-engine-sc": "^5.10.6",
"@reduxjs/toolkit": "^1.8.6",
"@stripe/react-stripe-js": "^1.14.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"cors": "^2.8.5",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.38.0",
"react-loadingmask": "^4.0.6",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"babel-plugin-import": "^1.13.5",
"css-loader": "^6.7.1",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.2.1",
"source-map-loader": "^4.0.1",
"tailwindcss": "^3.1.8"
},
"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"
]
},
.babelrc.js
const plugins = [
[
'babel-plugin-import',
{
libraryName: '@mui/material',
libraryDirectory: '',
camel2DashComponentName: false,
},
'core',
],
[
'babel-plugin-import',
{
libraryName: '@mui/icons-material',
libraryDirectory: '',
camel2DashComponentName: false,
},
'icons',
],
];
module.exports = { plugins };
config-overrides.js
/* config-overrides.js */
/* eslint-disable react-hooks/rules-of-hooks */
const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());
src/component/AppBarMain.jsx
here how it has been written as below
import { AccountCircle, AddCommentIcon, MailIcon, MenuIcon, MoreIcon, SearchIcon } from '@mui/icons-material';
import { alpha, AppBar, Badge, Box, Button, IconButton, InputBase, Menu, MenuItem, Toolbar, Typography } from '@mui/material';
and it gives errors
what is wrong here, Kindly help.
