Vue packages version mismatch error in non-Vue project

[jacobjove]

When I tried to run the cli, I got the following error:

Error: 

Vue packages version mismatch:

- vue@3.2.45 (/Users/jacob/code/saleor-platform/react/node_modules/.pnpm/vue@3.2.45/node_modules/vue/index.js)
- vue-template-compiler@2.7.14 (/Users/jacob/code/saleor-platform/react/node_modules/.pnpm/vue-template-compiler@2.7.14/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

    at Object.<anonymous> (/Users/jacob/code/saleor-platform/react/node_modules/.pnpm/vue-template-compiler@2.7.14/node_modules/vue-template-compiler/index.js:10:9)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async loadESM (node:internal/process/esm_loader:91:5)

Node.js v18.12.1

I'm not using Vue templates (I'm using JSX in a Next.js project), so I don't think it should be necessary for me to install any version of vue-template-compiler...

[jacobjove]

Perhaps vue-template-compiler should be made an optional dependency?

[collierrgbsitisfise]

@iacobfred seems like problem in vue-template-compiler - it's trying to resolve 'vue' dependency, in case it was found in node_modules of your project it's trying to check if version of vue if compatible with current version of vue-template-compiler (which is 2.7.14 in context of lates i18next-parser). I assume if you'll run npm ls vue you will notice that vue somehow us used in your project(as parent dependency), that is why you are getting this weird error.

---

There is two potential solution:

1. Check version vue-template-compiler(npm ls vue-template-compiler) and install the same version of vue as dev dependency(npm i -D vue@<need-version>). Thus here will be resolved correct version of vue(from top level dependencies)

2. before running any cli command or scripts related to n18next-parse, run this script

const fs = require('fs');

const vueTemplateCompilerIndex = fs.readFileSync(
  'node_modules/vue-template-compiler/index.js',
  'utf-8',
);

// replace with some fake package
const fixedVueTemplateCompilerIndex = vueTemplateCompilerIndex.replace(
  "require('vue').version",
  "require('vue2').version",
);

if (fixedVueTemplateCompilerIndex === vueTemplateCompilerIndex) {
  return process.exit(0);
}

fs.writeFileSync('node_modules/vue-template-compiler/index.js', fixedVueTemplateCompilerIndex, {
  flag: 'w',
});

Thus verification of vue and vue-template-compiler versions will be ignored

---

NOTE!

This solutions are valid only in case you are sure that vue is not used somehow, like in your case or in case your are using i18next, i18next-parser for BE projects only

[boredland]

It's pretty sad, that there's no proper fix for this...

[michaelsperber]

In our monorepo another project uses vue version 3, so in conclusion this package is useless for us?