Avoid dynamic require by replacing vue with shim in browser

Author: tolgap

Diff for: package-lock.json

@@ -38,13 +38,14 @@
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@contentful/rich-text-types": "^15.12.1",
-    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@vue/test-utils": "^2.0.2",
     "babel-jest": "^26.6.3",
     "jest": "^26.6.3",
     "rollup": "^2.73.0",
     "vue": "^3.2.37"
   }
-}
+}

Diff for: package.json

@@ -1,6 +1,7 @@
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import { babel } from "@rollup/plugin-babel";
 import common from "@rollup/plugin-commonjs";
+import alias from "@rollup/plugin-alias";
 import pkg from "./package.json";
 
 export default [
@@ -15,6 +16,9 @@ export default [
       },
     ],
     plugins: [
+      alias({
+        entries: [{ find: "vue", replacement: "./vue-browser-shim" }],
+      }),
       nodeResolve({
         browser: true,
       }),
@@ -27,7 +31,7 @@ export default [
   },
 
   {
-    external: ["@contentful/rich-text-types"],
+    external: ["@contentful/rich-text-types", "vue"],
     input: "src/index.js",
     output: [
       {

Diff for: rollup.config.js

@@ -1,12 +1,5 @@
 import { BLOCKS, MARKS, INLINES, helpers } from "@contentful/rich-text-types";
-
-let vueInstance;
-if (typeof Vue === "undefined") {
-  vueInstance = require("vue");
-} else {
-  vueInstance = Vue;
-}
-const { h } = vueInstance;
+import { h } from "vue";
 
 const defaultInline = (type, node, key) => {
   return h(

Diff for: src/index.js

@@ -0,0 +1,4 @@
+const { h } = globalThis.Vue;
+
+export default globalThis.Vue;
+export { h };