The generated mount code was:

createApp().mount(
  {
    render: function(h) {
      return h(App)
    }
  },
  '#app'
)

which throws an error: TypeError: h is not a function.
But the following code was found in rfcs:

const app = createApp()

app.mount(App, '#app')

When I fixed this, it doesn't throw an error, so should it be fixed?

Version

3.0.0-alpha.4

Reproduction link

https://github.com/cexbrayat/vtc-repro

Steps to reproduce

This is a simple app created with the CLI, using the vue-next and the TS plugins:

npx @vue/cli create vtc-repro --inlinePreset '{"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false},"vue-cli-plugin-vue-next": {}}}'

The first commit sets the version to Vue 3.0.0-alpha.3 and,
after fixing the component created, running yarn build succeeds.

The second commit bumps Vue to 3.0.0-alpha.4.
When running yarn build, the command now throws:

⠹  Building for production...

 ERROR  Failed to compile with 1 errors                                                                                              14:30:17

 error  in [internal]

INTERNAL ERROR(undefined,undefined) When you use `vue` option, make sure to install `vue-template-compiler`.
stack trace:
Error: When you use `vue` option, make sure to install `vue-template-compiler`.
    at Function.resolveScriptBlock (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/fork-ts-checker-webpack-plugin/lib/VueProgram.js:194:19)
    at Object.host.getSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/fork-ts-checker-webpack-plugin/lib/VueProgram.js:106:45)
    at findSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90581:29)
    at processImportedModules (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90869:25)
    at findSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90634:17)
    at /Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90480:85
    at getSourceFileFromReferenceWorker (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90447:34)
    at processSourceFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90480:13)
    at processRootFile (/Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:90310:13)
    at /Users/ced-pro/Code/test/vue-cli-tests/vtc-repro/node_modules/typescript/lib/typescript.js:89326:60

After spending some time investigating the issue, I think I've found the root cause.
vue-template-compiler starts by checking that the Vue version is the correct one.
So when using with Vue 3.0.0-alpha.4, we do have this error thrown.

Why is there no error with Vue 3.0.0-alpha.3? Because this line fails when trying to retrieve Vue version with ReferenceError: document is not defined. So the version returned is undefined and the check is OK.

Now that the document is not defined error has been fixed in alpha.4, the check retreives the proper version and fails.

Other info

Quoting @yyx990803 in vuejs/core#670 (comment):

I think this is an issue that should be fixed in vue-cli-plugin-vue-next by not including vue-template-compiler (which is for 2.x only)

Hi, vue-next is update version beta.14 now，but plugin use the beta.1 , Is there have some method to update the lastest version, I really want to experience new Vue，tks.

• Dev environment:

1. vue-cli: @vue/cli 4.4.1
2. node：v12.18.3

• Repetition steps:

1. vue create <project-name>
2. npm run dev
   result: the project works properly.
3. vue add vue-next
   result:
   1. "@vue/compiler-sfc"和“vue-cli-plugin-vue-next” added in to package.json

4. fixed： cnpm install -D vue-template-compiler
   ps: I know that this approach is not feasible. The vue-template-compiler is run under vue2.x;
   result: version conflict
   

ERROR TypeError: Cannot read property 'match' of null
TypeError: Cannot read property 'match' of null
at resolveDeps (C:\Users\nelson.atuonwu\AppData\Local\Yarn\Data\global\node_modules@vue\cli\lib\util\mergeDeps.js:15:27)
at GeneratorAPI.extendPackage (C:\Users\nelson.atuonwu\AppData\Local\Yarn\Data\global\node_modules@vue\cli\lib\GeneratorAPI.js:196:20)
at module.exports (C:\Users\nelson.atuonwu\Sources\JS\Vue\howfast-next\node_modules\vue-cli-plugin-vue-next\generator\index.js:5:7)
at Generator.initPlugins (C:\Users\nelson.atuonwu\AppData\Local\Yarn\Data\global\node_modules@vue\cli\lib\Generator.js:143:13)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at async Generator.generate (C:\Users\nelson.atuonwu\AppData\Local\Yarn\Data\global\node_modules@vue\cli\lib\Generator.js:161:5)
at async runGenerator (C:\Users\nelson.atuonwu\AppData\Local\Yarn\Data\global\node_modules@vue\cli\lib\invoke.js:120:3)
at async invoke (C:\Users\nelson.atuonwu\AppData\Local\Yarn\Data\global\node_modules@vue\cli\lib\invoke.js:101:3)

运行yarn serve报错

使用vue create vue3搭建了项目，然后使用vue add vue-next，再运行yarn serve打开网页就报以下错误

vue-cli版本：4.3.1

When using text/jsx script implement a component by JSX syntax:

