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




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Webpack stores absolute paths for node_modules (not only for node_modules I believe). So when the base path changes it leads to error like that:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo]
/Users/v7rulnik/projects/project/node_modules/emojis-list invalidated because hashes differ
(missing != emojis-list@3.0.0)"><pre class="notranslate"><code class="notranslate">[webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo]
/Users/v7rulnik/projects/project/node_modules/emojis-list invalidated because hashes differ
(missing != emojis-list@3.0.0)
</code></pre></div>
<p dir="auto">The main problem that there are environments where users can't control the base directory. For example Jenkins CI. Base directory in Jenkins looks like this: <code class="notranslate">/home/jenkins/agent/workspace/$PROJECT_NAME_$GIT_BRANCH/</code>. So it's impossible to share cache between branches.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>Run webpack with cache enabled in the project directory, for example: <code class="notranslate">~/project/</code></li>
<li>Rename project directory: <code class="notranslate">~/project/ → ~/project_renamed/</code></li>
<li>Run webpack in <code class="notranslate">~/project_renamed/</code></li>
</ol>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The base directory shouldn't affect persistent caching. Maybe we can store relative paths in pack files and concatenate them with current <a href="https://webpack.js.org/configuration/entry-context/#context" rel="nofollow">context</a>?</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version: 5.32.0<br>
Node.js version: 14.15.4<br>
Operating System: MacOS</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>Files</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// components/common.js
export function test() {
  console.log('commonjs')
}

// src/main1.js
import { test } from './components/common'
test()

// src/main2.js
import { test } from './components/common'
test()

// src/main.js
const a = () =&gt; import('./main2')
const b = () =&gt; import('./main3')
console.log(a);
console.log(b);
"><pre class="notranslate"><span class="pl-c">// components/common.js</span>
<span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'commonjs'</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span>

<span class="pl-c">// src/main1.js</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">test</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./components/common'</span>
<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

<span class="pl-c">// src/main2.js</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">test</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'./components/common'</span>
<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

<span class="pl-c">// src/main.js</span>
<span class="pl-k">const</span> <span class="pl-en">a</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./main2'</span><span class="pl-kos">)</span>
<span class="pl-k">const</span> <span class="pl-en">b</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./main3'</span><span class="pl-kos">)</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">a</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">b</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><code class="notranslate">main1.js</code> bundled to <code class="notranslate">1.js</code>, <code class="notranslate">main2.js</code> bundled to <code class="notranslate">2.js</code>,<br>
but <code class="notranslate">commonn.js</code> bundled to both <code class="notranslate">1.js</code> and <code class="notranslate">2.js</code></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><code class="notranslate">commons.js</code> should be bundled to <code class="notranslate">component.js</code></p>


<p dir="auto"><strong>Other relevant information:</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// webpack.config.js
const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, 'dist')
  },
  optimization: {
    minimize: false,
    splitChunks: {
      cacheGroups: {
        components: {
          name: 'components',
          priority: 30,
          minChunks: 1,
          reuseExistingChunk: false,
          test: 'components'
        },
      },
    },
  },
}
"><pre class="notranslate"><span class="pl-c">// webpack.config.js</span>
<span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span>
<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-s">'./src/main.js'</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'dist'</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">optimization</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">minimize</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-c1">splitChunks</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">cacheGroups</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">components</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">name</span>: <span class="pl-s">'components'</span><span class="pl-kos">,</span>
          <span class="pl-c1">priority</span>: <span class="pl-c1">30</span><span class="pl-kos">,</span>
          <span class="pl-c1">minChunks</span>: <span class="pl-c1">1</span><span class="pl-kos">,</span>
          <span class="pl-c1">reuseExistingChunk</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
          <span class="pl-c1">test</span>: <span class="pl-s">'components'</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span></pre></div>