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




<p dir="auto"><strong>What is the current behavior?</strong><br>
When I use webpack to bundle code that includes a Web Worker which contains a dynamic import, the resulting code erroneously duplicates the file path of the chunk that it's trying to load. Instead of requesting something like <code class="notranslate">foo/bar/abc.[a1b2c3d4].chunk.js</code>, it requests <code class="notranslate">foo/bar/foo/bar/abc.[a1b2c3d4].chunk.js</code>.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">I encountered this in the context of <code class="notranslate">create-react-app</code>, so that's how I reproduce it. I don't know enough about webpack config to be able to distill it down to the absolute minimum. The issue may be with <code class="notranslate">create-react-app</code> or <code class="notranslate">webpack</code>.</p>
<p dir="auto">My steps to reproduce are described in this bug report:</p>
<p dir="auto"><a href="https://github.com/facebook/create-react-app/issues/12503" data-hovercard-type="issue" data-hovercard-url="/facebook/create-react-app/issues/12503/hovercard">Duplicate path segment error in dynamic imports in Web Worker (react-scripts 5, webpack 5)</a></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The path to the dynamically imported chunk should not have the duplicated path in front of the file name.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.74.0<br>
Node.js version: 16.15.0<br>
Operating System: Windows 10<br>
Additional tools:</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto">I have import some of my modules dynamically based on button click, i have used like below"</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Button } from '@syncfusion/ej2-buttons';

// Initialize Button component.
let button: Button = new Button({ content: 'Button' });

// Render initialized Button.
button.appendTo('#element');

document.getElementById('element').addEventListener(&quot;click&quot;, function(){
  check();
});

async function check() {
import(&quot;@syncfusion/ej2-grids&quot;).then((Grid) =&gt; {
  debugger
  console.log(Grid);
});
}"><pre class="notranslate"><code class="notranslate">import { Button } from '@syncfusion/ej2-buttons';

// Initialize Button component.
let button: Button = new Button({ content: 'Button' });

// Render initialized Button.
button.appendTo('#element');

document.getElementById('element').addEventListener("click", function(){
  check();
});

async function check() {
import("@syncfusion/ej2-grids").then((Grid) =&gt; {
  debugger
  console.log(Grid);
});
}
</code></pre></div>
<p dir="auto">my webpack config file:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const path = require(&quot;path&quot;);
const UglifyJsPlugin = require(&quot;uglifyjs-webpack-plugin&quot;);

module.exports = {
  mode: &quot;development&quot;,
  entry: {
    &quot;src/app/bundle&quot;: &quot;./src/app/index.ts&quot;
  },
  output: {
    publicPath: &quot;/js/&quot;,
    filename: &quot;src/app/bundle.js&quot;
  },
  devtool: &quot;none&quot;,
  module: {
    rules: [
      {
        loader: &quot;ts-loader&quot;,
        exclude: /node_modules/
      }
    ]
  },

  resolve: {
    extensions: [&quot;.ts&quot;, &quot;.js&quot;]
  }
};"><pre class="notranslate"><code class="notranslate">const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    "src/app/bundle": "./src/app/index.ts"
  },
  output: {
    publicPath: "/js/",
    filename: "src/app/bundle.js"
  },
  devtool: "none",
  module: {
    rules: [
      {
        loader: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },

  resolve: {
    extensions: [".ts", ".js"]
  }
};
</code></pre></div>
<p dir="auto">when i compile and ru my application it throws below error</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/36756050/73812752-edcda300-4803-11ea-9feb-8b3dc07998c0.png"><img src="https://user-images.githubusercontent.com/36756050/73812752-edcda300-4803-11ea-9feb-8b3dc07998c0.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
Throws error</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ul dir="auto">
<li>clone sample - <a href="https://github.com/kumaresan-subramani/dynamic-import/blob/master/webpack.config.js">https://github.com/kumaresan-subramani/dynamic-import/blob/master/webpack.config.js</a></li>
<li>run <code class="notranslate">npm i</code></li>
<li>gulp compile</li>
<li>gulp start</li>
</ul>
<p dir="auto">Then click button in browser, you will see reported error in my console.</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Dynamic module should load properly</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:</p>
<blockquote>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&quot;typescript&quot;: &quot;3.7.5&quot;,
&quot;uglifyjs-webpack-plugin&quot;: &quot;^2.0.1&quot;,
&quot;webpack&quot;: &quot;^4.29.6&quot;,
&quot;webpack-cli&quot;: &quot;*&quot;,
&quot;webpack-stream&quot;: &quot;^5.2.1&quot;"><pre class="notranslate"><code class="notranslate">"typescript": "3.7.5",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.29.6",
"webpack-cli": "*",
"webpack-stream": "^5.2.1"
</code></pre></div>
</blockquote>
<p dir="auto">Node.js version:  10.15.1<br>
Operating System:  windows 10<br>
Additional tools:</p>