<script type="text/jsx">
import { ref, h } from 'vue';

export default function () {
  const name = ref('Evan');

  return (
    <input value={name.value} onChange={(e) => { name.value = e.target.value; } } />
  );
}
</script>

The "jsx-loader-like" loader was legacy for Vue3.x , createElement function's parameter structure changed. (See rfcs0008), The attributes on JSXElement should no longer be converted into the following data:

{
  props: {
    domProps: { value: "Evan" },
    on: { change: ƒ onChange(e)}
  }
}

And the following data structure was expected to the createElement function parameter format:

{
  props: {
    onChange: ƒ onChange(e)
    value: "bar"
  }
}

I know that JSX is still WIP, but I personally prefer this way of using setup (although this may lose the performance advantage brought by template compilation). If possible, hope to share related information about 'JSX loader/plugin (I'm not sure)' at the appropriate time

Version
3.0.0-beta.15

Reproduction link
https://github.com/blacksonic/vue-3-playground

Steps to reproduce
Create a webcomponent with the name x-username
Modify the app instance config to test for webcomponents
Include the webcomponent in a vue template
Config of the application
app.config.isCustomElement = tag => /^x-/.test(tag);
What is expected?
The application shouldn't log warning as it is configured to treat the element as a webcomponent

What is actually happening?
Vue logs warning:
[Vue warn]: Failed to resolve component: x-username

The component is displayed however

I wanted to find a replacement from Vue 2 ignoredElements
Vue.config.ignoredElements = [/^x-/];

I've tried modifying the vue cli webpack plugin options but with no luck

// vue.config.js
module.exports = {
  chainWebpack: config => {
   // get the existing vue-loader rule and tap into its options
    config.module.rule('vue-loader').tap(options => {
      options.compilerOptions = {
         ...(options.compilerOptions || {}), // merge existing compilerOptions, if any
         isCustomElement: tag => /^x-/.test(tag)
      }
    })
  }
}

I get this message:
(node:10740) UnhandledPromiseRejectionWarning: TypeError: config.module.rule(...).tap is not a function

The default router code imports RouteConfig as the typing for the routes object, this has been changed to RouteRecordRaw
See this commit: vuejs/router@fd49bbd

Hello,

path:'/:lang',
component: { render(h) {return h('router-view')},},

I have used this code in vue3.js. but not proper work.
I have this facing this issue

Uncaught (in promise) TypeError: h is not a function

环境信息：
1.系统：MacOS Mojave 10.14.5；
2.浏览器：Google Chrome 81.0.4044.122（正式版本，64位，目前最新）；
3.NodeJS：v12.16.2；
4.NPM：v6.14.4；
5.Yarn 镜像源地址：https://registry.npmjs.org/；
6.@vue/cli：v4.3.1；
7.Yarn：v1.5.1；

重现步骤：
1.vue create vue3-beta；
（1）Please pick a preset -> Manually select features
（2）Check the features needed for your project -> Babel，Router，Vuex，Linter / Formatter
（3）Use history mode for router? -> Y
（4）Pick a linter / formatter config -> ESLint with error prevention only
（5）Pick additional lint features -> Lint on save
（6）Where do you prefer placing config for Babel, ESLint, etc.? -> In dedicated config files
（7）Save this as a preset for future projects? -> N
2.此时 yarn serve 后，更改 /src/views/Home.vue 后，HMR 有效；
3.vue add vue-next；
4.此后再进行 yarn serve，更改 /src/views/Home.vue 后，HMR 失效；

现象：
1.HMR 失效，更改 .vue 后浏览器不会自动刷新，手动刷新后试图变更；
2.浏览器控制台，保持打印：[HMR] Waiting for update signal from WDS...，更改 .vue 后打印无变化；

附 package.json 内容：

{
  "name": "vue3-beta",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^3.0.0-beta.1",
    "vue-router": "^4.0.0-alpha.5",
    "vuex": "^4.0.0-alpha.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-plugin-router": "~4.3.0",
    "@vue/cli-plugin-vuex": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "@vue/compiler-sfc": "^3.0.0-beta.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "vue-cli-plugin-vue-next": "~0.1.2"
  }
}

烦请尽快解决，有什么需要配合定位的我这边尽力配合，谢谢！

I just wanted to open this up more for guidance on trying the vue next cli if someone can help me.

Steps

doing the following:

~ vue create vue3

# select only typescript, router (no history mode) and linting + prettier (no class type)

~ cd vue3
~ vue add vue-next
~ npm run serve

That gives issues with router:

"vue3/node_modules/vue-router/dist/vue-router"' has no exported member 'RouteConfig'.
  > 1 | import { RouteConfig, createRouter, createWebHashHistory } from "vue-router";"

