feat(build): provide more specific warnings for runtime compilation

close #1004

jest.config.js

@@ -5,8 +5,9 @@ module.exports = {
     __TEST__: true,
     __VERSION__: require('./package.json').version,
     __BROWSER__: false,
-    __RUNTIME_COMPILE__: true,
     __GLOBAL__: false,
+    __ESM_BUNDLER__: true,
+    __ESM_BROWSER__: false,
     __NODE_JS__: true,
     __FEATURE_OPTIONS__: true,
     __FEATURE_SUSPENSE__: true

packages/global.d.ts

@@ -2,8 +2,9 @@
 declare var __DEV__: boolean
 declare var __TEST__: boolean
 declare var __BROWSER__: boolean
-declare var __RUNTIME_COMPILE__: boolean
 declare var __GLOBAL__: boolean
+declare var __ESM_BUNDLER__: boolean
+declare var __ESM_BROWSER__: boolean
 declare var __NODE_JS__: boolean
 declare var __COMMIT__: string
 declare var __VERSION__: string

packages/runtime-core/src/component.ts

@@ -451,9 +451,15 @@ function finishComponentSetup(
       /* istanbul ignore if */
       if (!compile && Component.template) {
         warn(
-          `Component provides template but the build of Vue you are running ` +
+          `Component provided template option but ` +
-            `does not support runtime template compilation. Either use the ` +
+            `runtime compilation is not supported in this build of Vue.` +
-            `full build or pre-compile the template using Vue CLI.`
+            (__ESM_BUNDLER__
+              ? ` Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`
+              : __ESM_BROWSER__
+                ? ` Use "vue.esm-browser.js" instead.`
+                : __GLOBAL__
+                  ? ` Use "vue.global.js" instead.`
+                  : ``) /* should not happen */
         )
       } else {
         warn(`Component is missing template or render function.`)

packages/vue/src/index.ts

@@ -1,5 +1,6 @@
 // This entry is the "full-build" that includes both the runtime
 // and the compiler, and supports on-the-fly compilation of the template option.
+import './devCheck'
 import { compile, CompilerOptions, CompilerError } from '@vue/compiler-dom'
 import { registerRuntimeCompiler, RenderFunction, warn } from '@vue/runtime-dom'
 import * as runtimeDom from '@vue/runtime-dom'
@@ -72,5 +73,3 @@ registerRuntimeCompiler(compileToFunction)
 
 export { compileToFunction as compile }
 export * from '@vue/runtime-dom'
-
-import './devCheck'

packages/vue/src/runtime.ts

@@ -1,6 +1,21 @@
 // This entry exports the runtime only, and is built as
 // `dist/vue.esm-bundler.js` which is used by default for bundlers.
+import './devCheck'
+import { warn } from '@vue/runtime-dom'
 
 export * from '@vue/runtime-dom'
 
-import './devCheck'
+export const compile = () => {
+  if (__DEV__) {
+    warn(
+      `Runtime compilation is not supported in this build of Vue.` +
+        (__ESM_BUNDLER__
+          ? ` Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".`
+          : __ESM_BROWSER__
+            ? ` Use "vue.esm-browser.js" instead.`
+            : __GLOBAL__
+              ? ` Use "vue.global.js" instead.`
+              : ``) /* should not happen */
+    )
+  }
+}

rollup.config.js

@@ -141,6 +141,7 @@ function createConfig(format, output, plugins = []) {
       createReplacePlugin(
         isProductionBuild,
         isBundlerESMBuild,
+        isBrowserESMBuild,
         // isBrowserBuild?
         (isGlobalBuild || isBrowserESMBuild || isBundlerESMBuild) &&
           !packageOptions.enableNonBrowserBranches,
@@ -162,6 +163,7 @@ function createConfig(format, output, plugins = []) {
 function createReplacePlugin(
   isProduction,
   isBundlerESMBuild,
+  isBrowserESMBuild,
   isBrowserBuild,
   isGlobalBuild,
   isNodeBuild
@@ -179,6 +181,8 @@ function createReplacePlugin(
     // If the build is expected to run directly in the browser (global / esm builds)
     __BROWSER__: isBrowserBuild,
     __GLOBAL__: isGlobalBuild,
+    __ESM_BUNDLER__: isBundlerESMBuild,
+    __ESM_BROWSER__: isBrowserESMBuild,
     // is targeting Node (SSR)?
     __NODE_JS__: isNodeBuild,
     __FEATURE_OPTIONS__: true,