<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>


<p dir="auto"><strong>What is the current behavior?</strong><br>
Source maps for scss files produced by webpack contains duplicate parts like <code class="notranslate">C:\...C:\...\some-file.scss</code>.<br>
I'd like to use relative paths but I can't understand why webpack use absolute paths for css files.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
There is my loaders configuration for scss files:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="loader: [
    &quot;style-loader&quot;,
    {
        loader: &quot;css-loader&quot;,
        options: {
            sourceMap: true,
            minimize: true,
            importLoaders: 2
        }
    },
    {
        loader: &quot;postcss-loader&quot;,
        options: {
            sourceMap: true,
            plugins: function () {
                return [
                    require(&quot;autoprefixer&quot;)({
                        browsers: [&quot;last 4 versions&quot;]
                    })
                ];
            }
        }
    },
    {
        loader: &quot;sass-loader&quot;,
        options: {
            sourceMap: true
        }
    },
    &quot;sass-bulk-import-loader&quot;
]"><pre class="notranslate"><code class="notranslate">loader: [
    "style-loader",
    {
        loader: "css-loader",
        options: {
            sourceMap: true,
            minimize: true,
            importLoaders: 2
        }
    },
    {
        loader: "postcss-loader",
        options: {
            sourceMap: true,
            plugins: function () {
                return [
                    require("autoprefixer")({
                        browsers: ["last 4 versions"]
                    })
                ];
            }
        }
    },
    {
        loader: "sass-loader",
        options: {
            sourceMap: true
        }
    },
    "sass-bulk-import-loader"
]
</code></pre></div>



<p dir="auto"><strong>What is the expected behavior?</strong><br>
The source map file have to containe one absolute or relative path to the source file.</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong><br>
webpack 2.2,1 but I also tested with 2.6.1 and the problem is the same<br>
node.js 7.7.4<br>
"style-loader": "^0.13.1"<br>
"css-loader": "^0.28.4",<br>
"postcss-loader": "^2.0.5",<br>
"autoprefixer": "^7.1.1",<br>
"node-sass": "^4.5.2",<br>
"sass-loader": "^6.0.5"<br>
Windows 7</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto">Cannot build a webpack project with the latest SDK installed, <code class="notranslate">@aws-sdk/lib-storage@3.17.0</code>. I get the following error: <code class="notranslate">Module not found: Error: Can't resolve 'fs' in ...</code></p>
<h3 dir="auto">Setup</h3>
<p dir="auto">Below is the minimal setup for reproducing this problem.</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$ tree
.
├── package-lock.json
├── package.json
└── src
    └── index.js

1 directory, 3 files"><pre class="notranslate">$ tree
<span class="pl-c1">.</span>
├── package-lock.json
├── package.json
└── src
    └── index.js

1 directory, 3 files</pre></div>
<p dir="auto">Contents of <code class="notranslate">package.json</code>:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;ttt&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;private&quot;: true,
  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;webpack --mode development&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;webpack&quot;: &quot;^4.46.0&quot;,
    &quot;webpack-cli&quot;: &quot;^3.3.12&quot;,
    &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;
  },
  &quot;dependencies&quot;: {
    &quot;@aws-sdk/client-s3&quot;: &quot;^3.17.0&quot;,
    &quot;@aws-sdk/lib-storage&quot;: &quot;^3.17.0&quot;
  }
}"><pre class="notranslate">{
  <span class="pl-ent">"name"</span>: <span class="pl-s"><span class="pl-pds">"</span>ttt<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"version"</span>: <span class="pl-s"><span class="pl-pds">"</span>1.0.0<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"private"</span>: <span class="pl-c1">true</span>,
  <span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"build"</span>: <span class="pl-s"><span class="pl-pds">"</span>webpack --mode development<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"devDependencies"</span>: {
    <span class="pl-ent">"webpack"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.46.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"webpack-cli"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.3.12<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"webpack-dev-server"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.11.2<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"@aws-sdk/client-s3"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.17.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@aws-sdk/lib-storage"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.17.0<span class="pl-pds">"</span></span>
  }
}</pre></div>
<p dir="auto">Contents of <code class="notranslate">src/index.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { S3Client } from '@aws-sdk/client-s3';
import { Upload } from '@aws-sdk/lib-storage';

console.log('+=+ S3Client', S3Client);
console.log('+=+ Upload', Upload);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">S3Client</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@aws-sdk/client-s3'</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">Upload</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@aws-sdk/lib-storage'</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">'+=+ S3Client'</span><span class="pl-kos">,</span> <span class="pl-v">S3Client</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">'+=+ Upload'</span><span class="pl-kos">,</span> <span class="pl-v">Upload</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">I get the following error:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
ERROR in ./node_modules/@aws-sdk/lib-storage/dist/es/runtimeConfig.js
Module not found: Error: Can't resolve 'fs' in '/Users/korya/dev/ttt/node_modules/@aws-sdk/lib-storage/dist/es'
 @ ./node_modules/@aws-sdk/lib-storage/dist/es/runtimeConfig.js 3:0-31 7:106-115
 @ ./node_modules/@aws-sdk/lib-storage/dist/es/bytelength.js
 @ ./node_modules/@aws-sdk/lib-storage/dist/es/Upload.js
 @ ./node_modules/@aws-sdk/lib-storage/dist/es/index.js
 @ ./src/index.js"><pre class="notranslate">ERROR <span class="pl-k">in</span> ./node_modules/@aws-sdk/lib-storage/dist/es/runtimeConfig.js
Module not found: Error: Can<span class="pl-s"><span class="pl-pds">'</span>t resolve <span class="pl-pds">'</span></span>fs<span class="pl-s"><span class="pl-pds">'</span> in <span class="pl-pds">'</span></span>/Users/korya/dev/ttt/node_modules/@aws-sdk/lib-storage/dist/es<span class="pl-s"><span class="pl-pds">'</span></span>
<span class="pl-s"> @ ./node_modules/@aws-sdk/lib-storage/dist/es/runtimeConfig.js 3:0-31 7:106-115</span>
<span class="pl-s"> @ ./node_modules/@aws-sdk/lib-storage/dist/es/bytelength.js</span>
<span class="pl-s"> @ ./node_modules/@aws-sdk/lib-storage/dist/es/Upload.js</span>
<span class="pl-s"> @ ./node_modules/@aws-sdk/lib-storage/dist/es/index.js</span>
<span class="pl-s"> @ ./src/index.js</span></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li>Create the project</li>
<li>Install deps: <code class="notranslate">npm install</code></li>
<li>Try to build it using <code class="notranslate">npm run build</code> (or just by running <code class="notranslate">npx webpack</code>)</li>
</ol>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">The project should be successfully built and <code class="notranslate">Upload</code> imported <code class="notranslate">@aws-sdk/lib-storage</code> should be configured to work in browser's environment (as expected).</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.46.0<br>
Node.js version: 15.14.0<br>
npm version: 7.12.1<br>
Operating System: MacOS Catalina<br>
Additional tools:</p>