and shims:

vue3/src/shims-tsx.d.ts(8,40):
8:40 Cannot use namespace 'Vue' as a type.
     6 |         interface Element extends VNode { }
     7 |         // tslint:disable no-empty-interface
  >  8 |         interface ElementClass extends Vue { }
       |                                        ^

Questions

• Does this currently support typescript?
• If so what changed need to be made to get it up an running?

vue cli 4.3.1创建的项目，vue add vue-next后报错， TypeError: Received an unexpected value [object Undefined]

vue add vue-add后直接报错

I just tried adding this plugin to an existing project to see what would happen. It did a lot of changes, mostly renaming props to use #, changing dependencies in my package.json and making a few changes in my main.js

One change that didn't make any sense to me is that it removed all this:

Vue.use(BootstrapVue);
Vue.use(Notifications);
Vue.use(ToggleButton);
Vue.use(VueChatScroll);
Vue.use(VueCookie);
Vue.use(VueFormGenerator);
Vue.use(VueLazyload);
Vue.use(VueSweetalert2);
Vue.use(VueGeolocation);
Vue.use(vClickOutside);
Vue.use(device);
Vue.use(PortalVue);

while leaving:

import BootstrapVue from 'bootstrap-vue';
import Notifications from 'vue-notification';
import ToggleButton from 'vue-js-toggle-button';
import VueChatScroll from 'vue-chat-scroll';
import VueCookie from 'vue-cookie';
import VueFormGenerator from 'vue-form-generator';
import VueLazyload from 'vue-lazyload';
import VueSweetalert2 from 'vue-sweetalert2';
import vClickOutside from 'v-click-outside';
import VueGeolocation from '@/plugins/GeoLocation';
import device from 'vue-device-detector';
import PortalVue from 'portal-vue';

Is this right? are imports now sufficient and you no longer need to add Vue.use ?

If I split a .vue file into this

<template src="./template.html"></template>
<script src="./script.js"></script>

I get the following error in the browser console.
Uncaught ReferenceError: h is not defined

For example. You have a HelloWorld.vue file and you create HelloWorld/script.js, HelloWorld/template.html and HelloWorld/index.vue with the content above.

[HMR] Waiting for update signal from WDS...
HelloWorld.vue?6890:4 Uncaught TypeError: Cannot read property 'extend' of undefined
at eval (HelloWorld.vue?6890:4)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-cli-plugin-vue-next/node_modules/vue-loader/dist/index.js?!./src/components/HelloWorld.vue?vue&type=script&lang=ts (app.js:955)
at webpack_require (app.js:790)
at fn (app.js:151)
at eval (HelloWorld.vue?9663:1)
at Module../src/components/HelloWorld.vue?vue&type=script&lang=ts (app.js:1117)
at webpack_require (app.js:790)
at fn (app.js:151)
at eval (HelloWorld.vue?e680:1)
at Module../src/components/HelloWorld.vue (app.js:1105)

Error reporting of installing Vue next

node version 12.14.0

What problem i'm having?

When project runs in the dev : .button-content[data-v-3cf96c0f]
After packing : .button-content

What are my expected results?

When project runs in the dev : .button-content[data-v-3cf96c0f]
After packing : .button-content[data-v-3cf96c0f]

vue-router-next no longer accepts base as RouterOptions. It has to be specified as the parameter of createWebHistory instead.

Additionally, vue-cli currently gives '/' as BASE_URL which causes trouble as vue-router-next doesn't seem to like a base with trailing slash. Should be fixed on router side: vuejs/router#164

I'm getting this error while adding the plugin:

❯ vue --version
@vue/cli 4.1.2

新建的项目执行vue add vue-next报错Cannot read property 'match' of null，请问大佬是怎么回事，我项目是新创建的

I'm not too sure how to report this issue or how to replicate in a good way, but I have a couple of components with slots (basically a bootstrap panel with the header, body, footer as slots)

when I change a view which is using these panels, I can see some changes taking place but something is not quite right - not all the elements update, it's as if some elements are not seen as changed so they are left as before.

I will try and come up with reproducible code but I thought I'd mention it here anyway...

I realize this is a preview but I just wanted to make you aware that fragments aren't working. If I try and add the following template

<template>
  <h1>Hello, World!</h1>
  <button @click="increment()">
    Count: {{ state.count }} Double: {{state.double }}
  </button>
</template>

I received the error error: The template root requires exactly one element (vue/valid-template-root) at src/components/HelloWorld.vue:3:3:

Thank you for making this plugin.

It is currently usable with the TypeScript CLI plugin, but requires a few changes in the generated project:

