No transformers found for .vue with Vue 3 and Parcel 2 #5325

Znarkus · 2020-11-07T15:22:31Z

🐛 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>

The text was updated successfully, but these errors were encountered:

mischnic · 2020-11-07T15:25:31Z

"parcel": "^2.0.0-beta.1",

Try the nightly version: yarn add parcel@nightly

Znarkus · 2020-11-07T22:38:44Z

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.

mischnic · 2020-11-07T23:03:49Z

Maybe you still have the .parcel-cache that was created by the beta? Try deleting that folder

Znarkus · 2020-11-07T23:09:47Z

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?

mischnic · 2020-11-07T23:15:16Z

That would be great!

101arrowz · 2020-11-07T23:22:04Z

This may be an issue related to #4935.

101arrowz · 2020-11-07T23:41:22Z

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.

mischnic · 2020-11-08T18:14:45Z

So the problem is that https://unpkg.com/browse/@vue/runtime-core@3.0.2/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.

Znarkus · 2020-11-08T18:27:55Z

Do you still want me to try create a sample project with the error reproduced? Seems like you already found the issue :)

101arrowz · 2020-11-08T18:42:26Z

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.

mischnic · 2020-11-08T18:59:47Z

file an issue requesting they add the HMR runtime to CommonJS.

Could you do that? That would be the simplest solution here.

Znarkus · 2020-11-08T19:04:20Z

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.

bitterloa · 2020-11-08T19:14:39Z

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...

101arrowz · 2020-11-08T19:19:23Z

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.

bitterloa · 2020-11-08T19:28:24Z

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?

101arrowz · 2020-11-08T19:34:22Z

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 · 2020-11-08T19:35:32Z

On a side note, we need to add support for runtime globals.

joseph-long · 2020-11-24T01:10:37Z

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! 😄

101arrowz · 2020-11-24T02:52:21Z

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.

joseph-long · 2020-11-24T02:56:22Z

Got it, thanks for clarifying!

101arrowz · 2020-11-27T19:45:21Z

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?

bitterloa · 2020-11-30T20:14:35Z

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!

101arrowz · 2020-11-30T20:46:19Z

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 😄

mischnic · 2020-11-30T21:15:48Z

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: Improve HMR API #2497 (comment), Fix Vue HMR #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 vue package?
Fix Vue HMR #4935

mischnic · 2020-12-02T22:39:37Z

Vue 3.0.4 was just released. It would be great if someone could verify that it now works correctly (apart from #4935).

101arrowz · 2020-12-02T22:50:27Z

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?

bitterloa · 2020-12-02T22:51:53Z

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.

mischnic · 2020-12-02T22:52:08Z

I'll add the fix

If it's not too complicated too fix...

101arrowz · 2020-12-02T23:05:18Z

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.

mischnic · 2020-12-07T18:40:58Z

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>

https://github.com/mischnic/element-plus-parcel2-error/blob/b593c763d91d2661b50c3bbca9a2b163753a6ba0/src/App.vue#L2

@101arrowz any ideas?

101arrowz · 2020-12-07T19:32:44Z

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...

mischnic · 2020-12-07T19:34:07Z

This should be a url dependency, which would always work (just like in "real" HTML)

101arrowz · 2020-12-07T19:35:50Z

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.

bubnenkoff · 2020-12-08T10:05:38Z

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.

mischnic added the 🕐 Waiting label Nov 7, 2020

mischnic removed the 🕐 Waiting label Nov 8, 2020

101arrowz mentioned this issue Nov 8, 2020

Do not differ between CommonJS and ESM builds vuejs/core#2571

Closed

mischnic added 🐛 Bug Vue ✨ Parcel 2 labels Nov 12, 2020

This comment has been minimized.

Sign in to view

101arrowz mentioned this issue Nov 30, 2020

Support static replacement from transformers #5405

Open

mischnic added the 🕐 Waiting label Dec 2, 2020

mischnic removed the 🕐 Waiting label Dec 2, 2020

101arrowz mentioned this issue Dec 2, 2020

Fix Vue HMR #4935

Merged

mischnic closed this as completed in #4935 Dec 6, 2020

mischnic mentioned this issue Dec 8, 2020

<img src="./assets/logo.png"> in a Vue template doesn't seem to work. #5444

Open

No transformers found for .vue with Vue 3 and Parcel 2 #5325

No transformers found for .vue with Vue 3 and Parcel 2 #5325

Comments

Znarkus commented Nov 7, 2020

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

😯 Current Behavior

🔦 Context

💻 Code Sample

mischnic commented Nov 7, 2020 • edited

Znarkus commented Nov 7, 2020

mischnic commented Nov 7, 2020

Znarkus commented Nov 7, 2020

mischnic commented Nov 7, 2020

101arrowz commented Nov 7, 2020

101arrowz commented Nov 7, 2020

mischnic commented Nov 8, 2020

Znarkus commented Nov 8, 2020

101arrowz commented Nov 8, 2020

mischnic commented Nov 8, 2020

Znarkus commented Nov 8, 2020

bitterloa commented Nov 8, 2020

101arrowz commented Nov 8, 2020

bitterloa commented Nov 8, 2020

101arrowz commented Nov 8, 2020

101arrowz commented Nov 8, 2020

joseph-long commented Nov 24, 2020

101arrowz commented Nov 24, 2020

joseph-long commented Nov 24, 2020

101arrowz commented Nov 27, 2020

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

bitterloa commented Nov 30, 2020

101arrowz commented Nov 30, 2020

mischnic commented Nov 30, 2020 • edited

mischnic commented Dec 2, 2020

101arrowz commented Dec 2, 2020 • edited

bitterloa commented Dec 2, 2020

mischnic commented Dec 2, 2020

101arrowz commented Dec 2, 2020

mischnic commented Dec 7, 2020 • edited

101arrowz commented Dec 7, 2020 • edited

mischnic commented Dec 7, 2020

101arrowz commented Dec 7, 2020

bubnenkoff commented Dec 8, 2020

mischnic commented Nov 7, 2020 •

edited

mischnic commented Nov 30, 2020 •

edited

101arrowz commented Dec 2, 2020 •

edited

mischnic commented Dec 7, 2020 •

edited

101arrowz commented Dec 7, 2020 •

edited