diff --git a/dist/riot-webpack-loader.cjs.js b/dist/riot-webpack-loader.cjs.js
index c1ad3fc..6c667ae 100644
--- a/dist/riot-webpack-loader.cjs.js
+++ b/dist/riot-webpack-loader.cjs.js
@@ -5,7 +5,7 @@ var loaderUtils = require('loader-utils');
 
 /**
  * Generate the hmr code depending on the tag generated by the compiler
- * @param   {string} path - path to the component file
+ * @param   {string} path - stringified, quote-enclosed path to the component file
  * @returns {string} the code needed to handle the riot hot reload
  */
 function hotReload(path) {
@@ -14,7 +14,7 @@ function hotReload(path) {
     const hotReload = require('@riotjs/hot-reload').default
     module.hot.accept()
     if (module.hot.data) {
-      const component = require('${path}').default;
+      const component = require(${path}).default;
       hotReload(component)
     }
   }
@@ -41,7 +41,9 @@ function index(source) {
   );
 
   // generate the output code
-  const output = `${code}${opts.hot ? hotReload(this.resourcePath) : ''}`;
+  // convert webpack's absolute path to a script-friendly string for hotReload
+  const escapedPath = loaderUtils.stringifyRequest(this, this.resourcePath);
+  const output = `${code}${opts.hot ? hotReload(escapedPath) : ''}`;
 
   // cache this module
   if (this.cacheable) this.cacheable();
diff --git a/dist/riot-webpack-loader.esm.js b/dist/riot-webpack-loader.esm.js
index 433a47c..3936b54 100644
--- a/dist/riot-webpack-loader.esm.js
+++ b/dist/riot-webpack-loader.esm.js
@@ -1,9 +1,9 @@
 import { compile } from '@riotjs/compiler';
-import { getOptions } from 'loader-utils';
+import { getOptions, stringifyRequest } from 'loader-utils';
 
 /**
  * Generate the hmr code depending on the tag generated by the compiler
- * @param   {string} path - path to the component file
+ * @param   {string} path - stringified, quote-enclosed path to the component file
  * @returns {string} the code needed to handle the riot hot reload
  */
 function hotReload(path) {
@@ -12,7 +12,7 @@ function hotReload(path) {
     const hotReload = require('@riotjs/hot-reload').default
     module.hot.accept()
     if (module.hot.data) {
-      const component = require('${path}').default;
+      const component = require(${path}).default;
       hotReload(component)
     }
   }
@@ -39,7 +39,9 @@ function index(source) {
   );
 
   // generate the output code
-  const output = `${code}${opts.hot ? hotReload(this.resourcePath) : ''}`;
+  // convert webpack's absolute path to a script-friendly string for hotReload
+  const escapedPath = stringifyRequest(this, this.resourcePath);
+  const output = `${code}${opts.hot ? hotReload(escapedPath) : ''}`;
 
   // cache this module
   if (this.cacheable) this.cacheable();
diff --git a/src/index.js b/src/index.js
index 2a93c4d..148b045 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
-import {compile} from '@riotjs/compiler'
 import {getOptions, stringifyRequest} from 'loader-utils'
+import {compile} from '@riotjs/compiler'
 
 /**
  * Generate the hmr code depending on the tag generated by the compiler