title: How to fix problem with createGenerateClassName() and jssPreset() when migrating from material-ui v3 to v4?
body: <p>Had material-ui v3 working on a messaging app and was using createGenerateClassName() and jssPreset() to configure the JSS to allow for right-to-left text direction.</p>
  
  <p>Upon upgrading to material-ui v4, I get the following compile errors:</p>
  
  <pre><code>./src/index.js
  Attempted import error: 'createGenerateClassName' is not exported from '@material-ui/core/styles'.
  
  ./src/index.js
  Attempted import error: 'jssPreset' is not exported from '@material-ui/core/styles'.
  </code></pre>
  
  <p>Importing from @material-ui/styles instead, results in a successful import, but leads to another error within createGenerateClassName.js itself:</p>
  
  <pre><code>Uncaught (in promise) TypeError: Cannot read property 'Symbol(mui.nested)' of undefined
  </code></pre>
  
  <p>Changing the code to mirror the instructions for RTL in the v4 docs (<a href="https://material-ui.com/guides/right-to-left/" rel="nofollow noreferrer">https://material-ui.com/guides/right-to-left/</a>) which doesn't use createGenerateClassName() at all and  instead of  results in a different error in css-vendor.esm.js:</p>
  
  <pre><code>Uncaught (in promise) TypeError: Cannot read property '1' of undefined
  </code></pre>
  
  <p>There doesn't seem to be any mention of this in the  v3 -> v4 migration guide at <a href="https://material-ui.com/guides/migration-v3/" rel="nofollow noreferrer">https://material-ui.com/guides/migration-v3/</a></p>
  
  <p>index.js</p>
  
  <pre><code>import { MuiThemeProvider, createMuiTheme, CssBaseline } from '@material-ui/core';
  import { create } from 'jss';
  import rtl from 'jss-rtl';
  import JssProvider from 'react-jss/lib/JssProvider';
  import { createGenerateClassName, jssPreset } from '@material-ui/styles';
  import App from './components/App';
  import chatloopTheme from './assets/stylesheets/chatloopTheme';
  
  // Configure JSS
  const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
  
  // Custom Material-UI class name generator.
  const generateClassName = createGenerateClassName();
  
  const theme = createMuiTheme(chatloopTheme);
  
  // Set up redux store
  const store = configureStore();
  
  const jsx = (
    &lt;Provider store={store}&gt;
      &lt;Router history={history}&gt;
        &lt;I18nextProvider i18n={i18n}&gt;
          &lt;JssProvider jss={jss} generateClassName={generateClassName}&gt;
            &lt;MuiThemeProvider theme={theme}&gt;
              &lt;CssBaseline /&gt;
              &lt;App /&gt;
            &lt;/MuiThemeProvider&gt;
          &lt;/JssProvider&gt;
        &lt;/I18nextProvider&gt;
      &lt;/Router&gt;
    &lt;/Provider&gt;
  );
  
  let hasRendered = false;
  
  const renderApp = () =&gt; {
    if (!hasRendered) {
      ReactDOM.render(jsx, document.getElementById('root'));
      hasRendered = true;
    }
  };
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "dependencies": {
      "@material-ui/core": "^4.1.1",
      "@material-ui/icons": "^4.2.0",
      "i18next": "^15.0.7",
      "react": "^16.8.3",
      "react-dom": "^16.8.3",
      "react-i18next": "^10.5.2",
      "react-jss": "^8.6.1",
      "react-scripts": "^3.0.1",   
    },
  }
  </code></pre>
  
  <p>I'm stuck on this one and would really appreciate the material-ui community's help.</p>