title: Next.js 12 breaks when used with theme-ui giving "code: 'ERR_REQUIRE_ESM'"
body: <p>I'm using <strong>Next.js 12</strong> and this error pops up after I created a theme using <strong>theme-ui</strong></p>
  <p><a href="https://i.stack.imgur.com/BtH7W.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BtH7W.png" alt="enter image description here" /></a></p>
  <pre class="lang-sh prettyprint-override"><code>Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\fm-nextjs\node_modules\@mdx-js\react\index.js
  require() of ES modules is not supported.
  require() of E:\fm-nextjs\node_modules\@mdx-js\react\index.js from E:\fm-nextjs\node_modules\@theme-ui\mdx\dist\theme-ui-mdx.cjs.dev.js 
  is an ES module file as it is a .js file whose nearest parent package.json contains &quot;type&quot;: &quot;module&quot; which defines all .js files in that package scope as ES modules.
  Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove &quot;type&quot;: &quot;module&quot; from E:\fm-nextjs\node_modules\@mdx-js\react\package.json.
  
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
      at Module.load (internal/modules/cjs/loader.js:937:32)
      at Function.Module._load (internal/modules/cjs/loader.js:778:12)    at Module.require (internal/modules/cjs/loader.js:961:19)       
      at require (internal/modules/cjs/helpers.js:92:18)
      at Object.&lt;anonymous&gt; (E:\fm-nextjs\node_modules\@theme-ui\mdx\dist\theme-ui-mdx.cjs.dev.js:9:15)
      at Module._compile (internal/modules/cjs/loader.js:1072:14)     
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
      at Module.load (internal/modules/cjs/loader.js:937:32)
      at Function.Module._load (internal/modules/cjs/loader.js:778:12) {
    code: 'ERR_REQUIRE_ESM'
  }
  </code></pre>
  <p>my package.json has following dependencies</p>
  <pre class="lang-json prettyprint-override"><code>  &quot;dependencies&quot;: {
      &quot;@emotion/react&quot;: &quot;^11.7.1&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.6.0&quot;,
      &quot;@mdx-js/react&quot;: &quot;^2.0.0&quot;,
      &quot;@theme-ui/presets&quot;: &quot;^0.13.1&quot;,
      &quot;next&quot;: &quot;^12.0.10&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;theme-ui&quot;: &quot;^0.13.1&quot;
    }
  </code></pre>
  <p>I tried removing <code>&quot;type&quot;: &quot;module&quot;</code> from <code>E:\fm-nextjs\node_modules\@mdx-js\react\package.json</code> but it still gave errors.<br />
  How do I actually fix this. Seems like I have to manually change a bunch of files. Would be great if there is a workaround.</p>