Fix `vue-template-compiler` dependency

Describe the bug

In my project, I’m using "astro": "^1.0.0-beta.17" and "@builder.io/mitosis": "^0.0.49".

There are some errors when installing dependencies in my project and when running Mitosis code, as I’ll explain below.

First suggestion

When running `npm install` (with npm >= v7), these errors are printed:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: mobx-react-lite@3.3.0
npm ERR! Found: react@18.0.0
npm ERR! node_modules/react
npm ERR!   dev react@"^17.0.2 || ^18.0.0" from the root project
npm ERR!   peer react@"^17.0.2 || ^18.0.0" from @astrojs/react@0.1.1
npm ERR!   node_modules/@astrojs/react
npm ERR!     dev @astrojs/react@"^0.1.1" from the root project
npm ERR!   3 more (@emotion/core, @emotion/react, react-dom)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17" from mobx-react-lite@3.3.0
npm ERR! node_modules/mobx-react-lite
npm ERR!   dev mobx-react-lite@"^3.3.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.0 || ^17" from mobx-react-lite@3.3.0
npm ERR!   node_modules/mobx-react-lite
npm ERR!     dev mobx-react-lite@"^3.3.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/gaudel/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/gaudel/.npm/_logs/2022-05-01T22_15_52_505Z-debug-0.log

The solution to the error above is to install with the following command:

npm install --legacy-peer-deps

It appears that this error is caused by mobx-react-lite not yet supporting React 18. It would be very nice (for me at least, some might consider it slightly more complicated) if Mitosis could use mobx-react-lite as a peer dependency, and require that the user of Mitosis that want to use Mobx, also install that library.

Second suggestion

But after the dependencies are installed, there is another error that require manual intervention, because vue-template-compiler tries to detect if there is a vue package installed with a mismatching version, and if so, it immediately panics and prevents any code that uses it (like mitosis) to run.

I have to manually make this change (monkey patch):

/node_modules/vue-template-compiler/index.js:

 try {
   var vueVersion = require('vue').version
 } catch (e) {}

 var packageName = require('./package.json').name
 var packageVersion = require('./package.json').version
-if (vueVersion && vueVersion !== packageVersion) {
+if (false && vueVersion && vueVersion !== packageVersion) {
   var vuePath = require.resolve('vue')
   var packagePath = require.resolve('./package.json')
   throw new Error(
     '\n\nVue packages version mismatch:\n\n' +
     '- vue@' + vueVersion + ' (' + vuePath + ')\n' +
     '- ' + packageName + '@' + packageVersion + ' (' + packagePath + ')\n\n' +
     'This may cause things to work incorrectly. Make sure to use the same version for both.\n' +
     'If you are using vue-loader@>=10.0, simply update vue-template-compiler.\n' +
     'If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump ' + packageName + ' to the latest.\n'
   )
 }

 module.exports = require('./build')

Maybe we could make the same change as above and make vue-template-compiler a peer dependency ? So the user only installs it if he wants to compile Mitosis to Vue ? I clearly don’t know enough of the repo to know if this is a good strategy.

I did a search in this repo, and it looks that the vue-template-compiler is only called in the cli package. But I’m only using the core package, not the cli, but still the vue-template-compiler package is a dependency of the core package. Can it be safely removed from the core ? EDIT: Now I see it, the Liquid parser is using this package inside core.

I don’t know what is a good solution here, I’m just trying to explain my thought process. Please enlighten me.

[samijaber]

For reference, our SDKs project is at https://github.com/BuilderIO/builder/tree/main/packages/sdks if you want to look at an example of a project working with Mitosis

[rhengles]

Yes, I’m using npm v8 in my project, but I appreciate your attention and patience 😁