Next.js: __webpack_public_path__ is not defined

Created on 2 Aug 2017 · 3Comments · Source: vercel/next.js

Write a Component

import imageFile from "./happy-image.svg";
export default ()=> <img src={imageFile} alt="happy image" />;

obs.: Image does exist and it is on the same directory

next.config.js

module.exports = {
  webpack: (config, { dev }) => {

    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,
            },
          },
        ],
      });
  }
}

[x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Component get rendered with correct image url

Current Behavior

Error: ReferenceError: __webpack_public_path__ is not defined

SVG file was emited to .next/[hash].svg
There is a module in .next/build/components_folder/happy-image.svg with contents:
module.exports = __webpack_public_path__ + "[hash].svg";

*.note __webpack_public_path__ was not defined anywhere