Parcel v2 and Vue 2

[skiv71]

Posting this again, as it seems to have been completely overlooked..

Long time parcel user and advocate.

My typical environment / usage, is using parcel dev / build client side Vue apps (parcel v1, vue 2.x - latest stable).

Whilst teaching some new interns, noticed the depreciated warning regarding parcel-bundler... thought, find, v2 here we come.

But noo..............

Parcel v2 does not work AT ALL with Vue 2.x

===========================

ℹ️ Server running at http://localhost:1234
Building...
Installing @parcel/transformer-vue...
🚨 Build failed.
Error: Failed to install @parcel/transformer-vue: npm failed to install modules: Child process failed - npm WARN
@vue/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm
WARN [email protected] No description

npm
ERR! code ENOENT
npm ERR! syscall rename
npm
ERR! path /mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/consolidate
npm
ERR! dest /mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/.consolidate.DELETE
npm
ERR! errno -2
npm
ERR! enoent ENOENT: no such file or directory, rename '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/consolidate' -> '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/.consolidate.DELETE'
npm
ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! /home/neil/.npm/_logs/2021-04-15T16_36_52_082Z-debug.log
Error: Failed to install @parcel/transformer-vue: npm failed to install modules: Child process failed - npm WARN
@vue/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm
WARN [email protected] No description

npm
ERR! code ENOENT
npm ERR! syscall rename
npm
ERR! path /mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/consolidate
npm
ERR! dest /mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/.consolidate.DELETE
npm
ERR! errno -2
npm
ERR! enoent ENOENT: no such file or directory, rename '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/consolidate' -> '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/.consolidate.DELETE'
npm
ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! /home/neil/.npm/_logs/2021-04-15T16_36_52_082Z-debug.log
at install (/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@parcel/package-manager/lib/installPackage.js:171:11)
at async PromiseQueue._runFn (/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@parcel/utils/lib/PromiseQueue.js:108:7)
at async PromiseQueue._next (/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@parcel/utils/lib/PromiseQueue.js:95:5)
Parcel is shutting down...

=======

From the logs, its evident that parcel assumes Vue build tools, regardless of version... and try's to install Vue3.x build tools and then bitches about no Vue 3 installed (THIS IS BECAUSE I DON'T USE IT!)

So, ok... lets try and it with Vue 3....

warn [email protected] No description
484 verbose stack Error: ENOENT: no such file or directory, rename '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/consolidate' -> '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/.consolidate.DELETE'
485 verbose cwd /mnt/f/Mega/coding/git/skiv71/parcel2
486 verbose Linux 4.4.0-19041-Microsoft
487 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--json" "--save-dev" "@parcel/[email protected]"
488 verbose node v14.15.5
489 verbose npm v6.14.11
490 error code ENOENT
491 error syscall rename
492 error path /mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/consolidate
493 error dest /mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/.consolidate.DELETE
494 error errno -2
495 error enoent ENOENT: no such file or directory, rename '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/consolidate' -> '/mnt/f/Mega/coding/git/skiv71/parcel2/node_modules/@vue/compiler-sfc/node_modules/.consolidate.DELETE'
496 error enoent This is related to npm not being able to find a file.
497 verbose exit [ -2, true ]

Now the last error might be due microshit and there WSL bugs, but I don't see such problems with other npm install build tools.

But regardless, I wanna stick to stable Vue2.x and not have trainee developers ask me why we are using a depreciated build system, i.e. parcel-bundler (v1).

Any takers?

[neolectron]

Now the last error might be due microshit and there WSL bugs

You shouldn't work in the /mnt/ folder when you use wsl.
You'll only find yourself dealing with bad situations because of the impossibility to use chmod and mount in those drives.
You should work as recommended, in the home directory and access your files with the \\wsl$\ network name.

[devongovett]

Parcel 2 uses the official SFC compiler from Vue which only supports Vue 3. Personally, I don't use Vue, but I found it confusing as to whether Vue 2 is still officially supported by the Vue team or whether they are recommending people move to Vue 3. Anyways, it should be possible to build a separate plugin that supports Vue 2 if it's still needed.

[skiv71]

Oh, now this makes sense, thanks for a definitive answer.

Yes, even now, Vue 2 is still used (and advised) for all production systems.

I cannot imagine leaving parcel behind, its great.

[Morgul]

Long time Vue user, (and Vue/Parcel user) so maybe I can lend a hand here.

