<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. I believe the only relevant thing is this comment <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="256221973" data-permission-text="Title is private" data-url="https://github.com/mui/material-ui/issues/8100" data-hovercard-type="issue" data-hovercard-url="/mui/material-ui/issues/8100/hovercard?comment_id=328078814&amp;comment_type=issue_comment" href="https://github.com/mui/material-ui/issues/8100#issuecomment-328078814">#8100 (comment)</a>:
<blockquote>
<p dir="auto">we would love to know if you can bundle the v1-beta branch with rollup.</p>
</blockquote>
</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>

<p dir="auto">Bundling with Rollup should work as long as MUI provides ES modules (<a href="https://github.com/rollup/rollup/wiki/ES6-modules#es6-friendly-libraries">https://github.com/rollup/rollup/wiki/ES6-modules#es6-friendly-libraries</a>).</p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto">Currently, there is an <code class="notranslate">index.es.js</code> file which is an ES module itself, but it points at CommonJS modules (<a href="https://unpkg.com/material-ui@1.0.0-beta.32/index.es.js" rel="nofollow">https://unpkg.com/material-ui@1.0.0-beta.32/index.es.js</a>). This then causes Rollup to fail to build:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[!] Error: 'BottomNavigationAction' is not exported by node_modules/material-ui/BottomNavigation/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/material-ui/index.es.js (9:38)
 7: export { default as Avatar } from './Avatar';
 8: export { default as Badge } from './Badge';
 9: export { default as BottomNavigation, BottomNavigationAction } from './BottomNavigation';
                                          ^
10: export { default as Button } from './Button';
11: export { default as ButtonBase } from './ButtonBase';"><pre class="notranslate"><code class="notranslate">[!] Error: 'BottomNavigationAction' is not exported by node_modules/material-ui/BottomNavigation/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/material-ui/index.es.js (9:38)
 7: export { default as Avatar } from './Avatar';
 8: export { default as Badge } from './Badge';
 9: export { default as BottomNavigation, BottomNavigationAction } from './BottomNavigation';
                                          ^
10: export { default as Button } from './Button';
11: export { default as ButtonBase } from './ButtonBase';
</code></pre></div>
<p dir="auto">Presumably, this is because <a href="https://github.com/rollup/rollup-plugin-commonjs">https://github.com/rollup/rollup-plugin-commonjs</a> cannot fully understand the CommonJS exports (unless you manually specify them via <a href="https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports"><code class="notranslate">namedExports</code></a> option).</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>

<p dir="auto">I have a simple repro available here: <a href="https://github.com/NMinhNguyen/material-ui-rollup-example">https://github.com/NMinhNguyen/material-ui-rollup-example</a></p>
<p dir="auto">It also contains a branch where I modified <code class="notranslate">yarn.lock</code> to point at a temporary fork of MUI that publishes ES modules (<a href="https://github.com/NMinhNguyen/material-ui/commit/2a716a44dbb17bbe5fc7aecdffa6089ba8964237">source</a>), and bundling with Rollup works without any other changes. I am willing to raise a PR with this change (I'll probably also replace the current <code class="notranslate">build:es2015modules</code> script as I believe my change supersedes it, but not sure if removing <code class="notranslate">index.es.js</code> could be considered a breaking change?), but I thought I'd raise an issue first (this is also what the contributing guide suggests) 🙂</p>
<p dir="auto">I have also created this <a href="https://github.com/NMinhNguyen/material-ui/commits/es5-modules-analysis">branch</a> where I committed the current build output and how it <a href="https://github.com/NMinhNguyen/material-ui/commit/aa4f206373ad23457a7bb9d28b1055c33dc2a13b">changes</a> with my changes so you can more easily review them as well as spot any possible regressions. And <a href="https://github.com/NMinhNguyen/material-ui/commit/8d5fcc450db809712ad274f06c438bb98e9ef463">here</a> you can find the actual ES5 modules.</p>
<p dir="auto">By the way, the reason I would rather not use the <code class="notranslate">es</code> folder is because that folder is ESNext (2015+), so I'd have to transpile it via Babel myself. This would mean that I'd additionally have to include these plugins to ensure I get the same Babel transformations applied: <a href="https://github.com/mui-org/material-ui/blob/8497cd976d74cfd102c6e8afb932348b366dd5b3/.babelrc#L70-L83">https://github.com/mui-org/material-ui/blob/8497cd976d74cfd102c6e8afb932348b366dd5b3/.babelrc#L70-L83</a></p>
<h2 dir="auto">Context</h2>

<p dir="auto">We are using Rollup to bundle our code.</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>1.0.0-beta.32</td>
</tr>
<tr>
<td>React</td>
<td>16.2.0</td>
</tr>
<tr>
<td>Rollup</td>
<td>0.55.3</td>
</tr>
<tr>
<td>rollup-plugin-commonjs</td>
<td>8.3.0</td>
</tr>
</tbody>
</table>
<p dir="auto">The CardMedia component don't accept children on his tag.</p>


<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">I would like to be able to do it inside CardMedia:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/10498833/36188932-9df6c768-1136-11e8-960d-40cecf90996b.png"><img src="https://user-images.githubusercontent.com/10498833/36188932-9df6c768-1136-11e8-960d-40cecf90996b.png" alt="image" style="max-width: 100%;"></a></p>
<h2 dir="auto">Current Behavior</h2>

<p dir="auto"><a href="https://github.com/mui-org/material-ui/blob/v1-beta/src/Card/CardMedia.js#L45">https://github.com/mui-org/material-ui/blob/v1-beta/src/Card/CardMedia.js#L45</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>1.0.0-beta.28</td>
</tr>
<tr>
<td>React</td>
<td>16.2</td>
</tr>
</tbody>
</table>
<hr>
<p dir="auto">If improve this make sense, I also would like to take.</p>