Material-ui Cannot read property 'withStyles' of undefined error

Question

Getting error:

Uncaught TypeError: Cannot read property 'withStyles' of undefined
at withStyles (withStyles.js:6)
at Module../node_modules/@material-ui/core/esm/SvgIcon/SvgIcon.js (SvgIcon.js:160)
at webpack_require (bootstrap:18)
at Module../node_modules/@skoda/k2tools-app-components/build/index.es.js (redux-saga-symbols.esm.js:39)
at webpack_require (bootstrap:18)
at Module../src/pages/error/errorPage.tsx (calculator.min.js?v=516:5549)
at webpack_require (bootstrap:18)
at Module../src/pages/error/index.ts (calculator.min.js?v=516:5590)
at webpack_require (bootstrap:18)
at Module../src/components/errorBoundary/errorBoundary.tsx (calculator.min.js?v=516:1903)

Expected Behavior ?? No error.

Context ?? We built an application which should be distribued as javascript file from our api. Client web downloads and loads this file (starts application as widget). Client web may or may not use material-ui, thus we added @material-ui/core in external dependencies, and client web should handle it yourselve by installing material-ui from npm, or linking it from cdn

in application webpack.config

    externals: {
        'react': {
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'react',
            umd: 'react',
            root: 'React'
        },
        'react-dom': {
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'react-dom',
            umd: 'react-dom',
            root: 'ReactDOM'
        },
        '@material-ui/core': {
            commonjs: '@material-ui/core',
            commonjs2: '@material-ui/core',
            amd: '@material-ui/core',
            umd: '@material-ui/core',
            root: 'MaterialUI'
        }
    }

Client web downloads this bundle and also links this cript

Or if client web has npm, installs material-ui and sets it in global variable like this

import * as MaterialUI from "@material-ui/core"; window.MaterialUI = MaterialUI; Everything was fine until we run into issue when all material icons colors and sizes were overriden by default pallete (all icons colors of client web was overriden to blue). This was solved by adding also @material-ui/styles module in external dependencies. Please see this issue https://github.com/mui-org/material-ui/issues/19702 for more information.

            '@material-ui/styles': {
                commonjs: '@material-ui/styles',
                commonjs2: '@material-ui/styles',
                amd: '@material-ui/styles',
                umd: '@material-ui/styles',
                root: 'MaterialUIStyles'
            }

It was working fine again with npm approach.

import * as MaterialUIStyles from "@material-ui/styles";
window.MaterialUIStyles = MaterialUIStyles;

But how should i add material-ui/styles in external dependencies to make it work also with cdn approach ?

I got an error Cannot read property 'withStyles' of undefined. Obviously material-ui/styles module is missing.

Am i specifiing root name wrong ? Or should i link material-ui/styles cdn from somewhere and from where and how ? I cannot find any usefull information in documentation about this context.

question from:https://stackoverflow.com/questions/65953137/material-ui-cannot-read-property-withstyles-of-undefined-error

Answer 1

Waitting for answers