<p dir="auto">Dear <code class="notranslate">Material-UI</code> Community!</p>
<p dir="auto">Big apology if this has been already addressed or discussed earlier, but I couldn't find any related thread on this so opening this ticket for your kind advise.</p>
<p dir="auto">[X] I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</p>
<p dir="auto">Attempting to use any material component from <code class="notranslate">1.0.0 beta</code> package, such as buttons or text field with animation and ripple behavior, breaks <code class="notranslate">webpack 3</code> builds with the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in ../node_modules/material-ui-next/ButtonBase/Ripple.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in '../node_modules/material-ui-next/ButtonBase'"><pre class="notranslate"><code class="notranslate">ERROR in ../node_modules/material-ui-next/ButtonBase/Ripple.js
Module not found: Error: Can't resolve 'react-transition-group/Transition' in '../node_modules/material-ui-next/ButtonBase'
</code></pre></div>
<p dir="auto">In order to get around with this issue, I completely removed my npm global cache, removed node_modules folder and cleared npm cache, and re-installed everything. Unfortunately none helped fixing the aforementioned issue.</p>
<h2 dir="auto">My Environment</h2>
<p dir="auto">I am using <code class="notranslate">React 16.0</code> and do NOT have <code class="notranslate">react-transition-group</code> as a dependency. Thus, I assume it comes as a dependency for <code class="notranslate">material-ui-next</code>. I am currently using both <code class="notranslate">0.19.4</code> and <code class="notranslate">1.0.0 beta</code> at the same time.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &quot;engines&quot;: {
    &quot;node&quot;: &quot;6.11.2&quot;,
    &quot;npm&quot;: &quot;4.0.5&quot;
  },
  &quot;dependencies&quot;: {
    &quot;aphrodite&quot;: &quot;^1.2.4&quot;,
    &quot;axios&quot;: &quot;^0.16.0&quot;,
    &quot;babel-cli&quot;: &quot;^6.26.0&quot;,
    &quot;babel-core&quot;: &quot;^6.26.0&quot;,
    &quot;babel-loader&quot;: &quot;^7.1.2&quot;,
    &quot;babel-plugin-react-transform&quot;: &quot;^2.0.2&quot;,
    &quot;babel-plugin-transform-decorators-legacy&quot;: &quot;^1.3.4&quot;,
    &quot;babel-plugin-transform-flow-strip-types&quot;: &quot;^6.18.0&quot;,
    &quot;babel-plugin-transform-react-constant-elements&quot;: &quot;^6.23.0&quot;,
    &quot;babel-plugin-transform-react-inline-elements&quot;: &quot;^6.22.0&quot;,
    &quot;babel-plugin-transform-react-remove-prop-types&quot;: &quot;^0.3.3&quot;,
    &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;,
    &quot;babel-preset-react&quot;: &quot;^6.24.1&quot;,
    &quot;babel-preset-react-hmre&quot;: &quot;^1.1.1&quot;,
    &quot;babel-preset-stage-0&quot;: &quot;^6.24.1&quot;,
    &quot;bcrypt-nodejs&quot;: &quot;0.0.3&quot;,
    &quot;bluebird&quot;: &quot;^3.5.1&quot;,
    &quot;body-parser&quot;: &quot;^1.18.2&quot;,
    &quot;class-autobind&quot;: &quot;^0.1.4&quot;,
    &quot;classnames&quot;: &quot;^2.2.3&quot;,
    &quot;connect-mongo&quot;: &quot;^1.3.2&quot;,
    &quot;cookie-parser&quot;: &quot;^1.4.3&quot;,
    &quot;create-react-class&quot;: &quot;^15.6.2&quot;,
    &quot;cross-env&quot;: &quot;^4.0.0&quot;,
    &quot;css-loader&quot;: &quot;^0.28.7&quot;,
    &quot;d3&quot;: &quot;^4.11.0&quot;,
    &quot;draft-js&quot;: &quot;^0.10.3&quot;,
    &quot;draft-js-emoji-plugin&quot;: &quot;^2.0.0-rc9&quot;,
    &quot;draft-js-export-html&quot;: &quot;^1.2.0&quot;,
    &quot;draft-js-export-markdown&quot;: &quot;^1.2.0&quot;,
    &quot;draft-js-import-html&quot;: &quot;^1.2.1&quot;,
    &quot;draft-js-import-markdown&quot;: &quot;^1.2.1&quot;,
    &quot;draft-js-plugins-editor&quot;: &quot;^2.0.0-rc8&quot;,
    &quot;draft-js-utils&quot;: &quot;^1.2.0&quot;,
    &quot;element-resize-detector&quot;: &quot;^1.1.12&quot;,
    &quot;es6-promise&quot;: &quot;^4.1.0&quot;,
    &quot;express&quot;: &quot;^4.16.1&quot;,
    &quot;express-session&quot;: &quot;^1.15.6&quot;,
    &quot;express-socket.io-session&quot;: &quot;^1.3.1&quot;,
    &quot;extract-text-webpack-plugin&quot;: &quot;^3.0.2&quot;,
    &quot;file-loader&quot;: &quot;^0.11.1&quot;,
    &quot;fs&quot;: &quot;0.0.2&quot;,
    &quot;global&quot;: &quot;^4.3.2&quot;,
    &quot;i18next&quot;: &quot;^3.5.2&quot;,
    &quot;immutable&quot;: &quot;^3.8.2&quot;,
    &quot;inline-environment-variables-webpack-plugin&quot;: &quot;^1.2.1&quot;,
    &quot;interact.js&quot;: &quot;^1.2.6&quot;,
    &quot;isomorphic-fetch&quot;: &quot;^2.2.1&quot;,
    &quot;js-file-download&quot;: &quot;^0.4.1&quot;,
    &quot;js-tree&quot;: &quot;^1.1.0&quot;,
    &quot;json-loader&quot;: &quot;^0.5.4&quot;,
    &quot;katex&quot;: &quot;^0.6.0&quot;,
    &quot;linkifyjs&quot;: &quot;^2.1.5&quot;,
    &quot;lodash&quot;: &quot;^4.17.2&quot;,
    &quot;material-ui&quot;: &quot;^0.19.4&quot;,
    &quot;material-ui-icons&quot;: &quot;^1.0.0-beta.17&quot;,
    &quot;material-ui-next&quot;: &quot;^1.0.0-beta.20&quot;,
    &quot;mathjs&quot;: &quot;^3.16.4&quot;,
    &quot;method-override&quot;: &quot;^2.3.10&quot;,
    &quot;mkdirp&quot;: &quot;^0.5.1&quot;,
    &quot;moment&quot;: &quot;^2.17.0&quot;,
    &quot;mongoose&quot;: &quot;^4.12.1&quot;,
    &quot;multer&quot;: &quot;^1.1.0&quot;,
    &quot;object-assign&quot;: &quot;^4.1.0&quot;,
    &quot;papaparse&quot;: &quot;^4.3.6&quot;,
    &quot;parse-katex&quot;: &quot;^0.3.0&quot;,
    &quot;passport&quot;: &quot;^0.3.2&quot;,
    &quot;passport-local&quot;: &quot;^1.0.0&quot;,
    &quot;passport.socketio&quot;: &quot;^3.7.0&quot;,
    &quot;postcss-cssnext&quot;: &quot;^2.10.0&quot;,
    &quot;postcss-import&quot;: &quot;^9.0.0&quot;,
    &quot;postcss-loader&quot;: &quot;^1.3.3&quot;,
    &quot;postcss-reporter&quot;: &quot;^3.0.0&quot;,
    &quot;postcss-simple-vars&quot;: &quot;^3.0.0&quot;,
    &quot;prop-types&quot;: &quot;^15.6.0&quot;,
    &quot;radium&quot;: &quot;^0.19.6&quot;,
    &quot;ramda&quot;: &quot;^0.25.0&quot;,
    &quot;react&quot;: &quot;^16.2.0&quot;,
    &quot;react-addons-update&quot;: &quot;^15.6.2&quot;,
    &quot;react-audio-player&quot;: &quot;^0.6.2&quot;,
    &quot;react-bootstrap&quot;: &quot;^0.31.5&quot;,
    &quot;react-bootstrap-table&quot;: &quot;^4.0.0&quot;,
    &quot;react-burger-menu&quot;: &quot;^2.1.8&quot;,
    &quot;react-color&quot;: &quot;^2.13.8&quot;,
    &quot;react-data-grid&quot;: &quot;^2.0.60&quot;,
    &quot;react-datetime&quot;: &quot;^2.10.3&quot;,
    &quot;react-dom&quot;: &quot;^16.2.0&quot;,
    &quot;react-dropzone&quot;: &quot;^3.13.4&quot;,
    &quot;react-emoji&quot;: &quot;^0.4.4&quot;,
    &quot;react-helmet&quot;: &quot;^5.2.0&quot;,
    &quot;react-i18next&quot;: &quot;^6.1.0&quot;,
    &quot;react-icons&quot;: &quot;^2.2.7&quot;,
    &quot;react-loader&quot;: &quot;^2.4.0&quot;,
    &quot;react-mixin&quot;: &quot;^2.0.2&quot;,
    &quot;react-pure-render&quot;: &quot;^1.0.2&quot;,
    &quot;react-redux&quot;: &quot;^5.0.6&quot;,
    &quot;react-router&quot;: &quot;^3.2.0&quot;,
    &quot;react-router-bootstrap&quot;: &quot;^0.23.1&quot;,
    &quot;react-router-redux&quot;: &quot;^4.0.7&quot;,
    &quot;react-select&quot;: &quot;^1.0.0-rc.10&quot;,
    &quot;react-sortable-hoc&quot;: &quot;0.6.8&quot;,
    &quot;react-stickydiv&quot;: &quot;^3.4.20&quot;,
    &quot;react-transform-hmr&quot;: &quot;^1.0.4&quot;,
    &quot;redux&quot;: &quot;^3.6.0&quot;,
    &quot;redux-burger-menu&quot;: &quot;^0.2.2&quot;,
    &quot;redux-logger&quot;: &quot;^2.7.4&quot;,
    &quot;redux-thunk&quot;: &quot;^2.0.1&quot;,
    &quot;rimraf&quot;: &quot;^2.6.2&quot;,
    &quot;serve-favicon&quot;: &quot;^2.4.5&quot;,
    &quot;socket.io&quot;: &quot;^1.6.0&quot;,
    &quot;socket.io-client&quot;: &quot;^1.6.0&quot;,
    &quot;style-loader&quot;: &quot;^0.17.0&quot;,
    &quot;unique-filename&quot;: &quot;^1.1.0&quot;,
    &quot;url-loader&quot;: &quot;^0.5.8&quot;,
    &quot;uuid&quot;: &quot;^3.1.0&quot;,
    &quot;webpack&quot;: &quot;^3.8.1&quot;,
    &quot;webpack-dev-middleware&quot;: &quot;^1.12.0&quot;,
    &quot;webpack-hot-middleware&quot;: &quot;^2.19.1&quot;,
    &quot;webpack-manifest-plugin&quot;: &quot;^1.3.2&quot;,
    &quot;winston&quot;: &quot;^2.4.0&quot;,
    &quot;xml2js&quot;: &quot;^0.4.19&quot;
  }"><pre class="notranslate"><code class="notranslate">  "engines": {
    "node": "6.11.2",
    "npm": "4.0.5"
  },
  "dependencies": {
    "aphrodite": "^1.2.4",
    "axios": "^0.16.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-flow-strip-types": "^6.18.0",
    "babel-plugin-transform-react-constant-elements": "^6.23.0",
    "babel-plugin-transform-react-inline-elements": "^6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.3.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcrypt-nodejs": "0.0.3",
    "bluebird": "^3.5.1",
    "body-parser": "^1.18.2",
    "class-autobind": "^0.1.4",
    "classnames": "^2.2.3",
    "connect-mongo": "^1.3.2",
    "cookie-parser": "^1.4.3",
    "create-react-class": "^15.6.2",
    "cross-env": "^4.0.0",
    "css-loader": "^0.28.7",
    "d3": "^4.11.0",
    "draft-js": "^0.10.3",
    "draft-js-emoji-plugin": "^2.0.0-rc9",
    "draft-js-export-html": "^1.2.0",
    "draft-js-export-markdown": "^1.2.0",
    "draft-js-import-html": "^1.2.1",
    "draft-js-import-markdown": "^1.2.1",
    "draft-js-plugins-editor": "^2.0.0-rc8",
    "draft-js-utils": "^1.2.0",
    "element-resize-detector": "^1.1.12",
    "es6-promise": "^4.1.0",
    "express": "^4.16.1",
    "express-session": "^1.15.6",
    "express-socket.io-session": "^1.3.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.11.1",
    "fs": "0.0.2",
    "global": "^4.3.2",
    "i18next": "^3.5.2",
    "immutable": "^3.8.2",
    "inline-environment-variables-webpack-plugin": "^1.2.1",
    "interact.js": "^1.2.6",
    "isomorphic-fetch": "^2.2.1",
    "js-file-download": "^0.4.1",
    "js-tree": "^1.1.0",
    "json-loader": "^0.5.4",
    "katex": "^0.6.0",
    "linkifyjs": "^2.1.5",
    "lodash": "^4.17.2",
    "material-ui": "^0.19.4",
    "material-ui-icons": "^1.0.0-beta.17",
    "material-ui-next": "^1.0.0-beta.20",
    "mathjs": "^3.16.4",
    "method-override": "^2.3.10",
    "mkdirp": "^0.5.1",
    "moment": "^2.17.0",
    "mongoose": "^4.12.1",
    "multer": "^1.1.0",
    "object-assign": "^4.1.0",
    "papaparse": "^4.3.6",
    "parse-katex": "^0.3.0",
    "passport": "^0.3.2",
    "passport-local": "^1.0.0",
    "passport.socketio": "^3.7.0",
    "postcss-cssnext": "^2.10.0",
    "postcss-import": "^9.0.0",
    "postcss-loader": "^1.3.3",
    "postcss-reporter": "^3.0.0",
    "postcss-simple-vars": "^3.0.0",
    "prop-types": "^15.6.0",
    "radium": "^0.19.6",
    "ramda": "^0.25.0",
    "react": "^16.2.0",
    "react-addons-update": "^15.6.2",
    "react-audio-player": "^0.6.2",
    "react-bootstrap": "^0.31.5",
    "react-bootstrap-table": "^4.0.0",
    "react-burger-menu": "^2.1.8",
    "react-color": "^2.13.8",
    "react-data-grid": "^2.0.60",
    "react-datetime": "^2.10.3",
    "react-dom": "^16.2.0",
    "react-dropzone": "^3.13.4",
    "react-emoji": "^0.4.4",
    "react-helmet": "^5.2.0",
    "react-i18next": "^6.1.0",
    "react-icons": "^2.2.7",
    "react-loader": "^2.4.0",
    "react-mixin": "^2.0.2",
    "react-pure-render": "^1.0.2",
    "react-redux": "^5.0.6",
    "react-router": "^3.2.0",
    "react-router-bootstrap": "^0.23.1",
    "react-router-redux": "^4.0.7",
    "react-select": "^1.0.0-rc.10",
    "react-sortable-hoc": "0.6.8",
    "react-stickydiv": "^3.4.20",
    "react-transform-hmr": "^1.0.4",
    "redux": "^3.6.0",
    "redux-burger-menu": "^0.2.2",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.0.1",
    "rimraf": "^2.6.2",
    "serve-favicon": "^2.4.5",
    "socket.io": "^1.6.0",
    "socket.io-client": "^1.6.0",
    "style-loader": "^0.17.0",
    "unique-filename": "^1.1.0",
    "url-loader": "^0.5.8",
    "uuid": "^3.1.0",
    "webpack": "^3.8.1",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-manifest-plugin": "^1.3.2",
    "winston": "^2.4.0",
    "xml2js": "^0.4.19"
  }
