antfu-collective / vite-ssg

Static site generation for Vue 3 on Vite
MIT License
1.34k stars 137 forks source link

vite-ssg incompatible with @ionic/vue #125

Open riderx opened 2 years ago

riderx commented 2 years ago
import { h, Host, proxyCustomElement } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.<anonymous> (/node_modules/.pnpm/@ionic+vue@6.0.0-rc.2/node_modules/@ionic/vue/dist/index.js:8:25)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
 ELIFECYCLE  Command failed with exit code 1.

As said here : https://github.com/antfu/vite-ssg/issues/22 it could be ionic error in they package.json here : https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/package.json But i see nothing wrong in they package, and it's work with vite, but not vite-ssg @antfu can you enlight me ? i will report to ionic then .

To reproduce :

npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i
pnpm i @ionic/vue@next

add this module : ionic.ts

import { IonicVue } from '@ionic/vue'
import { UserModule } from '~/types'
import '@ionic/vue/css/core.css'

export const install: UserModule = ({ app }) => {
  app.use(IonicVue)
}

and build pnpm build

you will get the issue, but i don't have any issue with vitespa when no ssg : https://github.com/ctholho/vitespa

NunoSav commented 2 years ago

Have you made any progress on this?

riderx commented 2 years ago

i still have random error

riderx commented 2 years ago

@NunoSav i found somthing about this : https://github.com/iamstevendao/vue-tel-input/issues/310 and ionic team gave me a good track to follow : https://github.com/ionic-team/ionic-framework/issues/24800

Ionic imports data from vue-router, which ends up calling defineComponent from Vue.
This defineComponent function uses an imported isFunction call. 
Because there are 2 different instances of Vue bundled, isFunction ends up being undefined.