Can't import SFC with Vue Compiler

[ValentinCrochemore]

Describe the bug

Using Nuxt with SSR I get a window is not defined when importing a component from Bit.

Steps to Reproduce

1. Create a component with bit and export it
2. In another workspace npx create-nuxt-app my-nuxt-app and select universal mode
3. Yarn install the component in the Nuxt app, import it and use it in pages/index.vue

Expected Behavior

The component should render normally either from client or server side.

Screenshots, exceptions and logs

The component in my library

The Nuxt app where the component is used

The stack trace

Specifications

• Bit version: 14.4.3
• Node version: 12.13.0
• npm / yarn version: 6.12.1 / 1.19.1
• Platform: Windows 10
• Compiler / Tester (include version): vue@2.6.15

Additional context

As discussed here, I think the issue is when you import the sfc component this way import MyComp from '@bit/username.collection.component/sfc', it breaks because there is no "browser": { "./sfc": "Component.vue" } in the package.json of the compiled components, so I cannot access the sfc component in my app.

[JoshK2]

Hey, I think I found a temporary solution that can help you.
If you want you can render the component on client-side only like is described here https://nuxtjs.org/faq/window-document-undefined. For this, you need to use also this tag.

Here is a complete example of the index.vue page: (Install this component before)

<template>
  <div class="container">
    <div>
      <logo />
      <client-only>
        <SpinnerLoader />
      </client-only>
      <h1 class="title">
        my-nuxt-app
      </h1>
      <h2 class="subtitle">
        My awe-inspiring Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green"
        >
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'
let SpinnerLoader
if (process.client) {
  SpinnerLoader = require('@bit/joshk.vue-spinners-css.spinner-loader').default
}
export default {
  components: {
    Logo,
    SpinnerLoader
  }
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

I hope it will help you for now.

[ValentinCrochemore]

Hey ! Thanks for your useful tips but I need SSR capabilities for my project so I'll keep waiting for a more sustainable solution :wink: