Nuxt-bridge

[tobiasdiez]

Todo:

• Set SSR to true. Blocked by Build fails with SSR turned off nuxt/bridge#27.
• Enable vite. Blocked by Error when using Vite with Nuxt Bridge nuxt/bridge#284.
• Check graphql client works
• Wait for postcss-nesting 8.0.0/9.0.0 incompatible with Node 17+ csstools/postcss-nesting#87 to be fixed (or downgrade my node)
• Nuxi not found nuxt/bridge#282
• Find & implement workaround for https://github.com/nuxt/framework/discussions/972, maybe:
  • Can not use Prisma from project using Vite prisma/prisma#6491
  • https://dev.to/prisma/bundling-prisma-with-the-cdk-using-aws-lambda-nodejs-2lkd
  • Propose nuxt to do something similar as in https://docs.aws.amazon.com/cdk/api/latest/docs/aws-lambda-nodejs-readme.html#install-modules
• Fix reflect-metadata issue https://github.com/nuxt/framework/discussions/1616. Maybe helpful:
  • Usage without Reflect microsoft/tsyringe#180
  • https://github.com/anatine/esbuildnx/tree/main/packages/esbuild-decorators
  • https://github.com/thomaschaaf/esbuild-plugin-tsc
  • https://stackoverflow.com/questions/68570519/why-cant-reflect-metadata-be-used-in-vite
• Fix pinia:
  • Only add explicit nuxt alias for nuxt3 vuejs/pinia#781
  • fix(bridge): Recognize {... as default } construction in vite plugin nuxt/framework#1769