</code></pre></div>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0 beta</td>
</tr>
<tr>
<td>React</td>
<td>16.0</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome  latest version</td>
</tr>
</tbody>
</table>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/357702/35783895-96d7b3ec-0a07-11e8-80a5-5b6464e39344.png"><img src="https://user-images.githubusercontent.com/357702/35783895-96d7b3ec-0a07-11e8-80a5-5b6464e39344.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a href="https://material.io/guidelines/components/selection-controls.html#selection-controls-switch" rel="nofollow">https://material.io/guidelines/components/selection-controls.html#selection-controls-switch</a></p>
<p dir="auto">MCW for comparison is somewhere in-between:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/357702/35800035-9521a442-0a5f-11e8-91be-fcfb9d02027f.png"><img width="140" alt="image" src="https://user-images.githubusercontent.com/357702/35800035-9521a442-0a5f-11e8-91be-fcfb9d02027f.png" style="max-width: 100%;"></a></p>
<p dir="auto"><a href="https://material-components-web.appspot.com/switch.html" rel="nofollow">https://material-components-web.appspot.com/switch.html</a></p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/357702/35783897-a6fd808a-0a07-11e8-893e-5de8a0be233c.png"><img src="https://user-images.githubusercontent.com/357702/35783897-a6fd808a-0a07-11e8-893e-5de8a0be233c.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto"><a href="https://material-ui.com/demos/selection-controls/#switches" rel="nofollow">https://material-ui.com/demos/selection-controls/#switches</a></p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.32</td>
</tr>
</tbody>
</table>