Currently, Vue 3, even though it's been released, isn't recommended for production use just yet. The ecosystem isn't there, very few UI libraries have production ready versions that support Vue 3, and the migration path isn't super great at the moment; they only just released a beta of their compat library to let Vue2 code run on Vue3. So, for the moment upgrading to Vue3 isn't viable for most production applications. This also makes Parcel v2 a non-starter for a large chunk of the current Vue users of Parcel.

Vue 3 made life MUCH simpler with the official sfc compiler. The Vue2 story was a bit messier. That being said, I recently added Vue2 support to Snowpack (as a way to experiment with another bundler) by writing a shim for the Vue2 sfc libraries to make them work like Vue3, and using a fork of their official Vue3 plugin. Maybe something like this would be workable?

Here's where the magic happens:

https://github.com/Morgul/snowpack-plugin-vue2/blob/main/compiler/index.js

That index.js is a drop-in replacement for the official vue sfc library, but for Vue2 code. The caveat here is that it has only marginal testing; I could compile a few of my personal sites without any obvious issues.

I'd be more than willing to lend a hand collaborating, and feel free to grab the code I wrote (it's MIT, after all), but I don't have the bandwidth right now to dive into making the changes required to Parcel's Vue code. I probably won't end up with free time till after v2 releases, and it'd be nice to get this in sooner rather than later, since I suspect my shim isn't 100%.

[ramjamx]

Trying to upgrade parcel from v1 to v2, finding that vue 2 is not compatible with parcel 2.
Mi initial goal was to use tailwind 3 because tailwind 2 and parcel 1 wheren't working well together.

What a nightmare!

[olavfosse]

Hello,

I would like to work on this. Could you assign it to me?

[mischnic]

@fossegrim Sure!

[olavfosse]

I will see what I can do 👍

[olavfosse]

https://v2.parceljs.org/plugin-system/transformer/#Transformer

If I understand correctly transform is the method which should compile the Vue code to JavaScript. What then is the purpose of parse and generate? I find it unclear what the different methods should do. Could you elaborate in the documentation? Thanks

[mischnic]

You could write transform to take the input code as a string, do your transformation and then return the output string. But for example if you have multiple transformers that run in series and all use the same AST (Babel, PostCSS, ...), then there is no need to reparse/regenerate it every time. In that case, Transformer1.parse -> Transformer1.transform -> Transformer2.transform -> Transformer2.generate would be invoked.

The transformer for Vue 3 might be useful as well: https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/vue/src/VueTransformer.js

[olavfosse]

@mischnic Thank you. For now I will just use transform then. I got the parsing working and now I am trying to figure what I should output.

The transformer for Vue 3 might be useful as well: https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/vue/src/VueTransformer.js

Could you explain what is going on here?

[olavfosse]

Unfortunately, I am not making any progress. Unassigning.

[svenjacobs]

I started to migrate my project to Parcel 2 (RC0) until I hit this roadblock. My project is still based on Vue 2. I cannot upgrade to Vue 3 at the moment because of other dependencies. Vue 3 is still relatively new. A lot of Vue dependencies have not yet upgraded to 3 (Vuetify for instance). The official Vue website still links to the v2 documentation rather than v3. It would be greatly appreciated if Parcel 2 also supports Vue 2. Thanks!

[Sergei8888]

This is extremely important issue. If you will support only Vue 3 95% of Vue community will not use parcel, because Vue 3 is experemental framework for pet projects with no infrastructure. Vue 2 is standart right now and i hope that you will support Vue 2 SFC in the future

[TheBojda]

Hello Guys!

I've mixed @Morgul 's SFC compiler with the official Vue plugin (thanks to @mischnic for the help with the local plugins).

Here is the result: https://github.com/TheBojda/parcel-vue2

It seems to work with a basic example, so it can be a good base.

Unfortunately, I've no time to deal with it for a longer time, but if you think, fork it, use it, or do with it whatever you want. :)

[TheBojda]

I've done some fixes, and it's not bad. I tested it with one of my projects that used vue2-google-maps, components, scoped styles, TypeScript, etc. and it's working fine.

May I add this vue2 plugin to the official parcel repo (@parcel/transformer-vue2)
or should it be kept separate?

(I prefer the first one because I've no time to maintain it as a separate project, but parcel has a big community.)

If the first one is OK for you then assign the issue to me, and I'll send you a PR with the plugin and some docs about how to use it.

[TheBojda]

I've added the plugin to the npm registry: https://www.npmjs.com/package/parcel-transformer-vue2