TypeError: Cannot read property 'muiName' of undefined - upload

See original GitHub issue

What you were expecting:

Trying to use SimpleForm and FileInput

What happened instead: get TypeError: Cannot read property ‘muiName’ of undefined

Related code:

import * as React from 'react';

import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/core/styles';
import { lightTheme } from './themes';

import { Create, SimpleForm, TextInput, FileInput, FileField } from 'react-admin';

const useStyles = makeStyles(theme => ({
    main: {
        flex: '1',
        marginRight: '1em',
        marginTop: 20,
    }
}));

const UploadCSV = props => {
    const classes = useStyles();
    return (
     <ThemeProvider theme={createMuiTheme(lightTheme)}>
        <Create {...props}>
            <SimpleForm redirect="list">
                <TextInput source="id" disabled variant="outline" />
                <TextInput source="name" label="Dateiname" />
                <TextInput source="beschreibung" />
                <FileInput source="pdffile" label="PDF-Template" accept="application/pdf" >
                    <FileField source="src" title="title" />
                </FileInput>
            </SimpleForm>
        </Create>
        </ThemeProvider>
    );
};

// UploadCSV.muiName = 'IconMenu';

export default UploadCSV;

Environment

  • React-admin version: 3.7.0

  • Last version that did not exhibit the issue (if applicable):

  • React version: 16.13.1

  • Browser: Windows 10 Edge

  • Stack trace (in case of a JS error):

in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl))) in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField)) in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField))) in WithStyles(ForwardRef(TextField)) (created by ResettableTextField) in ResettableTextField (created by TextInput) in TextInput (at UploadCSV.js:27) in div (created by FormInput) in FormInput (created by SimpleFormView) in div (created by ForwardRef(CardContent)) in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent))) in WithStyles(ForwardRef(CardContent)) (created by CardContentInner) in CardContentInner (created by SimpleFormView) in form (created by SimpleFormView) in SimpleFormView (created by FormView) in FormView (created by ReactFinalForm) in ReactFinalForm (created by FormWithRedirect) in FormWithRedirect (created by SimpleForm) in SimpleForm (at UploadCSV.js:26) in div (created by ForwardRef(Paper)) in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper))) in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card)) in ForwardRef(Card) (created by WithStyles(ForwardRef(Card))) in WithStyles(ForwardRef(Card)) (created by CreateView) in div (created by CreateView) in div (created by CreateView) in CreateView (created by Create) in Create (at UploadCSV.js:25) in ThemeProvider (at UploadCSV.js:24) in UploadCSV (at Dashboard.js:117) in div (at Dashboard.js:116) in div (at Dashboard.js:100) in Dashboard (created by WithPermissions) in WithPermissions (created by Context.Consumer) in Route (created by RoutesWithLayout) in Switch (created by RoutesWithLayout) in RoutesWithLayout (created by Context.Consumer) in div (created by Layout) in main (created by Layout) in div (created by Layout) in div (created by Layout) in Layout (created by WithStyles(Layout)) in WithStyles(Layout) (created by Context.Consumer) in withRouter(WithStyles(Layout)) (created by ConnectFunction) in ConnectFunction (created by LayoutWithTheme) in ThemeProvider (created by LayoutWithTheme) in LayoutWithTheme (at App.js:26) in CustomLayout (created by Context.Consumer) in Route (created by CoreAdminRouter) in Switch (created by CoreAdminRouter) in div (created by CoreAdminRouter) in CoreAdminRouter (created by Context.Consumer) in Route (created by CoreAdminUI) in Switch (created by CoreAdminUI) in CoreAdminUI (created by AdminUI) in AdminUI (created by Admin) in Router (created by ConnectedRouter) in ConnectedRouter (created by Context.Consumer) in ConnectedRouterWithContext (created by ConnectFunction) in ConnectFunction (created by CoreAdminContext) in TranslationProvider (created by CoreAdminContext) in Provider (created by CoreAdminContext) in CoreAdminContext (created by AdminContext) in AdminContext (created by Admin) in Admin (at App.js:40) in App (at src/index.js:9) in StrictMode (at src/index.js:8)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
LeslieMurphycommented, Jul 9, 2020

That was it! Wow! I got that line of code from a sample somewhere - caused me endless grief! Wonder if I should report a bug to mui team - what a horrible error message 😦

THANK YOU

Works:

<TextInput source="id" disabled variant="outlined" />

Fails with “TypeError: Cannot read property ‘muiName’ of undefined

<TextInput source="id" disabled variant="outline" />

1reaction
LeslieMurphycommented, Jul 9, 2020

My “TypeError: Cannot read property ‘muiName’ of undefined” is caused by variant attribute. Is variant incompatible with React-Admin TextInput? Should this attribute be flagged or blocked from being passed over into Material-UI? I see now in the documentation that it is not listed. https://marmelab.com/react-admin/doc/3.5/Inputs.html

<TextInput source="id" disabled variant="Outline" />

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot read property 'muiName' of undefined at t.isMuiElement?
This happened to me because I set the variant of the TextField to an unknown value: <TextField variant="unkownVariant".
Read more >
React TypeError: Cannot read property function of undefined
SET YOUR LIKE THERE ...
Read more >
A brand new website interface for an even better experience!
After updating Material UI throws TypeError: Cannot read property 'muiName' of undefined.
Read more >
@mui/icons-material | Yarn - Package Manager
This package provides the Google Material Icons converted to SvgIcon components. Installation. Install the package in your project directory with: // with npm ......
Read more >
Design Patterns with React Easy State | by Bertalan Miklos
Easy State doesn't care about how you manage your state, it looks out for any kind ... value); \u002F\u002F Core will ignore that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found