__webpack_require__.hmd is not a function #2651
Comments
|
It looks like your sample repo is our base webpack sample with some added dependencies but is missing vue configuration and vue webpack configuration. I am going to assume that you are using a Vue CLI 4.x project, in which case the configuration below (from our docs) should work for you: Wallaby.js const config = require("@vue/cli-service/webpack.config.js");
const redundantPlugins = {
ForkTsCheckerWebpackPlugin: true,
PreloadPlugin: true,
HtmlWebpackPlugin: true,
CopyPlugin: true,
CaseSensitivePathsPlugin: true,
FriendlyErrorsWebpackPlugin: true,
};
config.plugins = config.plugins.filter(
(plugin) => !(plugin.constructor && redundantPlugins[plugin.constructor.name])
);
// vue files are split into multiple webpack modules,
// we need to choose and map script webpack resource (i.e. module) to one absolute file path
const mapResourceToPath = (context) => {
const resource = context.resource;
if (!resource) return resource;
if (context.version) {
// loading phase
if (resource.endsWith("vue")) {
return `${resource}?ignore`;
}
return resource.indexOf("type=script") > 0
? context.resourcePath
: resource;
}
// processing phase
return resource.indexOf("type=script") > 0 && context.wallaby
? resource.substring(0, resource.indexOf("?"))
: resource.endsWith("vue")
? `${resource}?ignore`
: resource;
};
module.exports = function(wallaby) {
return {
files: [
{ pattern: "src/**/*.*", load: false },
{ pattern: "tests/**/*.*", load: false },
{ pattern: "tests/**/*.spec.*", load: false, ignore: true }
],
tests: [
{ pattern: "tests/**/*.*", load: false },
{ pattern: "tests/**/*.spec.*", load: false }
],
postprocessor: wallaby.postprocessors.webpack(config, {
setupFiles: [require.resolve("@vue/cli-plugin-unit-mocha/setup")],
mapResourceToPath: mapResourceToPath,
}),
env: {
kind: "chrome",
},
setup: function() {
// required to trigger test loading
window.__moduleBundler.loadTests();
},
};
};If you're still having problems, would you mind updating the sample repo so that your vue code runs tests outside of Wallaby, or else provide us with a different sample repo? |
|
Hi! I'm not familiar with Vue CLI. In the real repo where I encountered this problem, we're just using Vue as an imported module and it works with Karma and karma-webpack, but not with Wallaby. I'll try the suggested configuration and will let you know how it works. |
|
If it doesn't work for you, would you be able to duplicate your configuration so that we can see your karma tests running outside of wallaby (including your karma-webpack config)? |
|
Thank you, the proposed solution got rid of the hmd problem. This opened up for other problems, some of which Wallay was helpful in diagnosing, others which are more mysterious. I'll open separate issues for the ones I'm not able to figure out. |
Issue description or question
I have a project that contains Vue SFC files. These are processed by Webpack's vue-loader. When I try to use Wallaby instead of Karma+karma-webpack, I get:
To reproduce, run Wallaby from /~https://github.com/provegard/wallaby-webpack-sample/tree/vue-hmd. Please note that the repro is on the vue-hmd branch.
Wallaby diagnostics report
The text was updated successfully, but these errors were encountered: