Parcel: No transformers found for .vue with Vue 3 and Parcel 2
🐛 bug report
This seems like a rookie mistake, but I'm getting this error.
🚨 Build failed.
Error: No transformers found for "src/js/components/App.vue".
🎛 Configuration (.babelrc, package.json, cli command)
"scripts": {
"dev": "parcel src/html/index.html",
},
"dependencies": {
"parcel": "^2.0.0-beta.1",
"postcss-modules": "^3.2.2",
"tailwindcss": "^1.9.6",
"vue": "^3.0.2"
},
"devDependencies": {
"sass": "^1.28.0"
}
😯 Current Behavior
It seems like the basic doesn't work for me right now, I think I have double checked everything but can't figure out what's wrong.
🔦 Context
Trying to get started with Parcel 2 and Vue 3.
💻 Code Sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My First Parcel App</title>
<link rel="stylesheet" href="../css/index.pcss">
</head>
<body class="font-body">
<div id="app"></div>
<script src="../js/index.js"></script>
</body>
</html>
index.js
import { createApp } from 'vue'
import App from './components/App.vue'
createApp(App).mount('#app')
App.vue
<template>
<div class="container mx-auto py-4">
<a href="#" class="btn">Test button</a>
</div>
</template>
<script>
export default {
}
</script>
Znarkus
All 38 comments
"parcel": "^2.0.0-beta.1",
Try the nightly version: yarn add parcel@nightly
mischnic
on 7 Nov 2020
Thank you. Installed @vue/compiler-sfc as well and I got further, but now I'm getting Uncaught ReferenceError: __VUE_HMR_RUNTIME__ is not defined in the browser. So I guess I'm having a problem with hot module reload.
Tried to add NODE_ENV=development, but it didn't help.
Znarkus
on 7 Nov 2020
Maybe you still have the .parcel-cache that was created by the beta? Try deleting that folder
mischnic
on 8 Nov 2020
Tried removing .parcel-cache and node_modules, then reinstall, but still same error. Do you want me to try create a sample project with the error reproduced?
Znarkus
on 8 Nov 2020
That would be great!
mischnic
on 8 Nov 2020
This may be an issue related to #4935.
101arrowz
on 8 Nov 2020
Scratch that, I found the issue. We depend on __VUE_HMR_RUNTIME__ being defined here, but that's only present in the ESM build, which is not used by default because (?) scope hoisting is disabled by default. Forcing the ESM version works.
101arrowz
on 8 Nov 2020
So the problem is that https://unpkg.com/browse/@vue/runtime[email protected]/dist/runtime-core.cjs.js is missing that assignment?
because (?) scope hoisting is disabled by default
Well, scope-hoisting doesn't work with HMR; so we use the main field in this case because less Babel processsing needs to be be done.
mischnic
on 8 Nov 2020
Do you still want me to try create a sample project with the error reproduced? Seems like you already found the issue :)
Znarkus
on 8 Nov 2020
I don't think that's necessary anymore, indeed. The fact that only the ESM build supports HMR is...peculiar, but given that Vue is so incredibly popular, it may be necessary to either accommodate to their build system, or file an issue requesting they add the HMR runtime to CommonJS.
101arrowz
on 8 Nov 2020
file an issue requesting they add the HMR runtime to CommonJS.
Could you do that? That would be the simplest solution here.
mischnic
on 8 Nov 2020
I might be missing something, but on their https://v3.vuejs.org/guide/installation.html installation page they are only referring to esm with Parcel, and never mention CommonJS on the whole page.
Znarkus
on 8 Nov 2020
hi @Znarkus @101arrowz @mischnic wanted to let you know that I am seeing the same __VUE_HMR_RUNTIME__ is not defined right now as well. I am trying to upgrade my project from Parcel 1, Vue 2 to Parcel 2, Vue 3. Not sure if there is anything I could do to help? It sounds like to fix we need to use a specific ESM version of Vue but I'm unable to find a version in my /node_modules/vue/dist folder that works...
bitterloa
on 8 Nov 2020
For now, you'll unfortunately have to use --no-hmr. If you're comfortable with it, you can temporarily make HMR "work" (somewhat) by deleting the "main" field of node_modules/@vue/runtime-core/package.json. You can use patch-package if you'd like to persist those changes.
101arrowz
on 8 Nov 2020
Thanks. I'm building now with --no-hmr and the runtime error is gone, however I'm having a hard time figuring out how to properly import Vue 3 -- none of the following seem to be working for me, I don't get a build error but ultimately after the import statements below, Vue == undefined
import Vue from "vue"
console.log('Vue', Vue) // Vue undefined
import Vue from "vue/dist/vue.runtime.esm-bundler" // << recommended by Vue 3 documentation?
console.log('Vue', Vue) // Vue undefined
Any advice on proper way to import Vue 3 with Parcel 2?
bitterloa
on 8 Nov 2020
import { createApp } from 'vue';
createApp(MyComponent).mount('#app');
That's the recommended way to do it. If you really want to import everything, then:
import * as Vue from 'vue';
Vue is undefined because there's no default export; you can fix that with the import * as.
101arrowz
on 8 Nov 2020
On a side note, we need to add support for runtime globals.
101arrowz
on 8 Nov 2020
Any progress on this? I had a search through the Vue issues for __VUE_HMR_RUNTIME__ to see if this issue had been raised over there, but didn't see anything. I'd submit it myself if I knew enough about what was going on! 😄
joseph-long
on 24 Nov 2020
This is a bug with Parcel, not Vue. The Vue team is reluctant to implement a simple fix on their end, so we're waiting on that. Check the linked issue for more info. I'm worried we may have to add a custom fix just for Vue.
The issue is that they assume all bundlers use ES Modules all the time, so they remove HMR code from the CommonJS variant. However, Parcel saves time bundling with CommonJS in development mode and only uses ESM in production.
Right now, the fix is to disable HMR or patch @vue/runtime-core in node_modules as I mentioned here.
101arrowz
on 24 Nov 2020
Got it, thanks for clarifying!
joseph-long
on 24 Nov 2020
Upstream has been fixed, just need to wait for a release to update Parcel. @mischnic could you update the semver to >=3 <4 for Vue dependencies? Also, do you know any way to add support for those runtime globals?
101arrowz
on 27 Nov 2020
could you update the semver to >=3 <4 for Vue dependencies?
You mean this https://github.com/parcel-bundler/parcel/blob/064ba0a166ea63ccd2b623dc11324d4cd7ffb526/packages/transformers/vue/package.json#L31-L32?
We could set it to ^3.0.4, but is should be compatible anyway?
https://jubianchi.github.io/semver-check/#/^3.0.0-beta.20/3.0.4
https://jubianchi.github.io/semver-check/#/^3.0.0-beta.20/4.0.0
Also, do you know any way to add support for those runtime globals?
Are these just JS identifiers, could you replace them in the vue transformer? Do you want to open a new issue to track that?
mischnic
on 27 Nov 2020
I suggest not locking to a specific version of Vue. So using the semver I provided is better IMO.
I'm not sure how to perform a replace with a transformer, which is why I asked. I'll make a new issue, though.
101arrowz
on 27 Nov 2020
I suggest not locking to a specific version of Vue.
As I've said, ^3.0.0 (notice the caret: ^ ) is equivalent to >= 3 < 4.
mischnic
on 28 Nov 2020
Right, I'd forgotten about that. Most of my own packages never leave v0, so I thought the caret operator only matched patches, not minors. Thanks for the clarification.
101arrowz
on 28 Nov 2020
Just wanted to add that I'd like to use this in a production app that I'm working on, so if there's anything I can do to test or help out make HMR + Vue3 work let me know. It looks like we need to wait on Vue team to make an update on their end first, then later on you will be able to add this patched version Vue to Parcel?
Also @101arrowz or anyone else -- apologies for this being off topic, but is there a specific community or place I could join and participate in to help push things forward with Parcel 2 and Vue 3 << this is my ideal JS dev stack for use in a production app and I'd love to share my experience/issues if it could be of help somewhere. thanks for the updates @101arrowz!
bitterloa
on 30 Nov 2020
In terms of testing Vue 3, it would be helpful if you could use the patch I mentioned above to temporarily test HMR, but as far as I remember it's still broken in some ways and doesn't really work properly due to some issues mentioned in #4935. I created the transformer, so you can mention me if you find any issues with it.
I'm not part of the Parcel team @bitterloa, but I believe they use Height quite a bit to communicate internally. If you want to help contribute or communicate, GitHub is probably the best way from what I can tell, but maybe @mischnic can give more complete advice 😄
101arrowz
on 30 Nov 2020
Vue team to make an update on their end first, then later on you will be able to add this patched version Vue to Parcel?
AFAICT, the __VUE_HMR_RUNTIME__ is not defined error should be fixed in the next Vue release. You should have a dependency on Vue in your project's package.json, which should be updated to ^3.0.4.
believe they use Height quite a bit to communicate internally
Well, "communicate". Height is more of an ever-growing Todo list of high-level problems (e.g. architectural improvements, ideas for breaking changes before we the v2 release, ...).
I'd love to share my experience/issues if it could be of help somewhere
Feel free to write something up in a Github discussion or issue.
As far as I know, the open Vue problems are:
- extending our HMR api: https://github.com/parcel-bundler/parcel/issues/2497#issuecomment-673556944, https://github.com/parcel-bundler/parcel/pull/4935
- runtime globals. @101arrowz can you open an issue for them and maybe describe what Parcel needs to do here. Are they inserted by the Vue compiler? Or are they contained in the bundles of the
vuepackage? - https://github.com/parcel-bundler/parcel/pull/4935
mischnic
on 30 Nov 2020
Vue 3.0.4 was just released. It would be great if someone could verify that it now works correctly (apart from https://github.com/parcel-bundler/parcel/pull/4935).
mischnic
on 2 Dec 2020
Just tested, it's broken due to the new requirement for scopeID rather than it being optional, but after hotfixing the logic it works. I'll add the fix to #4935?
101arrowz
on 2 Dec 2020
I can test over the next few days as well. This past weekend I tried to use Vue 3.0.4 but it wasn't available yet.
bitterloa
on 2 Dec 2020
I'll add the fix
If it's not too complicated too fix...
mischnic
on 2 Dec 2020
I've updated the Vue transformer "HMR fix" (not really at this point, but oh well). When #4935 is merged this issue can be closed.
101arrowz
on 3 Dec 2020
I cloned your repo, ran yarn && yarn add parcel@nightly and I didn't get that error.
However, I got No transformers found for src/assets/logo.png.
<template>
<img class="logo" alt="Vue logo" src="./assets/logo.png"> <!-- FROM HERE -->
<HelloWorld :msg="msg"/>
<div class="btn">
<el-button type="primary" @click="startHacking">
Get Started
</el-button>
</div>
</template>
@101arrowz any ideas?
mischnic
on 7 Dec 2020
I'll look into this today, but that error indicates that there isn't a transformer for .png import. I thought the image transformer added support for importing images without the url: prefix...
101arrowz
on 7 Dec 2020
This should be a url dependency, which would always work (just like in "real" HTML)
mischnic
on 7 Dec 2020
Well, the template is compiled to JavaScript by Vue's compiler, and we have no control over its output. It seems to be importing the URL without a pipeline specifier to support Webpack.
101arrowz
on 7 Dec 2020
Sorry that I removed my post. I did it before seen your answers. The issue was in Parcel cache. Before moving to latest I have build it with beta-1.
cache remove is helped.
bubnenkoff
on 8 Dec 2020
Related issues
vpicone
·
52Comments
Clickys
·
61Comments
jpergler
·
59Comments
natqe
·
40Comments
tarepan
·
46Comments
Most helpful comment
I've updated the Vue transformer "HMR fix" (not really at this point, but oh well). When #4935 is merged this issue can be closed.