<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When I try to import <code class="notranslate">react-redux</code> from my client code the server throws this error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ node dist/ssr-server.js 
internal/modules/cjs/loader.js:1153
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/dev/testssr/node_modules/@babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /home/dev/testssr/node_modules/@babel/runtime/helpers/esm/extends.js from /home/dev/testssr/dist/ssr-server.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 extends.js to end in .cjs, change the requiring code to use import(), or remove &quot;type&quot;: &quot;module&quot; from /home/dev/testssr/node_modules/@babel/runtime/helpers/esm/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:13)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at eval (webpack:///external_%22@babel/runtime/helpers/esm/extends%22?:1:18)
    at Object.@babel/runtime/helpers/esm/extends (/home/dev/testssr/dist/ssr-server.js:456:1)
    at __webpack_require__ (/home/dev/testssr/dist/ssr-server.js:21:30)
    at eval (webpack:///./client/node_modules/react-redux/es/components/connectAdvanced.js?:3:92)
    at Module../client/node_modules/react-redux/es/components/connectAdvanced.js (/home/dev/testssr/dist/ssr-server.js:134:1) {
  code: 'ERR_REQUIRE_ESM'
}"><pre class="notranslate"><code class="notranslate">$ node dist/ssr-server.js 
internal/modules/cjs/loader.js:1153
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/dev/testssr/node_modules/@babel/runtime/helpers/esm/extends.js
require() of ES modules is not supported.
require() of /home/dev/testssr/node_modules/@babel/runtime/helpers/esm/extends.js from /home/dev/testssr/dist/ssr-server.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename extends.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/dev/testssr/node_modules/@babel/runtime/helpers/esm/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:13)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at eval (webpack:///external_%22@babel/runtime/helpers/esm/extends%22?:1:18)
    at Object.@babel/runtime/helpers/esm/extends (/home/dev/testssr/dist/ssr-server.js:456:1)
    at __webpack_require__ (/home/dev/testssr/dist/ssr-server.js:21:30)
    at eval (webpack:///./client/node_modules/react-redux/es/components/connectAdvanced.js?:3:92)
    at Module../client/node_modules/react-redux/es/components/connectAdvanced.js (/home/dev/testssr/dist/ssr-server.js:134:1) {
  code: 'ERR_REQUIRE_ESM'
}
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">I've uploaded a simple reproduction of the error: <a href="https://github.com/l09a/webpack-babel-bug">https://github.com/l09a/webpack-babel-bug</a></p>
<p dir="auto">To reproduce:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ git clone https://github.com/l09a/webpack-babel-bug
$ cd webpack-babel-bug/client
$ npm i
$ cd ..
$ npm i
$ npm start
$ node dist/ssr-server.js"><pre class="notranslate"><code class="notranslate">$ git clone https://github.com/l09a/webpack-babel-bug
$ cd webpack-babel-bug/client
$ npm i
$ cd ..
$ npm i
$ npm start
$ node dist/ssr-server.js
</code></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The code runs without error.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.1.0<br>
Node.js version: v12.18.4<br>
Operating System: Ubuntu 20.04.1 LTS<br>
Additional tools:</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">When saving a file it appears Webpack is recompiling twice.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Create a barebones project <a href="https://github.com/webpack/webpack/files/8126010/test.zip">test.zip</a>. Run Webpack in watch mode. Save a file.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/1622446/155362119-cb227dfc-7aab-44b8-8374-84e9268c21bb.gif"><img src="https://user-images.githubusercontent.com/1622446/155362119-cb227dfc-7aab-44b8-8374-84e9268c21bb.gif" alt="2022-02-23 10 20 24" data-animated-image="" style="max-width: 100%;"></a></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">It should only recompile once.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.69.1<br>
Node.js version: 14.15.4<br>
Operating System: Mac OS 11.6.4<br>
Additional tools: yarn 1.22.5</p>