npx @vue/cli create vtc-repro --inlinePreset '{"plugins": {"@vue/cli-plugin-typescript": {"classComponent": false},"vue-cli-plugin-vue-next": {}}}'

The changes needed are in this commit.

Here is a list:

• change the App component to use defineComponent
• remove the shim files

Is it something that the plugin could handle? Or do you have in mind to create another plugin for the TS version?

When running vue add vue-next I got the following error:

✨  Done in 2.16s.
✔  Successfully installed plugin: vue-cli-plugin-vue-next

 ERROR  TypeError: api.assertCliVersion is not a function
TypeError: api.assertCliVersion is not a function
    at module.exports (/Users/brendan/repos/demos/teamcheck/node_modules/vue-cli-plugin-vue-next/generator/index.js:6:7)
    at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:103:7
    at Array.forEach (<anonymous>)
    at new Generator (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:101:13)
    at runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:123:21)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:117:3)

Hi !
I'm currently unable to add the plugin to a project built with @vue/composition-api and typescript.

I get the following error after running vue add:

 ERROR  SyntaxError: Unexpected token, expected "]" (23:19)

$ vue -V
@vue/cli 4.3.1

$ vue add vue-next
📦  Installing vue-cli-plugin-vue-next...

+ [email protected]
updated 1 package and audited 949810 packages in 14.564s

92 packages are looking for funding
  run `npm fund` for details

found 624 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details
✔  Successfully installed plugin: vue-cli-plugin-vue-next


🚀  Invoking generator for vue-cli-plugin-vue-next...
 ERROR  SyntaxError: Unexpected token, expected "]" (23:19)
SyntaxError: Unexpected token, expected "]" (23:19)
    at Object._raise (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:742:17)
    at Object.raiseWithData (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:735:17)
    at Object.raise (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:729:17)
    at Object.unexpected (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:8757:16)
    at Object.expect (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:8743:28)
    at Object.parsePropertyName (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:10546:12)
    at Object.parsePropertyName (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:3022:23)
    at Object.parseObjectMember (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:10451:10)
    at Object.parseObj (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:10374:25)
    at Object.parseExprAtom (/home/letik/.node_modules/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:9995:28)

Here's the reproduction repo :
https://github.com/Ircam-Web/timeside-player/tree/7b3e110a1d7839e3a721953a0a08876c7f290fdd

Is it somehow related to Typescript ? I know it is not supported yet but I've seen it can be run in the following issue #7

Thanks for this tool :)

In terminal error

"export 'default' (imported as 'Vue') was not found in 'vue'

In Chrome console

Uncaught TypeError: Cannot read property 'use' of undefined
at eval (index.js?a18c:5)
at Module../src/router/index.js (app.js:1165)
at webpack_require (app.js:790)
at fn (app.js:151)
at eval (main.js:12)
at Module../src/main.js (app.js:1153)
at webpack_require (app.js:790)
at fn (app.js:151)
at Object.1 (app.js:1226)
at webpack_require (app.js:790)

and did not touch anything in router file

🚀 Ivoking generator for vue-cli-plugin-vue-next... ERROR TypeError: Cannot read property 'match' of null TypeError: Cannot read property 'match' of null at resolveDeps (C:\Users\marro\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\mergeDeps.js:15:27) at GeneratorAPI.extendPackage (C:\Users\marro\AppData\Roaming\npm\node_modules\@vue\cli\lib\GeneratorAPI.js:196:20) at module.exports (E:\PARA ORDENAR\EDesarrollo\proyectos\hakuneko-vue\node_modules\vue-cli-plugin-vue-next\generator\index.js:5:7) at Generator.initPlugins (C:\Users\marro\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:143:13) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:97:5) at async Generator.generate (C:\Users\marro\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:161:5) at async runGenerator (C:\Users\marro\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:120:3) at async invoke (C:\Users\marro\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:101:3)

I get this error when trying to install the plugin

SyntaxError: Only declares and type imports are allowed inside declare module (34:4)
    at Object._raise (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:742:17)
    at Object.raiseWithData (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:735:17)
    at Object.raise (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:729:17)
    at Object.unexpected (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:8779:16)
    at Object.expectContextual (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:8745:41)
    at Object.flowParseDeclareModule (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:1457:14)
    at Object.flowParseDeclare (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:1409:21)
    at Object.parseExpressionStatement (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:2558:23)
    at Object.parseStatementContent (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:11238:19)
    at Object.parseStatement (/usr/local/lib/node_modules/@vue/cli/node_modules/@babel/parser/lib/index.js:11104:17)

Not sure where to look for any solution.

In package.json, "vue-router": "3.x.x", remains unchanged after adding the plugin.

"vuex": "3.x.x" is correctly changed to "vuex": "^4.0.0-alpha.1"