<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<p dir="auto">To work properly and frictionless with all kinds of webpack loaders.</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">next dev seems to work with custom loaders, but it is very confusing, like what is the version of babel beeing used, you go to tutoriais on the internet and it uses options from older module versions<br>
<code class="notranslate">next build</code> and <code class="notranslate">next export</code> doest integrate well with custom loaders, it thorwn a error.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<p dir="auto">Add the loaders to <code class="notranslate">next.config.js</code></p>
<blockquote>
<p dir="auto">tip: find and run an example that is easy to hack</p>
</blockquote>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="config.module.rules.push({ test: /\.(jpg|png))/, use: [{ loader: 'file-loader' }, { loader: 'url-loader', options: { limit: 1 } }]})"><pre class="notranslate"><span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">module</span><span class="pl-kos">.</span><span class="pl-c1">rules</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>jpg<span class="pl-c1">|</span>png<span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span> <span class="pl-c1">use</span>: <span class="pl-kos">[</span><span class="pl-kos">{</span> <span class="pl-c1">loader</span>: <span class="pl-s">'file-loader'</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">loader</span>: <span class="pl-s">'url-loader'</span><span class="pl-kos">,</span> <span class="pl-c1">options</span>: <span class="pl-kos">{</span> <span class="pl-c1">limit</span>: <span class="pl-c1">1</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>
<div class="highlight highlight-text-adblock notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="npm install -S file-loader url-loader"><pre class="notranslate">npm install -S file-loader url-loader</pre></div>
<h2 dir="auto">Context</h2>


<p dir="auto">From a fresh new create-<a class="issue-link js-issue-link notranslate" rel="noopener noreferrer nofollow" href="https://linear.app/vercel/issue/NEXT-app">next-app</a> project, add a image to <code class="notranslate">/static</code>, import the image at <code class="notranslate">/page/index.js</code>, and use it as a url string <code class="notranslate">&lt;img src={myImage} /&gt;</code>, then add the custom loader, and try to</p>
<p dir="auto">1 - use development server<br>
2 - build and use static version to production (<code class="notranslate">npm i -g serve</code> can help)<br>
3 - build and use production server</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.2</td>
</tr>
<tr>
<td>node</td>
<td>9.4</td>
</tr>
<tr>
<td>OS</td>
<td>Windows 10</td>
</tr>
</tbody>
</table>
<hr>
<p dir="auto">I'm trying to support IE11 for my app to fix the error<br>
<code class="notranslate">TypeError: Object doesn't support property or method 'find'</code></p>
<p dir="auto">Using next <code class="notranslate">2.4.6</code> but also not working on latest beta</p>
<p dir="auto">Added a custom .babelerc together with <code class="notranslate">babel-preset-env</code> with the following config:</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;presets&quot;: [
    &quot;es2015&quot;,
    &quot;react&quot;,
    &quot;next/babel&quot;,
    &quot;stage-0&quot;,
    [ &quot;env&quot;, {
      &quot;targets&quot;: {
        &quot;safari&quot;: 10,
        &quot;ie&quot;: 11
      },
      &quot;modules&quot;: false,
      &quot;useBuiltIns&quot;: true,
      &quot;debug&quot;: true
    }]
  ],
}"><pre class="notranslate">{
  <span class="pl-ent">"presets"</span>: [
    <span class="pl-s"><span class="pl-pds">"</span>es2015<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>react<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>next/babel<span class="pl-pds">"</span></span>,
    <span class="pl-s"><span class="pl-pds">"</span>stage-0<span class="pl-pds">"</span></span>,
    [ <span class="pl-s"><span class="pl-pds">"</span>env<span class="pl-pds">"</span></span>, {
      <span class="pl-ent">"targets"</span>: {
        <span class="pl-ent">"safari"</span>: <span class="pl-c1">10</span>,
        <span class="pl-ent">"ie"</span>: <span class="pl-c1">11</span>
      },
      <span class="pl-ent">"modules"</span>: <span class="pl-c1">false</span>,
      <span class="pl-ent">"useBuiltIns"</span>: <span class="pl-c1">true</span>,
      <span class="pl-ent">"debug"</span>: <span class="pl-c1">true</span>
    }]
  ],
}</pre></div>
<p dir="auto">Enabled the debug flag so on startup I get the following log, which seems to mean that the polyfill are added.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="babel-preset-env: `DEBUG` option

