fix: try and resolve ERR_PACKAGE_IMPORT_NOT_DEFINED

Author: harlan-zw

packages/nuxt/src/module.ts

@@ -73,6 +73,10 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.alias['#vueuse/schema-org/runtime'] = await resolvePath(`${schemaOrgPath}/runtime`)
 
     nuxt.hook('vite:extendConfig', (config, { isClient }) => {
+      config.optimizeDeps = config.optimizeDeps || {}
+      config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
+      config.optimizeDeps.exclude.push(...[`${schemaOrgPath}/runtime`, Pkg])
+
       config.plugins = config.plugins || []
       config.plugins.push(SchemaOrgVitePlugin({
         mock: !moduleOptions.client && isClient,
@@ -87,23 +91,15 @@ export default defineNuxtModule<ModuleOptions>({
 
     nuxt.hooks.hook('autoImports:sources', (autoImports) => {
       autoImports.unshift({
-        from: `${moduleRuntime}/composables`,
+        from: `${moduleRuntime}/schema-org-runtime`,
         imports: [
           'injectSchemaOrg',
-        ],
-      })
-      autoImports.unshift({
-        from: '#vueuse/schema-org/runtime',
-        imports: [
           'useSchemaOrg',
+          ...RootSchemas
+            .map(schema => [`define${schema}`])
+            .flat(),
         ],
       })
-      autoImports.unshift({
-        from: '#vueuse/schema-org/provider',
-        imports: RootSchemas
-          .map(schema => [`define${schema}`])
-          .flat(),
-      })
     })
 
     schemaOrgComponents.forEach((component) => {

packages/nuxt/src/runtime/composables.ts renamed to packages/nuxt/src/runtime/schema-org-runtime.ts

@@ -54,6 +54,10 @@
       "import": "./dist/runtime-mock/index.mjs"
     }
   },
+  "imports": {
+    "#vueuse/schema-org/provider": "./dist/providers/base.mjs",
+    "#vueuse/schema-org/runtime": "./dist/runtime/index.mjs"
+  },
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

packages/schema-org/package.json

@@ -1,6 +1,91 @@
-import { defineSchemaOrgComponent } from './defineSchemaOrgComponent'
+import { computed, defineComponent, h, ref, unref } from 'vue'
 // @ts-expect-error untyped
 import { defineArticle, defineBreadcrumb, defineComment, defineHowTo, defineImage, defineLocalBusiness, defineOrganization, definePerson, defineProduct, defineQuestion, defineRecipe, defineReview, defineVideo, defineWebPage, defineWebSite } from '#vueuse/schema-org/provider'
+// @ts-expect-error untyped
+import { useSchemaOrg } from '#vueuse/schema-org/runtime'
+
+const shallowVNodesToText = (nodes: any) => {
+  let text = ''
+  for (const node of nodes) {
+    if (typeof node.children === 'string')
+      text += node.children.trim()
+  }
+  return text
+}
+
+const fixKey = (s: string) => {
+  // kebab case to camel case
+  let key = s.replace(/-./g, x => x[1].toUpperCase())
+  // supports @type & @id
+  if (key === 'type' || key === 'id')
+    key = `@${key}`
+  return key
+}
+
+const ignoreKey = (s: string) => {
+  // pretty hacky, need to setup all props
+  if (s.startsWith('aria-') || s.startsWith('data-'))
+    return false
+
+  return ['class', 'style'].includes(s)
+}
+
+export const defineSchemaOrgComponent = (name: string, defineFn: (input: any) => any) => {
+  return defineComponent({
+    name,
+    props: {
+      as: String,
+      renderScopedSlots: Boolean,
+    },
+    setup(props, { slots, attrs }) {
+      const node = ref(null)
+
+      const nodePartial = computed(() => {
+        const val: Record<string, any> = {}
+        Object.entries(unref(attrs)).forEach(([key, value]) => {
+          if (!ignoreKey(key)) {
+            // keys may be passed with kebab case, and they aren't transformed
+            val[fixKey(key)] = unref(value)
+          }
+        })
+        // only render vnodes while we don't have a node
+        if (!node.value) {
+          // iterate through slots
+          for (const [key, slot] of Object.entries(slots)) {
+            if (!slot || key === 'default')
+              continue
+            // allow users to provide data via slots that aren't rendered
+            val[fixKey(key)] = shallowVNodesToText(slot(props))
+          }
+        }
+        return val
+      })
+
+      // may not be available
+      if (defineFn) {
+        // register via main schema composable for route watching
+        useSchemaOrg([defineFn(unref(nodePartial))])
+      }
+
+      return () => {
+        const data = unref(nodePartial)
+        // renderless component
+        if (!slots.default && !props.renderScopedSlots)
+          return null
+        const childSlots = []
+        if (slots.default)
+          childSlots.push(slots.default(data))
+        if (props.renderScopedSlots) {
+          for (const [key, slot] of Object.entries(slots)) {
+            if (slot && key !== 'default')
+              childSlots.push(slot(data))
+          }
+        }
+        return h(props.as || 'div', {}, childSlots)
+      }
+    },
+  })
+}
 
 export const SchemaOrgArticle = defineSchemaOrgComponent('SchemaOrgArticle', defineArticle)
 export const SchemaOrgBreadcrumb = defineSchemaOrgComponent('SchemaOrgBreadcrumb', defineBreadcrumb)