nuxt/bridge

🌉 Experience Nuxt 3 features on existing Nuxt 2 projects

🌉 Nuxt Bridge

Reduce the differences with Nuxt 3 and reduce the burden of migration to Nuxt 3.

Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.

Using Nuxt Bridge, you can make sure your project is (almost) ready for Nuxt 3 and you can gradually proceed with the transition to Nuxt 3.

⚠️ Note: Nuxt Bridge provides identical features to Nuxt 3 (Nuxt 3 docs) but there are some limitations, notably that useAsyncData and useFetch composables are not available. Please read the rest of this page for details.

⚠️ Note: Nuxt Bridge does not support Internet Explorer. Supported browsers are listed at https://caniuse.com/es6-module-dynamic-import.

🌱 Note: If you're starting a fresh Nuxt project, please skip this module and directly go to the Nuxt 3 Installation.

Docs

Visit the documentation site for migration guide.

💻 Development

• Clone repository
• Ensure you have the latest LTS version of Node.js installed
• Enable Corepack using corepack enable to enable pnpm and yarn
• Install dependencies with pnpm install
• Run pnpm dev:prepare to activate passive development
• Open playground with pnpm dev

Learn more about in our documentation on how to contribute to Nuxt.

License

MIT

bridge's Issues

Composition API for bridge

Plan:

