Error: Element type is invalid thrown by reactjs

Question

for the code below in next.js index page

import { Typography } from '@mui/material/Typography';
import { createTheme, ThemeProvider } from '@mui/material/styles';
const theme = createTheme({
    typography: {
        fontFamily: 'Arial'
    },

    fontFamily: 'Arial'

});

function index () {
    return (
        <Typography variant="body2">Minimumdd 6 Characters</Typography>
    );
};

export default index;

It gives

"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

May I know what am I doing incorrectly?

Here's the entire stacktrace from the console

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at index.js:15. at Home at MyApp (webpack-internal:///./pages/_app.js:11:18) at StyleRegistry (C:\Dev\astatic_web\frontend_js\node_modules\styled-jsx\dist\index\index.js:671:34) at FlushEffectContainer (C:\Dev\astatic_web\frontend_js\node_modules\next\dist\server\render.js:424:37) at AppContainer (C:\Dev\astatic_web\frontend_js\node_modules\next\dist\server\render.js:439:29) at AppContainerWithIsomorphicFiberStructure (C:\Dev\astatic_web\frontend_js\node_modules\next\dist\server\render.js:470:57) at div at Body (C:\Dev\astatic_web\frontend_js\node_modules\next\dist\server\render.js:736:21) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. at renderElement (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5833:9) at renderNodeDestructive (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5875:11) at renderContextProvider (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5710:3) at renderElement (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5807:11) at renderNodeDestructive (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5875:11) at renderIndeterminateComponent (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5575:7) at renderElement (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5736:7) at renderNodeDestructive (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5875:11) at renderContextProvider (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5710:3) at renderElement (C:\Dev\astatic_web\frontend_js\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5807:11) wait - compiling /_error (client and server)... wait - compiling... event - compiled client and server successfully in 188 ms (470 modules) error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Here's the development console if it's helpful:

Answer 1

It could be that the typography in the createTheme function needs to be capitalized to match the component name? A way around this could be directly inserting the font family as a prop to Typography, but that's tedious. Maybe set the body of the app to have your desired font.