I have a custom loader that load the following file data.js
const data = {
a: ()=> 8885555,
b: ()=> 55555
}
module.exports = name => {
return data[name] && data[name]()
}
when I change the above file like changing b
value the app breaks
ERROR in ../data.js?name=a
Module build failed: Error: Final loader (../data-loader.js) didn't return a Buffer or String
at runLoaders (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\webpack\lib\NormalModule.js:319:18)
at C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at runSyncOrAsync (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\loader-runner\lib\LoaderRunner.js:124:12)
at iterateNormalLoaders (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array.<anonymous> (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
at provider (C:\Users\010\Saber.js\webpack-hmr-3-ways\middleware\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9)
@ ./index.js 1:10-40
@ multi webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000 ./index.js
this is the custom webpack loader
const devalue = require('devalue')
const vm = require('vm');
module.exports = async function(source, map) {
const callback = this.async()
this.addDependency(this.resourcePath);
const sandbox = {
require,
module
}
vm.createContext(sandbox);
const mod = vm.runInContext(source, sandbox)
const result = await mod(this.resourceQuery.replace('?name=', ''))
return callback(null, `export default ${devalue(result)}`, map);
}
Here is a reproduction repo
So this is what should be done
const devalue = require('devalue')
const vm = require('vm');
module.exports = async function(source, map) {
const callback = this.async()
this.addDependency(this.resourcePath);
const sandbox = {
require,
module: {exports: {}}
}
vm.createContext(sandbox);
const mod = vm.runInContext(source, sandbox)
const result = await mod(this.resourceQuery.replace('?name=', ''))
return callback(null, `export default ${devalue(result)}`, map);
}
The problem is that I was overwriting the loader module.exports
with the data.js
file module.exports
because I was passing the same module
to the sandbox
so when hot reloading the exported function in the loader would have been replaced with the data.js
function which doesn't return a string (in this case because data[name]
would be undefined
) and that's the cause of the error