Vue nestesd SFC does not play well with Astro

[louiss0]

package	version
vue	3.3.4
vite	4.3.4
vite-plugin-vue-nested-sfc	0.1.2
vite	4.3.4
astrojs/vue	2.2.0

I was trying to migrate my app to using this plugin when I ran into this error. It was caused by me trying to import a component into Astro that was using the <component/> . It also happens when trying to import a component that does not really have a default or a script tag at all.

 error   The argument 'path' must be a string or Uint8Array without null bytes. Received '/src/components/\x00plugin-vue:export-helper'

 [vite] Error when evaluating SSR module /home/louiss/main/web-projects/monorepo/personal-projects/apps/portfolio/src/pages/index.astro: failed to import "/src/components/BaseComponents.vue"
|- TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '/src/components/\x00plugin-vue:export-helper'
    at open (node:internal/fs/promises:538:10)
    at Object.readFile (node:internal/fs/promises:909:20)
    at loadAndTransform (file:///home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/vite@4.3.9_@types+node@20.2.5/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53332:41)

Link to minimal Repoducible Example

This link will lead to an example where I try to import three components. They come from module called ./components/Components.vue You see them immediately. Please tell me when you are done.

https://stackblitz.com/edit/withastro-astro-3en7fb?file=src%2Fpages%2Findex.astro

[louiss0]

Take a look at these error logs.

This one happens when the export is not true on certain components.

[vite] Error when evaluating SSR module /src/components/BaseComponents.vue
?vue&type=component&index=0&name=container&export=true&lang.vue:
failed to import "/src/components/BaseComponents.vue/Container.vue"

import "/src/components/BaseComponents.vue/Container.vue"

This one happens when the export is true on certain components

Error when evaluating SSR module /src/components/ProjectFilter.vue: failed to import "/src/components/ProjectFilter.vue?vue&type=component&index=0&name=filter-button&lang.vue"
|- TypeError: The argument 'path' must be a string or Uint8Array without null bytes. Received '/src/components/\x00plugin-vue:export-helper'

import "/src/components/ProjectFilter.vue?vue&type=component&index=0&name=filter-button&lang.vue"

[louiss0]

Ok I think you should look at the code from Vue Plugin Vue JSX It can help you with your problem. I know I keep commenting on this issue but I like this plugin. I want it to succeed.

The plugin uses the third parameter of the transform() called options. Which is used to store the ssr: property. Which tells Vite whether SSR is enabled.

{
transform(load,id,options){
     const ssr = opt?.ssr === true

}
}

Then at the end of the function this code is written.

if (ssr) {
            const normalizedId = normalizePath(path.relative(root, id))
            let ssrInjectCode =
              `\nimport { ssrRegisterHelper } from "${ssrRegisterHelperId}"` +
              `\nconst __moduleId = ${JSON.stringify(normalizedId)}`
            for (const { local } of hotComponents) {
              ssrInjectCode += `\nssrRegisterHelper(${local}, __moduleId)`
            }
            result.code += ssrInjectCode
          }
}

At the top of the plugin, this code is written.

const ssrRegisterHelperId = '/__vue-jsx-ssr-register-helper'
const ssrRegisterHelperCode =
  `import { useSSRContext } from "vue"\n` +
  `export ${ssrRegisterHelper.toString()}`

/**
 * This function is serialized with toString() and evaluated as a virtual
 * module during SSR
 */
function ssrRegisterHelper(comp: ComponentOptions, filename: string) {
  const setup = comp.setup
  comp.setup = (props, ctx) => {
    // @ts-ignore
    const ssrContext = useSSRContext()
    ;(ssrContext.modules || (ssrContext.modules = new Set())).add(filename)
    if (setup) {
      return setup(props, ctx)
    }
  }
}

I think this is how Vite SSR modules are allowed to be passed. This code might be the key. I don't understand what this code does, but I know that. It works.

[JoJk0]

package version vue 3.3.4 vite 4.3.4 vite-plugin-vue-nested-sfc 0.1.2 vite 4.3.4 astrojs/vue 2.2.0 I was trying to migrate my app to using this plugin when I ran into this error. It was caused by me trying to import a component into Astro that was using the <component/> . It also happens when trying to import a component that does not really have a default or a script tag at all.

 error   The argument 'path' must be a string or Uint8Array without null bytes. Received '/src/components/\x00plugin-vue:export-helper'

 [vite] Error when evaluating SSR module /home/louiss/main/web-projects/monorepo/personal-projects/apps/portfolio/src/pages/index.astro: failed to import "/src/components/BaseComponents.vue"
|- TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string or Uint8Array without null bytes. Received '/src/components/\x00plugin-vue:export-helper'
    at open (node:internal/fs/promises:538:10)
    at Object.readFile (node:internal/fs/promises:909:20)
    at loadAndTransform (file:///home/louiss/main/web-projects/monorepo/personal-projects/node_modules/.pnpm/vite@4.3.9_@types+node@20.2.5/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53332:41)

Link to minimal Repoducible Example

This link will lead to an example where I try to import three components. They come from module called ./components/Components.vue You see them immediately. Please tell me when you are done.

https://stackblitz.com/edit/withastro-astro-3en7fb?file=src%2Fpages%2Findex.astro

I have the same issue while trying to integrate it to VitePress