• Enable CAPI via imports [pooya]
• Compatibility for @nuxtjs/composition-api [daniel] (#584)
• Add v3 app composables/util (#533) (defineNuxtPlugin, hooks, etc) [daniel]
• Auto import (#481) [daniel]
• useMeta with vueuse/meta (#664) [daniel]
• script setup (#678)
• Add v3 composables [pooya+daniel]

Checklist:

• Implement Nuxt3 Composition API for Nuxt 2 current mocked here
• Create virtual vue import to expose vue 3 composables from @vue/composition-api (?): nuxt/framework#664
• Create virtual @nuxtjs/composition-api to make migration easier (?)
• Ensure @nuxtjs/composition-api is disabled to avoid usage conflict
• Support auto imoports (#481)
• Support <script setup> (#678)
• ...with top level await (context: nuxt/framework#579)

icon directory in `.nuxt/dist/client/icons` isn't being copied across to `public/`

Reproduction - add @nuxt/nitro/compat to https://github.com/nuxt/hackernews

`nuxt generate` command

In a static bridge project, we need to be able to run nuxt generate but we can't.

# npm run build
❯ npx nu build   
Nuxt CLI v0.10.0-27185529.820a9d0

 FATAL  [nitro] Please use nuxt generate for static target                                                                                                   22:30:11

  at setupNitroBridge (node_modules/@nuxt/bridge/dist/module.js:112:11)
  at setup (node_modules/@nuxt/bridge/dist/module.js:294:13)
  at ModuleContainer.wrappedModule (node_modules/@nuxt/kit/dist/index.js:1043:22)
  at ModuleContainer.addModule (node_modules/@nuxt/core/dist/core.js:239:34)
  at node_modules/@nuxt/utils/dist/utils.js:639:43
  at processTicksAndRejections (internal/process/task_queues.js:95:5)
  at async ModuleContainer.ready (node_modules/@nuxt/core/dist/core.js:51:7)
  at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:478:5)

[error] Error: [nitro] Please use `nuxt generate` for static target
    at setupNitroBridge (/project/node_modules/@nuxt/bridge/dist/module.js:112:11)
    at setup (/project/node_modules/@nuxt/bridge/dist/module.js:294:13)
    at ModuleContainer.wrappedModule (/project/node_modules/@nuxt/kit/dist/index.js:1043:22)
    at ModuleContainer.addModule (/project/node_modules/@nuxt/core/dist/core.js:239:34)
    at /project/node_modules/@nuxt/utils/dist/utils.js:639:43
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async ModuleContainer.ready (/project/node_modules/@nuxt/core/dist/core.js:51:7)
    at async Nuxt._init (/project/node_modules/@nuxt/core/dist/core.js:478:5)

issue with custom storage naming

If resolved path of custom driver contains space or - the generated code will be invalid. Import name generator only handles ., \ and /.

https://github.com/nuxt/framework/blob/3671cfc7727bf904131503737c92e6e4288320bc/packages/nitro/src/rollup/plugins/storage.ts#L48-L50

Reproduction

• Clone branch https://github.com/docusgen/admin-module/tree/feat/cloud-driver
• Install deps and run yarn dev

When the driver path contains -, the generated import will be like:

import _base-dir_mydriver from '/base-dir/mydriver'

Which is invalid, because of - in import name

Edge middleware inside service worker does not receive post request body

🪟 Environment

nuxt-edge: 2.16.0-27187215.3e9d7e3e
@nuxt/bridge: 0.0.0-27187887.4cd6d80

🖊️ Describe the bug and expected behavior

Calling an edge middleware outside of service worker scope does not send body to middleware.

I dig into the issue and I found that event.request.body is null
https://github.com/nuxt/framework/blob/2c82c279601c07d3361aa0ff8e0b0449c9951bb6/packages/nitro/src/runtime/entries/service-worker.ts#L26

As you can see in compatibility table(https://developer.mozilla.org/en-US/docs/Web/API/Request#browser_compatibility) of Request interface in MDN, body field does not support in environments and only safari and deno is supporting this field

📝 Steps to reproduce

• Clone this code https://github.com/farnabaz/nuxt-bridge/tree/post
• Generate and server the website
• Click on Call Post API
• The expected API response is { somedata: 'value' } but the returned value is { nobody: 1 }

fix types for global `$fetch`

@vueuse/core integration

vueuse is an awesome project with many many useful compostables that can help for DX and rewriting them in nuxt core is reinventing the wheel.

@antfu Has an initial idea to make @vueuse/core/nuxt module registering auto imports and making integration with one line! This module can also cover later compatibility and necessary config adjustments of nuxt.

Regarding making a built-in feature, the only concern I have is about versioning. When vueuse adds a breaking change, we have to essentially bump nuxt version too. By having a nuxt module from vueuse, we can make a smooth addition experience (#569) while not falling into versioning issues.

nitro-edge can't be used on its own as it tries to resolve `@nuxt/nitro`

Issue originates from:
https://github.com/nuxt/framework/blob/be255772b26cb78398af020a1dbb5d367425218f/packages/nitro/src/context.ts#L120-L123

spa-only support

While a very short percentage of users disable ssr feature (%11 as of May 2021 excluding static spa deployments), it will probably still have its own users at least for nuxt2 using nitro [+ vite] and generated static deployments that miss a page. We may bring it back without the complexities of a full renderer (with meta) but simply injecting the required scripts.

Nuxt dev results in error "Invalid host defined options"

Environment

• Operating System: Windows_NT
• Node Version: v16.10.0
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: target, ssr, head, css, plugins, components, buildModules, modules, serverMiddleware, watch, nitro, build, storybook, createRequire
• Runtime Modules: -
• Build Modules: @nuxtjs/[email protected], portal-vue/nuxt, @nuxt/[email protected], pinia/nuxt, @nuxt/[email protected]

Describe the bug and expected behavior

After following the migration guide (for Nuxt 2 > Nuxt Bridge), nuxt dev and nuxt build fail with the following error while loading the @nuxt/bridge module:

 FATAL  Invalid host defined options                                                                                                                                                                                                                      18:43:00  

  at ModuleContainer.module.exports (node_modules\@nuxt\bridge\module.cjs:3:3)
  at ModuleContainer.addModule (node_modules\@nuxt\core-edge\dist\core.js:175:34)
  at node_modules\@nuxt\utils-edge\dist\utils.js:497:61
  at async ModuleContainer.ready (node_modules\@nuxt\core-edge\dist\core.js:45:7)
  at async Nuxt._init (node_modules\@nuxt\core-edge\dist\core.js:348:5)


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   ✖ Nuxt Fatal Error                        │
   │                                             │
   │   TypeError: Invalid host defined options   │
   │                                             │
   ╰─────────────────────────────────────────────╯

The code in question is the following
https://github.com/nuxt/framework/blob/da7ff44c93f82e65c562a5470a272f032b1dad13/packages/bridge/module.cjs#L1-L4

After a bit of googling, the error usually occurs in the context of esm modules and webpack. But that's all I could find.

Steps to reproduce

Steps to reproduce the behavior:

1. Follow migration guide.
2. Run nuxt dev.

Live example: JabRef/JabRefOnline#480

Additional context

The link to the nuxt bridge sandbox is invalid, thus I could not try to replicate the error there (but to be honest, I also wouldn't be able to guess where to start).

defineNuxtPlugin

• Implement defineNuxtPlugin for @nuxt/app to provide typings
• When registering a plugin, if not wrapped inside define helper, use a proxy to provide a compatible context interface

Related:

• Passing inject as second argument to keep signature (#226)

nitro broken with components lazy imports

Hey all!

It is not possible to mix import { defineComponent as foo } from '@vue/composition-api' with import { defineComponent } from '@nuxtjs/composition-api'
when using Nitro. I guess it is related to rollup?

Repo: https://github.com/manniL/nuxt-capi-vue-nitro-defcomp/
Nitro Version: 0.4.0

In this repo, the page uses Nuxt's defineComponent while the Logo component uses the method provided by the CAPI Vue plugin

Repro

1. Get deps (yarn)
2. Start dev server with yarn dev
3. See error (Error: render function or template not defined in component: Logo)
4. Stop server and start with yarn dev:no-nitro
5. See that error is not present.

Expected

No error when mixing both APIs

Additional info.

It works fine with Nitro 0.3.0 and below. With 0.4.0 it breaks.

Maybe(?) related: nuxt-community/composition-api#454

module container destructuring fails with legacy modules

repro: https://github.com/nuxt/framework/tree/repro/legacy-modules + yarn example with-modules

Implement composition API for nuxt2

Related: #105

• Implement Nuxt3 Composition API for Nuxt 2 current mocked here
• Create virtual vue import to expose vue 3 composables from @vue/composition-api (?)
• Create virtual @nuxtjs/composition-api to make migration easier (?)
• Ensure @nuxtjs/composition-api is disabled to avoid usage conflict
• Support auto imoports (#481)

nitro compat generates default import for module with only named exports

Currently getting this error

Server Side Rendering Error: file:///project/.output/server/chunks/app/server.mjs:2
import require$$2 from 'ufo';
       ^^^^^^^^^^
SyntaxError: The requested module 'ufo' does not provide an export named 'default'
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:120:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:165:5)
    at async Loader.import (internal/modules/esm/loader.js:177:24)
    at async file:///project/.output/server/chunks/render.mjs:480:24
    at async renderMiddleware (file:///project/.output/server/chunks/render.mjs:524:20)
    at async handle (file:///project/.output/server/node_modules/h3/dist/index.mjs:572:19)

Generated server/chunks/app/server.mjs entrypoint contains:

import { c as commonjsGlobal, g as getDefaultExportFromCjs } from '../_commonjsHelpers.mjs';
// should likely be: import * as require$$2 from 'ufo';
import require$$2 from 'ufo';
import require$$6 from 'node-fetch';
import require$$0 from 'deepmerge';

Wasm loader does not load from node_modules

Seems that wasm loader does not load files from node_modules.

 WARN  [worker] Unknown file extension ".wasm" for ***/node_modules/shiki/dist/onigasm.wasm

  at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
  at Loader.getFormat (internal/modules/esm/loader.js:102:42)
  at Loader.getModuleJob (internal/modules/esm/loader.js:231:31)
  at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:58:21)
  at async Promise.all (index 9)
  at async link (internal/modules/esm/module_job.js:63:9)

While when I copy the wasm file to server/api directory and use relative path it works as expected

import onigasm from './onigasm.wasm' // works
import onigasm from 'shiki/dist/onigasm.wasm' // Don't work

related to nuxt/framework#693
reproduction: https://github.com/farnabaz/nuxt-shiki

nuxi doesn't work with bridge

Environment

• Operating System: Darwin
• Node Version: v14.17.3
• Nuxt Version: 2.15.8
• Package Manager: Yarn
• Bundler: Webpack
• User Config: components, pwa, head, buildModules
• Runtime Modules: -
• Build Modules: @nuxt/[email protected], @nuxt/[email protected]

Describe the bug and expected behavior

When invoked with build & prepare flags, nuxi gives the following error:

❯ yarn nuxi prepare   
yarn run v1.22.10
$ /project/node_modules/.bin/nuxi prepare
Nuxt CLI v3.0.0
[error] Error: Cannot find module 'nuxt-edge'
Require stack:
- /project/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.resolve (internal/modules/cjs/helpers.js:98:19)
    at Function.p [as resolve] (/project/node_modules/jiti/dist/jiti.js:1:52925)
    at resolveModule (file:///project/node_modules/@nuxt/kit/dist/index.mjs:66:29)
    at importModule (file:///project/node_modules/@nuxt/kit/dist/index.mjs:91:24)
    at tryImportModule (file:///project/node_modules/@nuxt/kit/dist/index.mjs:95:10)
    at loadNuxt (file:///project/node_modules/@nuxt/kit/dist/index.mjs:783:41)
    at Object.invoke (file:///project/node_modules/nuxi/dist/chunks/prepare.mjs:21:24)
    at async _main (file:///project/node_modules/nuxi/dist/chunks/index.mjs:402:7) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/project/index.js' ]
}
error Command failed with exit code 1.

When this is handled the following error then occurs:

❯ yarn nuxi prepare
yarn run v1.22.10
$ /project/node_modules/.bin/nuxi prepare
Nuxt CLI v3.0.0
[error] TypeError: loadNuxt2 is not a function
    at loadNuxt (file:///project/node_modules/@nuxt/kit/dist/index.mjs:786:22)
    at async Object.invoke (file:///project/node_modules/nuxi/dist/chunks/prepare.mjs:21:18)
    at async _main (file:///project/node_modules/nuxi/dist/chunks/index.mjs:402:7)
error Command failed with exit code 1.

Steps to reproduce

Any Nuxt2 project with nuxi installed.

Bridge nitro throws error with cached webpack build

When generating on nuxt2 (with a cached webpack build) the following error is thrown:

ERROR  A dynamic import callback was not specified.
 at exports.importModuleDynamicallyCallback (internal/process/esm_loader.js:34:9)
 at server.js:51:119
 at new Promise (<anonymous>)
 at Function.requireEnsure [as e] (server.js:49:28)
 at _d786f232 (server.js:1738:47)
 at _callee$ (server.js:1042:28)
 at tryCatch (node_modules/regenerator-runtime/runtime.js:63:40)
 at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:294:22)
 at Generator.next (node_modules/regenerator-runtime/runtime.js:119:21)
 at asyncGeneratorStep (server.js:791:28)
 at _next (server.js:809:17)
 at server.js:814:13
 at new Promise (<anonymous>)
 at server.js:806:16
 at server.js:1022:31
 at Array.reduce (<anonymous>)

Currently breaking Nitro demo build on vercel, and reproducible in compat test fixture.

Update: seems issue with bridge injection of nitro module & the two instances of nuxt referred to in nuxt/nuxt#8460

handle ssr redirects

nuxt/nitro-demo#32

`@nuxt/bridge` runtime directory isn't being transpiled

Environment

• Operating System: Darwin
• Node Version: v14.17.3
• Nuxt Version: 2.16.0-27224655.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: head, css, plugins, components, buildModules, bridge, build
• Runtime Modules: -
• Build Modules: @nuxt/[email protected]

Describe the bug and expected behavior

New apps with @nuxt/bridge are not transpiling @nuxt/bridge even though we would expect them to do so, perhaps because the transpile array includes fully resolved bridge runtime path.

Steps to reproduce

npx nuxi init bridge-test --template bridge

Rollup error: vue-server-renderer/build.dev.js does not exist

Environment

Same as before

Describe the bug and expected behavior

ℹ Waiting for file changes                                                                                                 14:48:13
ℹ Memory usage: 1.58 GB (RSS: 2.12 GB)                                                                                     14:48:13
ℹ Listening on: http://localhost:3000/                                                                                     14:48:13
ℹ Generating sitemaps                                                                                                      14:48:13
✔ Generated /sitemap.xml                                                                                                   14:48:13
✔ Nitro built in 506 ms                                                                                                    14:48:14

 ERROR  Rollup error: Error: File ~/project/vue-server-renderer/build.dev.js does not exist.

✔ Nitro built in 926 ms                                                                                                    14:48:14
✔ Ready to run node src/.output/server/index.mjs                                                                           14:48:14

Steps to reproduce

Additional context

• src/.output does not exists, src/.nuxt does
• the rollup error mentions a vue-server-renderer folder in the root of my project. Which is weird, I would've expected either ./src, ./src/.nuxt or ./node_modules

getItem returning the wrong type of values inside Nitro bundle

Environment

• Operating System: Darwin
• Node Version: v16.8.0
• Nuxt Version: 2.16.0-27217455.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

Describe the bug and expected behavior

When bundled with Nitro, and using unstorage, there seem to be a bug in which a string value containing a single integer (like 5) gets converted into an number, therefore getItem returns it as a number instead of a string.

Steps to reproduce

• Pull this branch: https://github.com/docusgen/theme/tree/feat/nitro
• Add a single "5" into example/content/test/5.fifth-test-page.md
• Run yarn build:example
• Look at the output once it reachs Nitro server build.

Additional context

We don't know if this is expected behavior for unstorage ; if it is please notify us so we can patch these errors from @docus/core.

Deps installed using PNPM do not resolve properly

Environment

Nuxt project info:

---

• Operating System: Linux
• Node Version: v16.10.0
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: unknown
• Bundler: Webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Describe the bug and expected behavior

I have a PNPM monorepo of which my Nuxt 2 app is one of the packages. I followed the Nuxt Bridge steps (https://v3.nuxtjs.org/getting-started/bridge) and it seems to build at first but when the progress bar is done, a series of error outputs are produced.

ERROR  Failed to compile with 2 errors                                                                                                                           friendly-errors 22:22:12

This dependency was not found:                                                                                                                                    friendly-errors 22:22:12
                                                                                                                                                                  friendly-errors 22:22:12
* child_process in /home/andrew/h/node_modules/.pnpm/[email protected]/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js, /home/andrew/h/node_modules/.pnpm/[email protected]/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js
                                                                                                                                                                  friendly-errors 22:22:12
To install it, you can run: npm install --save child_process                                                                                                      friendly-errors 22:22:12

 WARN  [worker] Cannot find package 'unenv' imported from /home/andrew/h/packages/hoppscotch-app/.nuxt/nitro/index.mjs                                                   22:22:12
Did you mean to import [email protected]/node_modules/unenv/runtime/polyfill/fetch.node.js?

  Did you mean to import [email protected]/node_modules/unenv/runtime/polyfill/fetch.node.js?
  at new NodeError (node:internal/errors:371:5)
  at packageResolve (node:internal/modules/esm/resolve:884:9)
  at moduleResolve (node:internal/modules/esm/resolve:929:18)
  at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:1044:11)
  at Loader.resolve (node:internal/modules/esm/loader:89:40)
  at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

Navigating to the development server also just gets stuck in the NuxtJS loading screen.

Steps to reproduce

I tried to create a new Nuxt 2 app with create-nuxt-app CLI and moved it to pnpm and added nuxt-edge and @nuxt/bridge and it failed with a mismatching vue version error.
This doesn't happen while on the normal Nuxt 2 setup and using PNPM.

Additional context

I think this is basically the same issue, but Nuxt 3 apps made using the nuxi CLI also don't properly resolve deps under PNPM while it works fine with NPM.

Deps installed using PNPM do not resolve properly

Environment

Nuxt project info:

---

• Operating System: Linux
• Node Version: v16.10.0
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: unknown
• Bundler: Webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Describe the bug and expected behavior

I have a PNPM monorepo of which my Nuxt 2 app is one of the packages. I followed the Nuxt Bridge steps (https://v3.nuxtjs.org/getting-started/bridge) and it seems to build at first but when the progress bar is done, a series of error outputs are produced.

ERROR  Failed to compile with 2 errors                                                                                                                           friendly-errors 22:22:12

This dependency was not found:                                                                                                                                    friendly-errors 22:22:12
                                                                                                                                                                  friendly-errors 22:22:12
* child_process in /home/andrew/h/node_modules/.pnpm/[email protected]/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js, /home/andrew/h/node_modules/.pnpm/[email protected]/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js
                                                                                                                                                                  friendly-errors 22:22:12
To install it, you can run: npm install --save child_process                                                                                                      friendly-errors 22:22:12

 WARN  [worker] Cannot find package 'unenv' imported from /home/andrew/h/packages/hoppscotch-app/.nuxt/nitro/index.mjs                                                   22:22:12
Did you mean to import [email protected]/node_modules/unenv/runtime/polyfill/fetch.node.js?

  Did you mean to import [email protected]/node_modules/unenv/runtime/polyfill/fetch.node.js?
  at new NodeError (node:internal/errors:371:5)
  at packageResolve (node:internal/modules/esm/resolve:884:9)
  at moduleResolve (node:internal/modules/esm/resolve:929:18)
  at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:1044:11)
  at Loader.resolve (node:internal/modules/esm/loader:89:40)
  at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

Navigating to the development server also just gets stuck in the NuxtJS loading screen.

Steps to reproduce

I tried to create a new Nuxt 2 app with create-nuxt-app CLI and moved it to pnpm and added nuxt-edge and @nuxt/bridge and it failed with a mismatching vue version error.
This doesn't happen while on the normal Nuxt 2 setup and using PNPM.

Additional context

I think this is basically the same issue, but Nuxt 3 apps made using the nuxi CLI also don't properly resolve deps under PNPM while it works fine with NPM.

Missing `head.titleTemplate` types

(reported by @clemcode)

Environment

Describe the bug and expected behavior

Steps to reproduce

Additional context

App.vue support for bridge ?

We can support an alias of layouts/default.vue ~> App.vue to make bridge projects even closer to nuxt 3.

/cc @Atinux Wdyt?

Enable auto import for nuxt2

We shall import module from `../../nuxt3/src/global-imports/module in bridge module and it will be compiled in bridge bundle but it needs:

• Backward compatibility for getContents (#480)
• A configuration to change default preset and importing from @vuejs/composition-api instead of vue[3] here

Issue with `@vue/composition-api` resolution

Describe the bug and expected behavior

Libraries may resolve their own version of @vue/composition-api. For example, vue-demi does this: vueuse/vue-demi#105

Any resolved version will fail if transpiled (e.g. @vue/composition-api/dist/vue-composition-api.esm.js gets resolved - because of the alias we set - to @vue/composition-api/dist/vue-composition-api.mjs/dist/vue-composition-api.esm.js.

Moreover, if not transpiled, if the resolved version is not what we use (the .mjs version), the composition API plugin will not be successfully enabled and libraries that use (for example) vue-demi will fail confusingly.

It is possible to resolve by creating additional aliases in bridge/capi but wanted to raise as an issue before submitting PR as this is a broader ecosystem issue. (It will, for example, also affect @nuxtjs/composition-api and other community libraries.)

cc: @antfu

Query params does not pass into edge middleware on service worker localCall

Currently Nitro's service worker entry does not support using query params in service worker.

Service worker entry does parse url of fetch event using URL
https://github.com/nuxt/framework/blob/13abec6143d6f0be979993940137a3cb9ed3f562/packages/nitro/src/runtime/entries/service-worker.ts#L9

And just uses url.pathname in localCall

https://github.com/nuxt/framework/blob/13abec6143d6f0be979993940137a3cb9ed3f562/packages/nitro/src/runtime/entries/service-worker.ts#L24

Therefore query params will not pass to edge handlers

duplicated `@babel/plugin-transform-typescript` throws error

Describe the bug and expected behavior

If user has already added @babel/plugin-transform-typescript Babel will throw an error:

Module build failed (from ./node_modules/babel-loader/lib/index.js):                                                           friendly-errors 15:36:30
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Steps to reproduce

export default {
  build: {
    babel: {
      plugins: ['@babel/plugin-transform-typescript']
    }
  },
  buildModules: [
    '@nuxt/bridge'
  ]
}

fs dependency not found in consola

Environment

Same as before

Describe the bug and expected behavior

I followed the migration guide and run yarn dev, but received multiple errors including this one:

 ERROR  Failed to compile with 1 errors                                                                    friendly-errors 14:48:07

This dependency was not found:                                                                             friendly-errors 14:48:07
                                                                                                           friendly-errors 14:48:07
* fs in ./lib-shared/node_modules/consola/dist/consola.js                                                  friendly-errors 14:48:07

⚠️ Note that lib-shared is a git submodule within my main repo

Steps to reproduce

Additional context

Deps installed using PNPM do not resolve properly

Environment

Nuxt project info:

---

• Operating System: Linux
• Node Version: v16.10.0
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: unknown
• Bundler: Webpack
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Describe the bug and expected behavior

I have a PNPM monorepo of which my Nuxt 2 app is one of the packages. I followed the Nuxt Bridge steps (https://v3.nuxtjs.org/getting-started/bridge) and it seems to build at first but when the progress bar is done, a series of error outputs are produced.

ERROR  Failed to compile with 2 errors                                                                                                                           friendly-errors 22:22:12

This dependency was not found:                                                                                                                                    friendly-errors 22:22:12
                                                                                                                                                                  friendly-errors 22:22:12
* child_process in /home/andrew/h/node_modules/.pnpm/[email protected]/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js, /home/andrew/h/node_modules/.pnpm/[email protected]/node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js
                                                                                                                                                                  friendly-errors 22:22:12
To install it, you can run: npm install --save child_process                                                                                                      friendly-errors 22:22:12

 WARN  [worker] Cannot find package 'unenv' imported from /home/andrew/h/packages/hoppscotch-app/.nuxt/nitro/index.mjs                                                   22:22:12
Did you mean to import [email protected]/node_modules/unenv/runtime/polyfill/fetch.node.js?

  Did you mean to import [email protected]/node_modules/unenv/runtime/polyfill/fetch.node.js?
  at new NodeError (node:internal/errors:371:5)
  at packageResolve (node:internal/modules/esm/resolve:884:9)
  at moduleResolve (node:internal/modules/esm/resolve:929:18)
  at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:1044:11)
  at Loader.resolve (node:internal/modules/esm/loader:89:40)
  at Loader.getModuleJob (node:internal/modules/esm/loader:242:28)
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
  at link (node:internal/modules/esm/module_job:75:36)

Navigating to the development server also just gets stuck in the NuxtJS loading screen.

Steps to reproduce

I tried to create a new Nuxt 2 app with create-nuxt-app CLI and moved it to pnpm and added nuxt-edge and @nuxt/bridge and it failed with a mismatching vue version error.
This doesn't happen while on the normal Nuxt 2 setup and using PNPM.

Additional context

I think this is basically the same issue, but Nuxt 3 apps made using the nuxi CLI also don't properly resolve deps under PNPM while it works fine with NPM.

[CF] External dependencies outside root folder not found (monorepo)

Hey 👋🏻

I'm here again, reporting a similar bug like nuxt/nuxt#11465, again due to a monorepo structure but this time limited to the CloudFlare preset.

Reproduction

1. Clone the repo https://github.com/manniL/nitro-monorepo-vue-not-found
2. Install deps (yarn)
3. (optional) Run cd packages/app && yarn dev -> this works fine ✅
4. Run NITRO_PRESET=cloudflare yarn generate (still in the app subfolder) to generate your worker
5. See the following error

The first trace points directly to const Vue = __webpack_require__(/*! vue */ "vue");

Stack trace

FATAL [worker] Cannot read property 'use' of undefined 17:47:42

at Module. (node_modules/.cache/nuxt/dist/server/server.js:3852:24)
at webpack_require (node_modules/.cache/nuxt/dist/server/server.js:27:30)
at Object. (node_modules/.cache/nuxt/dist/server/server.js:1629:18)
at webpack_require (node_modules/.cache/nuxt/dist/server/server.js:27:30)
at node_modules/.cache/nuxt/dist/server/server.js:118:18
at node_modules/.cache/nuxt/dist/server/server.js:121:1
at createCommonjsModule (node_modules/.cache/nuxt/nitro/index.js:656:9)
at Object. (node_modules/.cache/nuxt/nitro/index.js:14363:14)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)

╭─────────────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ TypeError: [worker] Cannot read property 'use' of undefined │
│ │
╰─────────────────────────────────────────────────────────────────╯

error Command failed with exit code 1.

In this case, Vue.use is called somewhere throughout the application but couldn't be found.

Workaround

A very naive workaround is to change the moduleDirectories to include upath.resolve(nitroContext._nuxt.rootDir, "../../node_modules"). Then, the above error does not occur anymore.

Of course, this isn't optimal but I'm not sure what the best strategy would be here for "full monoerepo support". Maybe making the moduleDirectories configurable? 🤔

nohoisting some packages like vue would work as well but has major disadvantages (e.g. lots of package dupes, errors on circular deps etc).

options `asyncData` compatibility

Try the Nuxt 2 fetch hook (using onServerPrefetch)

Avoid using `<script setup nuxt>`

Discussing with @yyx990803, it is preferred to not introduce new attributes to <script setup> while we used nuxt keyword to add defineNuxtComponent wrapper that allows using asyncData without await and handles enqueued promises but wrapping every component also doesn't make sense since usually, only some components have data fetching logic and the additional ticks overhead to the rest of components affects overall performance as we introduce more logic into defineNuxtComponent.

Some ideas:

• Keep using nuxt
• Use <script setup> and wrap all (ignore perf)
• Use <script setup async> (new convention adding to SFCs)
• Auto-detect wrapper requirement based on syntax usage ([useAsyncData,useFetch] -- extendable) and require explicit await for composables
• Introduce additional await nuxtPromises() utility to be used at the end of the file

Discussing with the team (@Atinux @antfu and @danielroe) auto detect and using <script setup> again is best option so far. Yet we can think of other aspects.

---

On a related topic, @yyx990803 also mentioned it is more preferred if we keep using <script setup> (over options API) in the examples. We can only use explicit defineNuxtComponent with options API in sections that need backward compatibility and automated migration scripts in order to keep supporting legacy options like asyncData, fetch, transition, etc

NuxtApp compatibility

Related: #113

To make new plugins backward compatible, we can implement a compatible version of nuxt 3 app composibles in bridge, virtual #app import:

• defineNuxtPlugin
• useNuxtApp
• NuxtAppCompat interface (extending NuxtApp)

defineNuxtPlugin is currently mocked here for bridge but needs an implementation and probably refactor to runtime/nuxt.ts

TypeError: nuxtCtx.set is not a function

https://github.com/productfrontenddeveloper/nuxt3_bug

Environment

Nuxt CLI v3.0.0-27234155.9f06830 17:54:57
Nuxt project info: (copied to clipboard) 17:54:57

---

• Operating System: Darwin
• Node Version: v14.18.0
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: dev, ssr, telemetry, components, css, head, router, loading, buildModules, image, modules, build, plugins, pwa, i18n, auth, server, axios, apollo, publicRuntimeConfig, firebase
• Runtime Modules: @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
• Build Modules: [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @nuxt/[email protected]

Describe the bug and expected behavior

backport node resolution to nuxt2 in bridge

Nuxt2 is still using webpack4, which uses enhanced-resolve@4, which lacks resolver support for node export subpaths/conditions (and indeed exports/imports more generally).

It would be good to backport this support to nuxt2 so we can assume a certain level of tooling support (which is possessed by vite - for nuxt-vite - and rollup - for @nuxt/nitro which are also installed by bridge).

Support vue compat

https://github.com/vuejs/vue-next/tree/master/packages/vue-compat

Investigate to see if possible to support vue3 compat build with a flag in nuxt.config to make it easier for users migrating from nuxt2 to nuxt3.

We probably also need complimentary flags to support like _ pages routes, options API (validate, asyncData, fetch) and middleware support. If some are not possible we might try codemods via CLI but since this is the official take of vue3 for the migration plan and we are already doing it for kit and nitro, worth a try.

Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir

https://github.com/productfrontenddeveloper/nuxt3_bug

Environment

---

• Operating System: Darwin
• Node Version: v14.18.0
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: components, css, head, router, loading, buildModules, image, modules, build, plugins, pwa, i18n, auth, server, axios, apollo, publicRuntimeConfig
• Runtime Modules: @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @nuxt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected]
• Build Modules: [email protected], @nuxtjs/[email protected], @pinia/[email protected], @nuxt/[email protected]

---

Describe the bug and expected behavior

Steps to

yarn install
yarn dev

Replace swc with babel

SWC brings double native dependencies (in addition to esbuild deps of nitro) to bridge users and with different transpiling making issue with top level fetch() (lenght detection fix in nuxt2). We might replace it with directly adding babel/plugin-transform-typescript as we are already using babel.

For the future enhancenments we might replace babel with esbuild (like nuxt-esbuild) but since it has known issues as well might be safest to use existing babel stack by default.

Cannot read property 'handle' of undefined

Cannot read property 'handle' of undefined 18:10:26

at Function.use (node_modules\connect\index.js:87:21)
at Object.set [as setLegacyMiddleware] (/D:/Dev/footfoot/footfoot-client/node_modules/@nuxt/nitro/dist/index.mjs:1776:13)
at /D:/Dev/footfoot/footfoot-client/node_modules/@nuxt/bridge/dist/module.mjs:194:19
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)

╭───────────────────────────────────────────────────────────╮
│ │
│ ✖ Nuxt Fatal Error │
│ │
│ TypeError: Cannot read property 'handle' of undefined │
│ │
╰───────────────────────────────────────────────────────────╯

Environment

Nuxt CLI v3.0.0-27234175.2fb58ae 18:11:56
RootDir: D:\Dev\footfoot\footfoot-client 18:11:57
Nuxt project info: 18:11:57

---

• Operating System: Windows_NT
• Node Version: v14.17.6
• Nuxt Version: 2.16.0-27226092.034b9901
• Package Manager: Yarn
• Bundler: Webpack
• User Config: render, pageTransition, serverMiddleware, head, router, loading, generate, css, buildModules, modules, speedkit, cache, pwa, feed, robots, historyState, pruneHtml, axios, sitemap, plugins, workbox, auth, configureWebpack, build, env
• Runtime Modules: [email protected], [email protected], [email protected], @nuxtjs/[email protected], v-sanitize/nuxt, [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], [email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], [email protected], @neneos/[email protected], @luxdamore/[email protected], vue-social-sharing/nuxt, [email protected], [email protected], [email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @nuxt/[email protected]

Describe the bug and expected behavior

Running nuxt dev make things crash

Nitro worker preset does not inline external packages

Worker preset should not import external packages. External packages must inline inside the main file for worker targets, like browser or Cloudflare

🪟 Environment

@nuxt/nitro-edge: 0.10.0-27198267.d05d882

📝 Steps to reproduce

• Clone https://github.com/docusgen/docus-preview
• Install deps
• Run NITRO_PRESET=cloudflare yarn nuxt generate

Handle `options.css`

Allows automation of adding global styles (can be polyfilled with plugins maybe?)

Nitro does not call `vue-renderer:...` hooks

🪟 Environment

• Nuxt Version: 2.16.0-27184333.6f94b1f9
• Bridge Version: 0.0.0-27186726.c0c5b9b

🖊️ Describe the bug and expected behavior

Browser preset uses vue-renderer:ssr:templateParams hook to inject script to all pages.

https://github.com/nuxt/framework/blob/cc428a60f11978522f0aee29b5c7582f67e5efd4/packages/nitro/src/presets/browser.ts#L55-L62

But Nitro renderer does not call any vue-renderer:* hook. there fore the script does not inject to pages.

As the result service worker does not register in static pages and it registers only in SPA fallback.

Here is Nitro renderer middleware logic with has not call renderer hooks
https://github.com/nuxt/framework/blob/cc428a60f11978522f0aee29b5c7582f67e5efd4/packages/nitro/src/runtime/app/render.ts#L51-L106

📝 Steps to reproduce

Steps to reproduce the behavior:

1. clone https://github.com/docusgen/core/tree/feat/preview-storage
2. yarn generate
3. npx http-server example/.output/public
4. Visit index page source and you can't see this service worker script
5. https://github.com/nuxt/framework/blob/cc428a60f11978522f0aee29b5c7582f67e5efd4/packages/nitro/src/presets/browser.ts#L11-L17

Exports not found in @vue/composition-api

Environment

Same as before

Describe the bug and expected behavior

This might be because its still in process, seems Daniel made some PRs recently around composition api?

(Almost) All composition-api export return errors (shortened the list, it goes on for all other exports):

 ERROR  Failed to compile with 33 errors                                                                   friendly-errors 14:48:13


 ERROR  in ./src/.nuxt/global-imports.mjs                                                                  friendly-errors 14:48:13

"export 'computed' was not found in '@vue/composition-api'                                                 friendly-errors 14:48:13
                                                                                                           friendly-errors 14:48:13

 ERROR  in ./src/.nuxt/global-imports.mjs                                                                  friendly-errors 14:48:13

"export 'customRef' was not found in '@vue/composition-api'                                                friendly-errors 14:48:13
                                                                                                           friendly-errors 14:48:13

 ERROR  in ./node_modules/@nuxt/bridge-edge/dist/runtime/capi.plugin.mjs                                   friendly-errors 14:48:13

"export 'default' (imported as 'VueCompositionAPI') was not found in '@vue/composition-api'                friendly-errors 14:48:13
                                                                                                           friendly-errors 14:48:13

 ERROR  in ./src/.nuxt/global-imports.mjs                                                                  friendly-errors 14:48:13

"export 'defineAsyncComponent' was not found in '@vue/composition-api'                                     friendly-errors 14:48:13
                                                                                                           friendly-errors 14:48:13

Steps to reproduce

Additional context

$ yarn why @vue/composition-api
yarn why v1.22.5
[1/4] Why do we have the module "@vue/composition-api"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "@vue/[email protected]"
info Reasons this module exists
   - "@nuxt#bridge-edge" depends on it
   - Hoisted from "@nuxt#bridge-edge#@vue#composition-api"
info Disk size without dependencies: "448KB"
info Disk size with unique dependencies: "520KB"
info Disk size with transitive dependencies: "520KB"
info Number of shared dependencies: 1
Done in 1.43s.

type support for bridge composables

Describe the expected behavior

At the moment no types are being generated at all for any of the bridge composables. I think we also need an (automatic) bridge equivalent of nuxi prepare 😁 to bring the type goodness into a nuxt2 project

getNuxtVersion utility

Just ideas for discussion as needs are encountered.

• registerComponent() -> Vue.component() or nuxt.app.component()
• getNuxtVersion() (it's better to expose whether a given functionality is present, but this can be an escape hatch)
• addCompatPlugin or requivalent (wraps plugin in a compat handler that ensures old/new plugins work in the other version of Nuxt) -> #118
• getHelpers - for use in async setup() where addPlugin would otherwise lose track of nuxt - this would generate 'wrapped' helpers that are called with version of nuxt present when getHelpers was called

Cannot access 'inject' before initialization

Issue is with plugins that need inject in a compat/bridge setup (when built).

Server Side Rendering Error: ReferenceError: Cannot access 'inject' before initialization
    at _callee$ (file:///project/.output/server/chunks/app/server.mjs:8798:49)
    at tryCatch (/project/.output/server/node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (/project/.output/server/node_modules/regenerator-runtime/runtime.js:274:22)
    at Generator.prototype.<computed> [as next] (/project/.output/server/node_modules/regenerator-runtime/runtime.js:97:21)
    at _nuxt_asyncGeneratorStep (file:///project/.output/server/chunks/app/server.mjs:8546:28)
    at _next (file:///project/.output/server/chunks/app/server.mjs:8564:13)

The following plugin in bridge fixture is sufficient to trigger the error:

export default (_ctx, inject) => {
  inject('test', 'test')
}

edit: cause is nuxt-swc, which generates following broken code in .nuxt/dist/server/server.js:

switch (a) {
  case 9:
    function inject(key, value) {
        // ...
    }
    // Inject runtime config as $config
    inject('config', config)
    // ...
  case 18:
    return test(app.context, inject)
}

Test bridge fixture with nuxi cli