Using targets:
{
  &quot;safari&quot;: &quot;10&quot;,
  &quot;ie&quot;: &quot;11&quot;
}

Modules transform: false

Using plugins:
  check-es2015-constants {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-arrow-functions {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-block-scoping {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-classes {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-computed-properties {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-destructuring {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-duplicate-keys {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-for-of {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-function-name {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-literals {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-object-super {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-parameters {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-shorthand-properties {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-spread {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-sticky-regex {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-template-literals {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-typeof-symbol {&quot;ie&quot;:&quot;11&quot;}
  transform-es2015-unicode-regex {&quot;ie&quot;:&quot;11&quot;}
  transform-regenerator {&quot;ie&quot;:&quot;11&quot;}
  transform-exponentiation-operator {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}
  transform-async-to-generator {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}
  syntax-trailing-function-commas {&quot;ie&quot;:&quot;11&quot;}

Using polyfills:
  es6.typed.array-buffer {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.int8-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.uint8-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.uint8-clamped-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.int16-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.uint16-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.int32-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.uint32-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.float32-array {&quot;ie&quot;:&quot;11&quot;}
  es6.typed.float64-array {&quot;ie&quot;:&quot;11&quot;}
  es6.map {&quot;ie&quot;:&quot;11&quot;}
  es6.set {&quot;ie&quot;:&quot;11&quot;}
  es6.weak-map {&quot;ie&quot;:&quot;11&quot;}
  es6.weak-set {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.apply {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.construct {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.define-property {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.delete-property {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.get {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.get-own-property-descriptor {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.get-prototype-of {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.has {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.is-extensible {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.own-keys {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.prevent-extensions {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.set {&quot;ie&quot;:&quot;11&quot;}
  es6.reflect.set-prototype-of {&quot;ie&quot;:&quot;11&quot;}
  es6.promise {&quot;ie&quot;:&quot;11&quot;}
  es6.symbol {&quot;ie&quot;:&quot;11&quot;}
  es6.object.assign {&quot;ie&quot;:&quot;11&quot;}
  es6.object.is {&quot;ie&quot;:&quot;11&quot;}
  es6.function.name {&quot;ie&quot;:&quot;11&quot;}
  es6.string.raw {&quot;ie&quot;:&quot;11&quot;}
  es6.string.from-code-point {&quot;ie&quot;:&quot;11&quot;}
  es6.string.code-point-at {&quot;ie&quot;:&quot;11&quot;}
  es6.string.repeat {&quot;ie&quot;:&quot;11&quot;}
  es6.string.starts-with {&quot;ie&quot;:&quot;11&quot;}
  es6.string.ends-with {&quot;ie&quot;:&quot;11&quot;}
  es6.string.includes {&quot;ie&quot;:&quot;11&quot;}
  es6.regexp.flags {&quot;ie&quot;:&quot;11&quot;}
  es6.regexp.match {&quot;ie&quot;:&quot;11&quot;}
  es6.regexp.replace {&quot;ie&quot;:&quot;11&quot;}
  es6.regexp.split {&quot;ie&quot;:&quot;11&quot;}
  es6.regexp.search {&quot;ie&quot;:&quot;11&quot;}
  es6.array.from {&quot;ie&quot;:&quot;11&quot;}
  es6.array.of {&quot;ie&quot;:&quot;11&quot;}
  es6.array.copy-within {&quot;ie&quot;:&quot;11&quot;}
  es6.array.find {&quot;ie&quot;:&quot;11&quot;}
  es6.array.find-index {&quot;ie&quot;:&quot;11&quot;}
  es6.array.fill {&quot;ie&quot;:&quot;11&quot;}
  es6.array.iterator {&quot;ie&quot;:&quot;11&quot;}
  es6.number.is-finite {&quot;ie&quot;:&quot;11&quot;}
  es6.number.is-integer {&quot;ie&quot;:&quot;11&quot;}
  es6.number.is-safe-integer {&quot;ie&quot;:&quot;11&quot;}
  es6.number.is-nan {&quot;ie&quot;:&quot;11&quot;}
  es6.number.epsilon {&quot;ie&quot;:&quot;11&quot;}
  es6.number.min-safe-integer {&quot;ie&quot;:&quot;11&quot;}
  es6.number.max-safe-integer {&quot;ie&quot;:&quot;11&quot;}
  es6.math.acosh {&quot;ie&quot;:&quot;11&quot;}
  es6.math.asinh {&quot;ie&quot;:&quot;11&quot;}
  es6.math.atanh {&quot;ie&quot;:&quot;11&quot;}
  es6.math.cbrt {&quot;ie&quot;:&quot;11&quot;}
  es6.math.clz32 {&quot;ie&quot;:&quot;11&quot;}
  es6.math.cosh {&quot;ie&quot;:&quot;11&quot;}
  es6.math.expm1 {&quot;ie&quot;:&quot;11&quot;}
  es6.math.fround {&quot;ie&quot;:&quot;11&quot;}
  es6.math.hypot {&quot;ie&quot;:&quot;11&quot;}
  es6.math.imul {&quot;ie&quot;:&quot;11&quot;}
  es6.math.log1p {&quot;ie&quot;:&quot;11&quot;}
  es6.math.log10 {&quot;ie&quot;:&quot;11&quot;}
  es6.math.log2 {&quot;ie&quot;:&quot;11&quot;}
  es6.math.sign {&quot;ie&quot;:&quot;11&quot;}
  es6.math.sinh {&quot;ie&quot;:&quot;11&quot;}
  es6.math.tanh {&quot;ie&quot;:&quot;11&quot;}
  es6.math.trunc {&quot;ie&quot;:&quot;11&quot;}
  es7.array.includes {&quot;ie&quot;:&quot;11&quot;}
  es7.object.values {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}
  es7.object.entries {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}
  es7.object.get-own-property-descriptors {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}
  es7.string.pad-start {&quot;ie&quot;:&quot;11&quot;}
  es7.string.pad-end {&quot;ie&quot;:&quot;11&quot;}
  web.timers {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}
  web.immediate {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}
  web.dom.iterable {&quot;safari&quot;:&quot;10&quot;,&quot;ie&quot;:&quot;11&quot;}"><pre class="notranslate"><code class="notranslate">babel-preset-env: `DEBUG` option

Using targets:
{
  "safari": "10",
  "ie": "11"
}

Modules transform: false

Using plugins:
  check-es2015-constants {"ie":"11"}
  transform-es2015-arrow-functions {"ie":"11"}
  transform-es2015-block-scoping {"ie":"11"}
  transform-es2015-classes {"ie":"11"}
  transform-es2015-computed-properties {"ie":"11"}
  transform-es2015-destructuring {"ie":"11"}
  transform-es2015-duplicate-keys {"ie":"11"}
  transform-es2015-for-of {"ie":"11"}
  transform-es2015-function-name {"ie":"11"}
  transform-es2015-literals {"ie":"11"}
  transform-es2015-object-super {"ie":"11"}
  transform-es2015-parameters {"ie":"11"}
  transform-es2015-shorthand-properties {"ie":"11"}
  transform-es2015-spread {"ie":"11"}
  transform-es2015-sticky-regex {"ie":"11"}
  transform-es2015-template-literals {"ie":"11"}
  transform-es2015-typeof-symbol {"ie":"11"}
  transform-es2015-unicode-regex {"ie":"11"}
  transform-regenerator {"ie":"11"}
  transform-exponentiation-operator {"safari":"10","ie":"11"}
  transform-async-to-generator {"safari":"10","ie":"11"}
  syntax-trailing-function-commas {"ie":"11"}

Using polyfills:
  es6.typed.array-buffer {"ie":"11"}
  es6.typed.int8-array {"ie":"11"}
  es6.typed.uint8-array {"ie":"11"}
  es6.typed.uint8-clamped-array {"ie":"11"}
  es6.typed.int16-array {"ie":"11"}
  es6.typed.uint16-array {"ie":"11"}
  es6.typed.int32-array {"ie":"11"}
  es6.typed.uint32-array {"ie":"11"}
  es6.typed.float32-array {"ie":"11"}
  es6.typed.float64-array {"ie":"11"}
  es6.map {"ie":"11"}
  es6.set {"ie":"11"}
  es6.weak-map {"ie":"11"}
  es6.weak-set {"ie":"11"}
  es6.reflect.apply {"ie":"11"}
  es6.reflect.construct {"ie":"11"}
  es6.reflect.define-property {"ie":"11"}
  es6.reflect.delete-property {"ie":"11"}
  es6.reflect.get {"ie":"11"}
  es6.reflect.get-own-property-descriptor {"ie":"11"}
  es6.reflect.get-prototype-of {"ie":"11"}
  es6.reflect.has {"ie":"11"}
  es6.reflect.is-extensible {"ie":"11"}
  es6.reflect.own-keys {"ie":"11"}
  es6.reflect.prevent-extensions {"ie":"11"}
  es6.reflect.set {"ie":"11"}
  es6.reflect.set-prototype-of {"ie":"11"}
  es6.promise {"ie":"11"}
  es6.symbol {"ie":"11"}
  es6.object.assign {"ie":"11"}
  es6.object.is {"ie":"11"}
  es6.function.name {"ie":"11"}
  es6.string.raw {"ie":"11"}
  es6.string.from-code-point {"ie":"11"}
  es6.string.code-point-at {"ie":"11"}
  es6.string.repeat {"ie":"11"}
  es6.string.starts-with {"ie":"11"}
  es6.string.ends-with {"ie":"11"}
  es6.string.includes {"ie":"11"}
  es6.regexp.flags {"ie":"11"}
  es6.regexp.match {"ie":"11"}
  es6.regexp.replace {"ie":"11"}
  es6.regexp.split {"ie":"11"}
  es6.regexp.search {"ie":"11"}
  es6.array.from {"ie":"11"}
  es6.array.of {"ie":"11"}
  es6.array.copy-within {"ie":"11"}
  es6.array.find {"ie":"11"}
  es6.array.find-index {"ie":"11"}
  es6.array.fill {"ie":"11"}
  es6.array.iterator {"ie":"11"}
  es6.number.is-finite {"ie":"11"}
  es6.number.is-integer {"ie":"11"}
  es6.number.is-safe-integer {"ie":"11"}
  es6.number.is-nan {"ie":"11"}
  es6.number.epsilon {"ie":"11"}
  es6.number.min-safe-integer {"ie":"11"}
  es6.number.max-safe-integer {"ie":"11"}
  es6.math.acosh {"ie":"11"}
  es6.math.asinh {"ie":"11"}
  es6.math.atanh {"ie":"11"}
  es6.math.cbrt {"ie":"11"}
  es6.math.clz32 {"ie":"11"}
  es6.math.cosh {"ie":"11"}
  es6.math.expm1 {"ie":"11"}
  es6.math.fround {"ie":"11"}
  es6.math.hypot {"ie":"11"}
  es6.math.imul {"ie":"11"}
  es6.math.log1p {"ie":"11"}
  es6.math.log10 {"ie":"11"}
  es6.math.log2 {"ie":"11"}
  es6.math.sign {"ie":"11"}
  es6.math.sinh {"ie":"11"}
  es6.math.tanh {"ie":"11"}
  es6.math.trunc {"ie":"11"}
  es7.array.includes {"ie":"11"}
  es7.object.values {"safari":"10","ie":"11"}
  es7.object.entries {"safari":"10","ie":"11"}
  es7.object.get-own-property-descriptors {"safari":"10","ie":"11"}
  es7.string.pad-start {"ie":"11"}
  es7.string.pad-end {"ie":"11"}
  web.timers {"safari":"10","ie":"11"}
  web.immediate {"safari":"10","ie":"11"}
  web.dom.iterable {"safari":"10","ie":"11"}
</code></pre></div>
<p dir="auto">However, at runtime, I still get the error on IE11 when I call the .find() method on an array.</p>
<p dir="auto">Anything I can do to double check to make sure the polyfills are injected correctly?</p>