search

nuxt / bridge

🌉 Experience Nuxt 3 features on existing Nuxt 2 projects
MIT License
271 stars 29 forks source link

nuxi generate - Unexpected token in composition API support files of nuxt-bridge #365

Closed fabifink closed 2 years ago

fabifink commented 2 years ago

Environment

Nuxt project info: 21:27:04

Reproduction

-

Describe the bug

I have migrated my Nuxt2 application to Nuxt-Bridge and if I run nuxi dev everything is working fine. But once I try to build the applications (static target) with nuxi generate, I get the following error:


ERROR in ./node_modules/@nuxt/bridge/dist/runtime/app.plugin.mjs 102:59
Module parse failed: Unexpected token (102:59)
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|     get (target, prop) {
|       if (prop[0] === '$') {
>         return target.nuxt2Context[prop] || target.vue2App?.[prop]
|       }
|       return Reflect.get(target, prop)
 @ ./.nuxt/index.js 48:0-76 375:25-55 381:19-49
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/@nuxt/bridge/dist/runtime/capi.plugin.mjs ./.nuxt/client.js

ERROR in ./node_modules/@nuxt/bridge/dist/runtime/composables.mjs 27:27
Module parse failed: Unexpected token (27:27)
File was processed with these loaders:
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|         return target.public;
|       }
>       return target[prop] ?? target.public[prop];
|     },
|     set(target, prop, value) {
 @ ./node_modules/@nuxt/bridge/dist/runtime/app.mjs 1:0-72 4:35-50 29:13-31
 @ ./node_modules/@nuxt/bridge/dist/runtime/index.mjs
 @ ./node_modules/@nuxt/bridge/dist/runtime/capi.plugin.mjs
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./node_modules/@nuxt/bridge/dist/runtime/capi.plugin.mjs ./.nuxt/client.js

If I deactivate composition API support in the nuxt.config.js, the error disappears, but I am then unable to use the composition API (Which is one of the main reasons for me to migrate).

Can you give me any hint on what I might be doing wrong here?

Additional context

No response

Logs

No response

fabifink commented 2 years ago

fyi: Error happens with vite, as well as wepback4 as a bundler.

danielroe commented 2 years ago

Would you provide a minimal reproduction please? 🙏

MartinX3 commented 2 years ago

@danielroe here is the minimal example. It happens if I use export default defineNuxtConfig( in nuxt.config.js

codesandbox-nuxt-master.zip

But if I continue, I get this error:

ERROR in ./components/layouts/default/CSlideshow.vue?vue&type=script&lang=ts& (./node_modules/vuetify-loader/lib/loader.js??ref--4!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/@nuxt/webpack-edge/node_modules/vue-loader/lib??vue-loader-options!./components/layouts/default/CSlideshow.vue?vue&type=script&lang=ts&) 6:47
Module parse failed: Unexpected token (6:47)
File was processed with these loaders:
 * ./node_modules/vuetify-loader/lib/loader.js
 * ./node_modules/@nuxt/components/dist/loader.js
 * ./node_modules/@nuxt/webpack-edge/node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export default defineComponent({
|     name: 'CSlideshow',
>     props: { items: { required: true, type: [] as PropType<string[]> } },
|     setup() {
|         return {}
 @ ./components/layouts/default/CSlideshow.vue?vue&type=script&lang=ts& 1:0-283 1:299-302 1:304-584 1:304-584
 @ ./components/layouts/default/CSlideshow.vue
 @ ./.nuxt/components/index.js
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/client.js

nuxt generate instead of nuxi generate seems to work and will result into issue https://github.com/nuxt/bridge/issues/27 which I can workaround with the shared hook code. But the docs are telling us to use nuxi generate.

dargmuesli commented 2 years ago

For me the workaround to add @nuxt/bridge to the transpile array works, but I'm not sure if this is the way to go.

danielroe commented 2 years ago

Yes, @nuxt/bridge should be transpiled. (In fact, it should add itself to that array, so let's see what's going wrong there.)

MartinX3 commented 2 years ago

You mean

    build: {
        transpile: ['@nuxt/bridge'],
    },

?

That still results in

 FATAL  [nitro] Please use nuxt generate for static target                                                                                                                  11:19:16
  at setupNitroBridge (node_modules/@nuxt/bridge/dist/chunks/module.mjs:149:11)
  at node_modules/@nuxt/bridge/dist/chunks/module.mjs:1237:15
  at node_modules/hable/dist/hable.js:1:990
  at node_modules/hable/dist/hable.js:1:208
  at async Nuxt.callHook (node_modules/hable/dist/hable.js:1:959)
  at async ModuleContainer.ready (node_modules/@nuxt/core-edge/dist/core.js:49:5)
  at async Nuxt._init (node_modules/@nuxt/core-edge/dist/core.js:346:5)
dargmuesli commented 2 years ago

After https://github.com/nuxt/bridge/pull/324 it should not show "FATAL [nitro] Please use nuxt generate for static target" anymore.

MartinX3 commented 2 years ago

At the end it also tells me ✔ You can now deploy .output/public to any static hosting! But there is no .output/public Even no .output.

dargmuesli commented 2 years ago

But there is no .output

This will be fixed by https://github.com/nuxt/bridge/pull/324 too.

MartinX3 commented 2 years ago

That's great! Maybe #365 and #27 should get added to the linked issues in this PR if they get fixed by it.

Tested nuxt generate since it can't find the nuxi command anymore.

27 is not fixed.

The static output without ssr is unusable garbage. It seems that it still tries to build SSR stuff.

danielroe commented 2 years ago

I cannot reproduce on the latest version of Nuxt Bridge with the zipfile linked by @MartinX3 above.

If you are still experiencing this, would you let me know and provide a minimal reproduction? 🙏