search

parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀
https://parceljs.org
MIT License
43.5k stars 2.27k forks source link

Parcel v2 and Vue 2 #6153

Open skiv71 opened 3 years ago

skiv71 commented 3 years ago

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/compiler-sfc@3.0.11 requires a peer of vue@3.0.11 but none is installed. You must install peer dependencies yourself. npm WARN parcel2@1.0.0 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/compiler-sfc@3.0.11 requires a peer of vue@3.0.11 but none is installed. You must install peer dependencies yourself. npm WARN parcel2@1.0.0 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 parcel2@1.0.0 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/transformer-vue@2.0.0-beta.2" 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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Hello,

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

mischnic commented 3 years ago

@fossegrim Sure!

olavfosse commented 3 years ago

I will see what I can do 👍

olavfosse commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

Unfortunately, I am not making any progress. Unassigning.

svenjacobs commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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