我执行新项目，Nextjs，我的问题是，在添加这两个文件后，我收到此错误，我不知道为什么：
TypeError: Cannot read properties of undefined (reading '__emotion_styles')
ChatDropDown.tsx：
import React from 'react'
import Box from '@mui/material/Box'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import Menu from '@mui/material/Menu'
import MenuItem from '@mui/material/MenuItem'
import SvgIcon from '@mui/material/SvgIcon'
import styled from '@emotion/styled'
import { useState } from 'react'
import Modal from '@components/Helpers/Modals/Modal'
import { useRouter } from 'next/router'
import { BiSolidMessageRoundedDetail } from 'react-icons/bi';
a
const ChatsDropDown = () => {
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null)
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
setAnchorElUser(event.currentTarget)
}
const router = useRouter()
const [open, setOpen] = useState(false)
return (
<Box sx={{ flexGrow: 0 }}>
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<IconSvg inheritViewBox>
<BiSolidMessageRoundedDetail />
</IconSvg>
</IconButton>
</Box>
)
}
const IconSvg = styled(SvgIcon)`
font-size: 48px !important;
`
export default ChatsDropDown
菜单内容.tsx：
import { useRecoilValue } from 'recoil'
import { useRouter } from 'next/router'
import LabelsAtom from '@atoms/Labels'
import { useCallback } from 'react'
import pages from '@constants/pages'
import React from 'react'
import { useSession } from 'next-auth/react'
import { SessionData } from '@api/Models/Auth/types'
import ContentGenerator from './Components/ContentGenerator'
import { BaseParamsProps, MenuContentItem } from './Components/types'
import Notifications from './Components/Notifications'
import UserInfoProps from './Components/UserInfoProps'
import { ProfileInfoAtom, ProfileInfoLoadingAtom } from '@atoms/Auth'
import { Skeleton } from '@mui/material'
import MenuLogin from './Components/LoginMenu'
import MenuNotifications from './Components/NotificationsMenu'
import { ExhibitionMapAtomDialogAtom } from '@atoms/ExhibitionMap'
import { setRecoil } from '@admixltd/admix-component-library/RecoilNexus'
import ChatsDropDown from './Components/ChatsDropdown'
const MenuContent = () => {
const router = useRouter()
const { user } = (useSession().data as unknown as SessionData) ?? {}
const authorized = user?.accessToken ?? ''
const labels = useRecoilValue(LabelsAtom).layout.header
const { profile, logout } = useRecoilValue(LabelsAtom).layout.header.userInfo
const profileInfo = useRecoilValue(ProfileInfoAtom)
const loading = useRecoilValue(ProfileInfoLoadingAtom)
const baseParams = useCallback(
({ url, routerKey = 'asPath', condition = 'startsWith' }: BaseParamsProps) => {
let active = false
if (condition === 'equal') {
active = (router[routerKey] === `${url}` ||
router[routerKey] === url) as unknown as boolean
} else if (url && condition === 'startsWith') {
active = router[routerKey].startsWith(url)
}
return {
active,
}
},
[router]
)
const LeftContent: MenuContentItem[] = [
{
title: 'Exhibitors',
...baseParams({ url: pages.dashboard.url, condition: 'equal' }),
onClick: () => {
router.push(`${pages.exhibitors.url}`)
},
},
{
title: 'Conference Room',
...baseParams({ url: pages.conferenceRoom.url, condition: 'equal' }),
onClick: () => {
router.push(`${pages.conferenceRoom.url}`)
},
},
{
title: 'Webinars',
...baseParams({ url: pages.dashboard.url, condition: 'equal' }),
onClick: () => {
router.push(`${pages.webinars.url}`)
},
},
{
title: 'About Us',
...baseParams({ url: pages.dashboard.url, condition: 'equal' }),
onClick: () => {
router.push(`${pages.AboutUs.url}`)
},
},
{
title: 'Contact Us',
...baseParams({ url: pages.dashboard.url, condition: 'equal' }),
onClick: () => {
router.push(`${pages.ContactUs.url}`)
},
},
]
const RightContent: MenuContentItem[] = [
// {
// component: () => <MenuNotifications />,
// },
{
component: () => <MenuLogin />,
},
{
component: () => <ChatsDropDown />,
},
]
return (
<>
<div>{ContentGenerator(LeftContent)}</div>
<div>{ContentGenerator(RightContent)}</div>
</>
)
}
export default MenuContent
package.json：
{
"name": "VirtualFairs-web",
"private": true,
"scripts": {
"dev": "yarn svgo && next dev",
"build": "next build && next export",
"start": "next start",
"svgo": "npx svgo --final-newline -q -r -f images/svg/"
},
"dependencies": {
"@admixltd/admix-component-library": "^0.5.17",
"@emotion/cache": "latest",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@lottiefiles/react-lottie-player": "^3.5.3",
"@mui/material": "^5.15.15",
"@mui/styled-engine-sc": "^6.0.0-alpha.18",
"@mui/x-data-grid": "latest",
"@mui/x-date-pickers": "5.0.13",
"@svgr/webpack": "latest",
"@tanstack/react-query": "^5.17.19",
"@types/react-slick": "^0.23.13",
"awesome-debounce-promise": "latest",
"classnames": "latest",
"cookies-next": "^4.1.0",
"copy-to-clipboard": "latest",
"dayjs": "latest",
"emoji-picker-react": "^4.8.0",
"firebase": "^10.8.1",
"formik": "^2.4.5",
"leaflet": "latest",
"leaflet-geosearch": "latest",
"material-ui-popup-state": "^5.1.0",
"moment": "^2.30.1",
"mui-modal-provider": "latest",
"next": "latest",
"next-auth": "latest",
"next-http-proxy-middleware": "latest",
"notistack": "latest",
"nprogress": "latest",
"pluralize": "latest",
"polished": "latest",
"react": "^18.2.0",
"react-country-region-selector": "^3.6.1",
"react-country-region-selector-material-ui-new": "^1.5.2",
"react-detect-offline": "^2.4.5",
"react-dom": "latest",
"react-dropzone": "latest",
"react-icons": "^5.1.0",
"react-leaflet": "latest",
"react-lottie": "^1.2.3",
"react-number-format": "<5",
"react-paginate": "^8.2.0",
"react-phone-input-2": "^2.15.1",
"react-player": "^2.14.1",
"react-slick": "^0.29.0",
"react-use-online-status": "^1.2.2",
"react-verification-code-input": "^1.2.9",
"react-video": "^1.5.3",
"react-window": "latest",
"recoil": "^0.7.7",
"slick-carousel": "^1.8.1",
"socket.io-client": "^4.7.4",
"styled-components": "^6.1.8",
"stylis-plugin-rtl": "latest",
"video-react": "^0.16.0",
"yup": "^1.3.3"
},
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.17.22",
"@types/leaflet": "latest",
"@types/node": "latest",
"@types/nprogress": "latest",
"@types/pluralize": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"@types/react-lottie": "^1.2.10",
"@types/react-swipeable-views": "^0.13.2",
"@types/react-swipeable-views-utils": "^0.13.4",
"@types/stylis": "latest",
"@typescript-eslint/eslint-plugin": "latest",
"@typescript-eslint/parser": "latest",
"eslint": "latest",
"eslint-config-airbnb": "latest",
"eslint-config-airbnb-typescript": "latest",
"eslint-config-next": "latest",
"eslint-config-prettier": "latest",
"eslint-plugin-import": "latest",
"eslint-plugin-prettier": "latest",
"file-loader": "latest",
"intercept-stdout": "latest",
"next-compose-plugins": "latest",
"prettier": "latest",
"react-swipeable-views": "^0.14.0",
"react-swipeable-views-utils": "^0.14.0",
"typescript": "latest"
}
}
next.config.js：
// noinspection JSValidateTypes
/** @type {import('next').NextConfig} */
const { withPlugins, optional } = require('next-compose-plugins')
const nextConfig = {
modularizeImports: {
"@mui/material": {
transform: "@mui/material/{{member}}",
},
},
reactStrictMode: true,
experimental: {
output: 'standalone',
// externalDir: true
},
eslint: {
/**
* Warning: Dangerously allow production builds to successfully complete even if
* your project has ESLint errors.
*/
ignoreDuringBuilds: true,
},
images: {
disableStaticImages: true,
},
swcMinify: process.env.NEXT_PUBLIC_NODE_ENV === 'production',
webpack: config => {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ['@svgr/webpack'],
})
config.module.rules.push({
test: /\.(png|gif|svg)$/i,
issuer: /\.[jt]sx?$/,
loader: 'file-loader',
options: {
outputPath: 'static/images/',
},
})
return config
},
}
const noRecoilMessagesOnDevelopment = nextConfig => {
if (process.env.NEXT_PUBLIC_NODE_ENV === 'development') {
require('intercept-stdout')(text => (text.includes('Duplicate atom key') ? '' : text))
}
return { ...nextConfig }
}
const plugins = [
optional(() => {
if (process.env.ANALYZE !== 'True') return {}
return require('@next/bundle-analyzer')()
}),
noRecoilMessagesOnDevelopment,
]
module.exports = withPlugins(plugins, nextConfig)
通过将这些行添加到 next.config.js 解决了我的问题：
modularizeImports: {
"@mui/material": {
transform: "@mui/material/{{member}}",
},
},