<h2 dir="auto">Write a Component</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import imageFile from &quot;./happy-image.svg&quot;;
export default ()=&gt; &lt;img src={imageFile} alt=&quot;happy image&quot; /&gt;;"><pre class="notranslate"><code class="notranslate">import imageFile from "./happy-image.svg";
export default ()=&gt; &lt;img src={imageFile} alt="happy image" /&gt;;
</code></pre></div>
<p dir="auto">obs.: Image does exist and it is on the same directory</p>
<h2 dir="auto">next.config.js</h2>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module.exports = {
  webpack: (config, { dev }) =&gt; {

    config.resolve = config.resolve || {};
    config.resolve.symlinks = false;

    config.module.rules.push( 
      {
        test: /\.(gif|svg)(\?.*)?$/i,
        use: [
          {
            loader: &quot;emit-file-loader&quot;,
            options: {
              name: &quot;dist/[path][name].[ext]&quot;,
            },
          },
          {
            loader: &quot;file-loader&quot;,
            options: {
              limit: 1000,
            },
          },
        ],
      });
  }
}
"><pre class="notranslate"><code class="notranslate">module.exports = {
  webpack: (config, { dev }) =&gt; {

    config.resolve = config.resolve || {};
    config.resolve.symlinks = false;

    config.module.rules.push( 
      {
        test: /\.(gif|svg)(\?.*)?$/i,
        use: [
          {
            loader: "emit-file-loader",
            options: {
              name: "dist/[path][name].[ext]",
            },
          },
          {
            loader: "file-loader",
            options: {
              limit: 1000,
            },
          },
        ],
      });
  }
}

</code></pre></div>


<ul dir="auto">
<li>[x ] 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">Component get rendered with correct image url</p>
<h2 dir="auto">Current Behavior</h2>


<p dir="auto">Error: ReferenceError: __webpack_public_path__ is not defined</p>
<ul dir="auto">
<li>SVG file was emited to .next/[hash].svg</li>
<li>There is a module in .next/build/components_folder/happy-image.svg with contents:</li>
<li><code class="notranslate">module.exports = __webpack_public_path__ + "[hash].svg";</code></li>
</ul>
<p dir="auto">*.note __webpack_public_path__  was not defined anywhere</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li>write code described above</li>
</ol>
<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>v2.4.9</td>
</tr>
<tr>
<td>node</td>
<td>v8.2.0</td>
</tr>
<tr>
<td>OS</td>
<td>OSX SIERRA</td>
</tr>
</tbody>
</table>
<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?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I want to use a decorator to refer to the router, but there is a problem with type checking in TypeScript. (Does not affect its work, only type checking error)</p>
<p dir="auto"><code class="notranslate">@types/next/router.d.ts</code></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export function withRouter&lt;T extends {}&gt;(
  Component: React.ComponentType&lt;T &amp; { router: SingletonRouter }&gt;
): React.ComponentType&lt;T&gt;;"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">function</span> <span class="pl-s1">withRouter</span><span class="pl-c1">&lt;</span><span class="pl-smi">T</span> <span class="pl-k">extends</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-kos">(</span>
  <span class="pl-smi">Component</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentType</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span> <span class="pl-c1">&amp;</span> <span class="pl-kos">{</span> <span class="pl-c1">router</span>: <span class="pl-smi">SingletonRouter</span> <span class="pl-kos">}</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">)</span>: <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-smi">ComponentType</span><span class="pl-kos">&lt;</span><span class="pl-smi">T</span><span class="pl-kos">&gt;</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">First of all, I think a little problem in the type definition, I think <code class="notranslate">router</code> property should be optional.<br>
Because <code class="notranslate">router</code> property is injected from<code class="notranslate"> withRouter</code> does not require passing this property when I refer to the component.</p>
<div class="highlight highlight-source-diff notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export function withRouter&lt;T extends {}&gt;(
-  Component: React.ComponentType&lt;T &amp; { router: SingletonRouter }&gt;
+  Component: React.ComponentType&lt;T &amp; { router?: SingletonRouter }&gt;
): React.ComponentType&lt;T&gt;;"><pre class="notranslate">export function withRouter&lt;T extends {}&gt;(
<span class="pl-md"><span class="pl-md">-</span>  Component: React.ComponentType&lt;T &amp; { router: SingletonRouter }&gt;</span>
<span class="pl-mi1"><span class="pl-mi1">+</span>  Component: React.ComponentType&lt;T &amp; { router?: SingletonRouter }&gt;</span>
): React.ComponentType&lt;T&gt;;</pre></div>
<hr>
<p dir="auto"><strong>There is no problem using function injection</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react'
import { withRouter, SingletonRouter } from 'next/router'

interface Props {
  router?: SingletonRouter
}

class SiderMenu extends React.Component&lt;Props&gt; { }
export default withRouter(SiderMenu)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">withRouter</span><span class="pl-kos">,</span> <span class="pl-smi">SingletonRouter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/router'</span>

<span class="pl-k">interface</span> <span class="pl-smi">Props</span> <span class="pl-kos">{</span>
  <span class="pl-c1">router</span>?: <span class="pl-smi">SingletonRouter</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-smi">SiderMenu</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withRouter</span><span class="pl-kos">(</span><span class="pl-smi">SiderMenu</span><span class="pl-kos">)</span></pre></div>
<p dir="auto"><strong>There was an error using the decorator</strong></p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import * as React from 'react'
import { withRouter, SingletonRouter } from 'next/router'

interface Props {
  router?: SingletonRouter
}

@withRouter
export default class SiderMenu extends React.Component&lt;Props&gt; { }"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-smi">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">withRouter</span><span class="pl-kos">,</span> <span class="pl-smi">SingletonRouter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'next/router'</span>

<span class="pl-k">interface</span> <span class="pl-smi">Props</span> <span class="pl-kos">{</span>
  <span class="pl-c1">router</span>?: <span class="pl-smi">SingletonRouter</span>
<span class="pl-kos">}</span>

@<span class="pl-s1">withRouter</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">class</span> <span class="pl-smi">SiderMenu</span> <span class="pl-k">extends</span> <span class="pl-smi">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span><span class="pl-kos">&lt;</span><span class="pl-smi">Props</span><span class="pl-kos">&gt;</span> <span class="pl-kos">{</span> <span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>TS Error</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@withRouter
^^^
[ts]
Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;Props&gt;' is not assignable to type 'void | typeof SiderMenu'.
    Type 'ComponentClass&lt;Props&gt;' is not assignable to type 'typeof SiderMenu'.
      Type 'Component&lt;Props, ComponentState&gt;' is not assignable to type 'SiderMenu'.
        Types of property 'render' are incompatible.
          Type '() =&gt; ReactNode' is not assignable to type '() =&gt; Element'.
            Type 'ReactNode' is not assignable to type 'Element'.
              Type 'string' is not assignable to type 'Element'."><pre class="notranslate"><code class="notranslate">@withRouter
^^^
[ts]
Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass&lt;Props&gt;' is not assignable to type 'void | typeof SiderMenu'.
    Type 'ComponentClass&lt;Props&gt;' is not assignable to type 'typeof SiderMenu'.
      Type 'Component&lt;Props, ComponentState&gt;' is not assignable to type 'SiderMenu'.
        Types of property 'render' are incompatible.
          Type '() =&gt; ReactNode' is not assignable to type '() =&gt; Element'.
            Type 'ReactNode' is not assignable to type 'Element'.
              Type 'string' is not assignable to type 'Element'.
</code></pre></div>