• fix(nitro, nuxi): add runtimeConfig types (for #config and useRuntimeConfig()) nuxt/framework#1783 config types infer types for runtimeConfig nuxt/bridge#197
• Could not resolve './globalThis.js' nuxt/bridge#204 encountered while running yarn build
• No typescript support anymore for imports from Vue nuxt/bridge#193
• add logging of certain errors when loading worker entrypoint nuxt/bridge#192
• global is not defined on Vite nuxt/bridge#190
• Client-side middlewares don't work nuxt/bridge#55
• fix(nitro): skip non existing externals nuxt/framework#1876
• Error: Must call Vue.use(VueCompositionAPI) before using any function nuxt/bridge#186
• Vite: Default import yields more than default export nuxt/bridge#180 -> Fix VueTailwind
• Two Vue runtimes on client nuxt/bridge#157
• Use nuxi preview nuxt/framework@b5618e9

For later: This is now #770

• Reenable tailconfig viewer. Blocked by Nuxt-Bridge ' [worker] Invalid or unexpected token ' nuxt-modules/tailwindcss#390.
• Remove patches to packages that are needed as workaround for yarn build/start import @apollo/client/core/core.cjs.js? apollographql/apollo-client#9048
• Consider using auto-imports
• Improve code for cjs > esm modules #636
• Add typescript check nuxt/framework@d9c1aa6 Add typecheck to ci #637
• Remove workaround/patch for Nuxi prepare with target static fails nuxt/bridge#184
• Remove workaround/patch once nuxi generate fetches api nuxt/bridge#28 is fixed
• Remove workaround/patch once Bridge with static target throws error during build nuxt-modules/storybook#343 is fixed
• Remove workaround/patch (from bridge) once Bundle builder is not mocking close nuxt-modules/storybook#342 is fixed
• Remove workaround/patch once fix: missing handler in server middleware nuxt-modules/storybook#344 is merged
• Remove workaround/patch once fix: create dummy package.json for ESM compatibility nuxt-modules/storybook#345 is merged
• Remove patch for typing info once chore(bridge): Improve typing for vueApp nuxt/framework#1996 chore(bridge): Improve typing of defineNuxtPlugin function nuxt/framework#1995 is merged
• Remove patch for pinia once feat(nuxt)!: rewrite nuxt module vuejs/pinia#791 is merged
• Remove patch once stub prototype and optionMergeStrategies for vue3 compat nuxt/bridge#40 is fixed
• Remove patch once Dynamic require of "vue" is not supported nuxt/bridge#42 or Provide ES build alfonsobries/vue-tailwind#236 is fixed
• Remove patch once Distribute as ES module tangbc/vue-virtual-scroll-list#367 or Dynamic require of "vue" is not supported nuxt/bridge#42 is fixed
• feat!: support Nuxt 3 nuxt-modules/tailwindcss#399
• Improve vue2 plugins Usage of Vue 2 plugins with bridge nuxt/nuxt#12825

[tobiasdiez]

@pi0 I've encountered a few other issues now:

• As suggested in https://github.com/nuxt/framework/blob/2a0afbd09296cd65d30c5ef5a5324d64149bc3fe/packages/bridge/src/runtime/capi.legacy.mjs#L249, I tried to use useRouter from @nuxt/bridge. However, this doesn't seem to work as useRouter etc are not exported by the bridge module. Using #app seems to work (at least there is not compilation problem reported) but I then loose typescript support which cannot find the module #app.
• How does one activate vite support? The documentation says it is supported.
• Now nuxt dev seems to work, but at the end it displays an "Invalid or unexpected token" issue and in the browser only the nuxt loading screen is displayed (for existing and non-existing routes).

  i Preparing project for development                                                                                                                                                                                                                       
  i Initial build may take a while                                                                                                                                                                                                                          
  i Discovered Components: .nuxt/components/readme.md                                                                                                                                                                                                       
  √ Builder initialized                                                                                                                                                                                                                                     
  √ Nuxt files generated                                                                                                                                                                                                                                    
  √ Client
    Compiled successfully in 20.39s
  
  i Waiting for file changes 
  i Memory usage: 832 MB (RSS: 937 MB)                                                                                                                                                                                                                      
  i Listening on: http://localhost:3000/                                                                                                                                                                                                                    
  √ Nitro built in 551 ms                                                                                                                                                                                                                                   
   WARN  [worker] Invalid or unexpected token                                                                                                                                                                                                               
    at Loader.moduleStrategy (node:internal/modules/esm/translators:146:18)
    at async link (node:internal/modules/esm/module_job:67:21)
  

  This might be related to https://github.com/nuxt/framework/discussions/912.
• nuxt build ends with the following rollup error

  i Nitro preset is browser                                                                                                                                                                                                                                 
  i Cleaning up .output                                                                                                                                                                                                                                     
  start Generating public...                                                                                                                                                                                                                                
  √ Generated public .output/public                                                                                                                                                                                                                         
  start Building server...                                                                                                                                                                                                                                  
  
  ERROR  Rollup error: Could not load D:/Programming/JabRefOnline/.nuxt/dist/server/server.mjs (imported by node_modules\@nuxt\nitro\dist\runtime\app\render.mjs): ENOENT: no such file or directory, open 'D:\Programming\JabRefOnline\.nuxt\dist\server\server.mjs'
  

  (as can be seen also in the github check)
  This has been reported now as Build fails with SSR turned off nuxt/bridge#27.

I tried to search for these issues in the nuxt3 repo and docs but couldn't find anything. Let me know if I should create an new issue at the nuxt repo or if you prefer to discuss things here. Thanks for your help!

[pi0]

Hi @tobiasdiez sorry for late response.

• For router, you can use useNuxtApp().legacyApp.$router
• and #app types should be available. see update tsconfig. You need to use nuxi dev
• For vite, you need to set { bridge: { vite: true } }
• Invalid or unexpected token can happen for many reasons. Maybe you can check .nuxt/dist/server/server.mjs to spot the error
• Thanks for linking SPA issue. Will check it

Anyway thanks for early testing bridge and helping us on leftover issues 💚

[tobiasdiez]

No worries @pi0. I do understand that you have a lot on your mind at the moment. That's why I'm all the more pleased about your answer.

With your help I was now able to migrate the project, more or less (at least nuxt dev starts now). There are a few issues remaining: nuxt/bridge#284 (for vite support), nuxt/bridge#27 (for ssr = true) and nuxt/bridge#258 and nuxt-modules/tailwindcss#390 (for the tailwind config viewer, which was the source of the invalid or unexpected token error above). Thanks for all the hard work you and the team put into the new version. This looks much smoother than what I would have expected from a early public beta!