title: Compiling legacy components in Next.js (Can't resolve 'react/jsx-dev-runtime', Global CSS cannot be imported)
body: <p>I've just spun up a new Next.js project (React v 17.0.1). I am attempting to compile and import components from a legacy project. Seeing a few errors getting things to work:</p>
  <ol>
  <li><code>Module not found: Can't resolve 'react/jsx-dev-runtime'</code>. I have a hunch this may have something to do with the <a href="https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html" rel="nofollow noreferrer">new JSX compiler in React 17</a>.
  <ul>
  <li>This <em>can</em> be resolved by adding <code>/** @jsxRuntime classic */</code> to the top of the file, but i'd prefer to just turn on the classic compiler. Is this possible?</li>
  </ul>
  </li>
  <li><code>Global CSS cannot be imported from files other than your Custom &lt;App&gt;</code>
  <ul>
  <li>This can be resolved by using modules, or importing in <code>pages/_app</code>. However, i'd like to turn this safety feature off, leaving the legacy components as is.</li>
  </ul>
  </li>
  </ol>
  <h3>Questions:</h3>
  <ol>
  <li>How can I force Next.js to use the <code>classic</code> JSX compiler instead of the new <code>automatic</code> one</li>
  <li>How do I turn off the safety &quot;feature&quot; forcing CSS to only be imported to <code>_app</code>?</li>
  </ol>