title: Import ES module in Next.js ERR_REQUIRE_ESM
body: <p>I came upon this error when trying to use <a href="https://github.com/sindresorhus/ky" rel="noreferrer"><code>ky</code></a> in a Next.js project:</p>
  <blockquote>
  <p>Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /foo/node_modules/ky/index.js</p>
  </blockquote>
  <p>I think the problem is that Webpack (or Babel) is transforming all <code>import</code>s to <code>require()</code>s but <a href="https://github.com/sindresorhus/ky-universal/releases/tag/v0.9.0" rel="noreferrer"><code>ky</code> is a pure ES module</a>.</p>
  <p>I got it working by dynamically importing <code>ky</code> before using it but it's not elegant nor efficient.</p>
  <pre><code>const handleFormSubmit = async (event) =&gt; {
    const ky = (await import(&quot;ky&quot;)).default;
  
    const response = await ky
      .get('http://localhost/api/foo')
      .json();
  };
  </code></pre>
  <p>Any suggestions?</p>