fix(kit): don't rely on ModuleThis (#272)

packages/kit/src/module/container.ts

@@ -1,7 +1,4 @@
-import { nuxtCtx } from '../nuxt'
 import type { Nuxt } from '../types/nuxt'
-import type { NuxtOptions } from '../types/config'
-import type { TemplateOpts, PluginTemplateOpts } from '../types/module'
 import {
   addTemplate,
   addErrorLayout,
@@ -14,102 +11,78 @@ import {
 import { installModule } from './install'
 
 /** Legacy ModuleContainer for backwards compatibility with existing Nuxt 2 modules. */
-export class ModuleContainer {
+export function createModuleContainer (nuxt: Nuxt) {
-  nuxt: Nuxt
+  return {
-  options: NuxtOptions
+    nuxt,
+    options: nuxt.options,
 
-  constructor (nuxt: Nuxt) {
+    /**
-    this.nuxt = nuxt
+     * Returns a resolved promise immediately.
-    this.options = nuxt.options
+     *
-  }
+     * @deprecated
+     */
+    ready () {
+      return Promise.resolve()
+    },
 
-  private _call<F extends (...args: any) => any>(fn: F, ...args: Parameters<F>): ReturnType<F> {
+    /** @deprecated */
-    // @ts-ignore
+    addVendor () {
-    return nuxtCtx.call(this.nuxt, () => fn(...args))
+      console.warn('addVendor has been deprecated and has no effect.')
-  }
+    },
 
-  /**
+    /**
-   * Returns a resolved promise immediately.
+     * Renders given template using lodash template during build into the project buildDir (`.nuxt`).
-   *
+     *
-   * @deprecated
+     * If a fileName is not provided or the template is string, target file name defaults to
-   */
+     * [dirName].[fileName].[pathHash].[ext].
-  ready () {
+     */
-    return Promise.resolve()
+    addTemplate,
-  }
 
-  /** @deprecated */
+    /**
-  addVendor () {
+     * Registers a plugin using `addTemplate` and prepends it to the plugins[] array.
-    console.warn('addVendor has been deprecated and has no effect.')
+     *
-  }
+     * Note: You can use mode or .client and .server modifiers with fileName option
+     * to use plugin only in client or server side.
+     *
+     * If you choose to specify a fileName, you can configure a custom path for the
+     * fileName too, so you can choose the folder structure inside .nuxt folder in
+     * order to prevent name collisioning:
+     *
+     * @example
+     * ```js
+     * this.addPlugin({
+     *   src: path.resolve(__dirname, 'templates/foo.js'),
+     *   fileName: 'foo.server.js' // [optional] only include in server bundle
+     * })
+     * ```
+     */
+    addPlugin,
 
-  /**
+    /** Register a custom layout. If its name is 'error' it will override the default error layout. */
-   * Renders given template using lodash template during build into the project buildDir (`.nuxt`).
+    addLayout,
-   *
-   * If a fileName is not provided or the template is string, target file name defaults to
-   * [dirName].[fileName].[pathHash].[ext].
-   */
-  addTemplate (tmpl: TemplateOpts | string) {
-    return this._call(addTemplate, tmpl)
-  }
 
-  /**
+    /**
-   * Registers a plugin using `addTemplate` and prepends it to the plugins[] array.
+     * Set the layout that will render Nuxt errors. It should already have been added via addLayout or addTemplate.
-   *
+     *
-   * Note: You can use mode or .client and .server modifiers with fileName option
+     * @param dst - Path to layout file within the buildDir (`.nuxt/<dst>.vue`)
-   * to use plugin only in client or server side.
+     */
-   *
+    addErrorLayout,
-   * If you choose to specify a fileName, you can configure a custom path for the
-   * fileName too, so you can choose the folder structure inside .nuxt folder in
-   * order to prevent name collisioning:
-   *
-   * @example
-   * ```js
-   * this.addPlugin({
-   *   src: path.resolve(__dirname, 'templates/foo.js'),
-   *   fileName: 'foo.server.js' // [optional] only include in server bundle
-   * })
-   * ```
-   */
-  addPlugin (tmpl: PluginTemplateOpts) {
-    return this._call(addPlugin, tmpl)
-  }
 
-  /** Register a custom layout. If its name is 'error' it will override the default error layout. */
+    /** Adds a new server middleware to the end of the server middleware array. */
-  addLayout (tmpl: TemplateOpts, name: string) {
+    addServerMiddleware,
-    return this._call(addLayout, tmpl, name)
-  }
 
-  /**
+    /** Allows extending webpack build config by chaining `options.build.extend` function. */
-   * Set the layout that will render Nuxt errors. It should already have been added via addLayout or addTemplate.
+    extendBuild,
-   *
-   * @param dst - Path to layout file within the buildDir (`.nuxt/<dst>.vue`)
-   */
-  addErrorLayout (dst: string) {
-    return this._call(addErrorLayout, dst)
-  }
 
-  /** Adds a new server middleware to the end of the server middleware array. */
+    /** Allows extending routes by chaining `options.build.extendRoutes` function. */
-  addServerMiddleware (middleware) {
+    extendRoutes,
-    return this._call(addServerMiddleware, middleware)
-  }
 
-  /** Allows extending webpack build config by chaining `options.build.extend` function. */
+    /** `requireModule` is a shortcut for `addModule` */
-  extendBuild (fn) {
+    requireModule: installModule,
-    return this._call(extendBuild, fn)
-  }
 
-  /** Allows extending routes by chaining `options.build.extendRoutes` function. */
+    /** Registers a module. moduleOpts can be a string or an array ([src, options]). */
-  extendRoutes (fn) {
+    addModule: installModule
-    return this._call(extendRoutes, fn)
-  }
-
-  /** `requireModule` is a shortcut for `addModule` */
-  requireModule (moduleOpts: string | [src: string, options: any]) {
-    return installModule(this.nuxt, moduleOpts)
-  }
-
-  /** Registers a module. moduleOpts can be a string or an array ([src, options]). */
-  addModule (moduleOpts: string | [src: string, options: any]) {
-    return installModule(this.nuxt, moduleOpts)
   }
 }
+
+export type ModuleContainer = ReturnType<typeof createModuleContainer>

packages/kit/src/module/install.ts

@@ -3,7 +3,7 @@ import { resolveAlias } from '../utils/resolve'
 import type { LegacyNuxtModule, NuxtModule, ModuleMeta, ModuleInstallOptions, ModuleOptions, ModuleSrc } from '../types/module'
 import type { Nuxt } from '../types/nuxt'
 import { defineNuxtModule } from './define'
-import { ModuleContainer } from './container'
+import { createModuleContainer } from './container'
 
 /** Installs a module on a Nuxt instance. */
 export async function installModule (nuxt: Nuxt, installOpts: ModuleInstallOptions) {
@@ -57,6 +57,6 @@ export async function installModule (nuxt: Nuxt, installOpts: ModuleInstallOptio
   }
 
   // Execute in legacy container
-  const container = new ModuleContainer(nuxt)
+  const container = createModuleContainer(nuxt)
   await handler.call(container, options)
 }