Cannot find module '@nuxt/bridge/dist/runtime'

[naokihaba]

Cannot find module '@nuxt/bridge/dist/runtime'

Problem

I am migrating from Nuxt 2 to Nuxt 3 using Nuxt Bridge with the Options API.

However, I am encountering an error that says @nuxt/bridge/dist/runtime cannot be found.

According to the documentation, it is implied that using defineNuxtComponent should be possible, but I am unsure why this error is occurring.

https://nuxt.com/docs/bridge/meta

<script>
 // If using the Options API `head` method, you must use `defineNuxtComponent`
 export default defineNuxtComponent({
   head(nuxtApp) {
     // `head` receives the Nuxt app instance but cannot access the component instance
     return {
       meta: [ {
         name: 'description',
         content: 'This is my page description.'
       } ]
     }
   }
 })
</script>

Environment

• "@nuxt/bridge": "3.0.1"
• "nuxt": "2.17.2"
• "vue": "2.7.16"

What I've Tried

I have followed the migration guide and installed the necessary dependencies for Nuxt Bridge. However, I am still encountering this error when trying to use defineNuxtComponent.

I have also checked that my Nuxt configuration is set up correctly for Nuxt Bridge.

Question

Has anyone encountered this issue before or have any insights on why this error might be occurring? Is there something I'm missing in my setup or usage of defineNuxtComponent?

Any help or guidance would be greatly appreciated. Thank you!

[wattanx]

In a minimal environment, it seems to be working.
https://stackblitz.com/edit/github-svkdwc

If you can show me more detailed source code, I may be able advise you!

[naokihaba]

I found the cause of the error.

I am using the nuxt2 command to build as I do not use Nitro.

"scripts": {
 "dev": "nuxt2",
 "build": "nuxt2 build",
 "start": "nuxt2 start"
}

We noticed that only the following set of files are stored in the .nuxt directory, and that imports.m.js is not created.

See Nuxt.js v2 Directory Structure.

Therefore, the #imports reference seems to fail.

In this case, after investigating the difference between defineComponent and defineNuxtComponent, we are considering taking action such as creating a wrapper function, but is there any other workaround?

[wattanx]

I provided an environment that works with typescript: false and nitro: false.
https://stackblitz.com/edit/github-svkdwc

Note that setting birdge.imports: false will not generate imports.mjs.
(bridge.imports is already deprecated.)

[naokihaba]

Thank you for your answer.

I have succeeded with the following settings

export default defineNuxtConfig({
  bridge: {
    meta: true,
    vite: false,
    typescript: false,
    nitro: false,
    capi:true,
  },

After investigating why this setting works, I explicitly set it as bridge.false.

bridge/packages/bridge/src/module.ts

Lines 17 to 38 in 3f650f1

	export default defineNuxtModule({
	meta: {
	name: 'nuxt-bridge',
	configKey: 'bridge'
	},
	defaults: {
	nitro: true,
	nitroGenerator: true,
	vite: false,
	app: {},
	capi: {},
	transpile: true,
	imports: true,
	compatibility: true,
	meta: null,
	typescript: true,
	resolve: true,
	macros: false
	} as BridgeConfig,
	async setup (opts, nuxt) {
	// Disable if users explicitly set to false
	if ((nuxt.options as any).bridge === false) { return }

This is thought to have resulted in an early return

According to overview, it is explicitly stated to be bridge:false, but this may be an outdated description

Alternatively, false when updating to Nuxt3 might be appropriate.

https://nuxt.com/docs/bridge/overview

If so, I will create a separate PR

[wattanx]

The nuxt bridge is designed for a step-by-step migration.
You should start with bridge.false and gradually enable options depending on the step you want to migrate to.

[naokihaba]

Thank you very much!
Very helpful!