Nuxt•9mo ago

Installing module from npm causes does not provide an export named 'default' issue

Hello! First of all here is the error:

The requested module '/_nuxt/node_modules/.pnpm/[email protected]/node_modules/debug/src/browser.js?v=f2a9d9a8' does not provide an export named 'default'

The requested module '/_nuxt/node_modules/.pnpm/[email protected]/node_modules/debug/src/browser.js?v=f2a9d9a8' does not provide an export named 'default'

I'm trying to create the nuxt module for Scalar API References. You can find the code for the module here: https://github.com/scalar/scalar/tree/main/packages/nuxt. It works fine in the playground and when I'm testing. However when I either use pnpm pack or release the package to NPM and install it a fresh Nuxt app, it gives me this error. Also the error does not exist in prod, its only in development. I looked into the debug package and it does not support esm at all. Now I'm not sure how its working in the playground, not to mention in the countless esm apps the depend on it. Am I missing something in the build config? I tried with and without that transpiling and it has the same issue. Also I have been manually releasing to npm as well as testing with pnpm pack, our CI isn't setup for nuxt modules quite yet.

3 Replies

AmritOP•9mo ago

Adding the module code here:

import {
  addComponent,
  addPlugin,
  createResolver,
  defineNuxtModule,
  extendPages,
} from '@nuxt/kit'

import type { Configuration } from './types'

// Module options TypeScript interface definition
export type ModuleOptions = Configuration

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: '@scalar/nuxt',
    configKey: 'scalarConfig',
  },
  // Default configuration options of the Nuxt module
  defaults: {
    darkMode: true,
    metaData: {
      title: 'API Documentation by Scalar',
    },
    pathRouting: {
      basePath: '/scalar',
    },
    showSidebar: true,
  },
  setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)
    let isOpenApiEnabled = false

    // Ensure we transpile api-reference css
    _nuxt.options.build.transpile.push('@scalar/api-reference')

    // Also check for Nitro OpenAPI auto generation
    _nuxt.hook('nitro:config', (config) => {
      if (config.experimental?.openAPI) isOpenApiEnabled = true
    })

    // Load the component so it can be used directly
    addComponent({
      name: 'ScalarApiReference',
      export: 'default',
      filePath: resolver.resolve('./runtime/components/ScalarApiReference.vue'),
    })

    // Add the route for the docs
    extendPages((pages) => {
      pages.push({
        name: 'scalar',
        path: _options.pathRouting?.basePath + ':pathMatch(.*)*',
        meta: {
          configuration: _options,
          isOpenApiEnabled,
        },
        file: resolver.resolve('./runtime/pages/ScalarPage.vue'),
      })
    })

    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    addPlugin(resolver.resolve('./runtime/plugins/hydrateClient'))
  },
})

import {
  addComponent,
  addPlugin,
  createResolver,
  defineNuxtModule,
  extendPages,
} from '@nuxt/kit'

import type { Configuration } from './types'

// Module options TypeScript interface definition
export type ModuleOptions = Configuration

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: '@scalar/nuxt',
    configKey: 'scalarConfig',
  },
  // Default configuration options of the Nuxt module
  defaults: {
    darkMode: true,
    metaData: {
      title: 'API Documentation by Scalar',
    },
    pathRouting: {
      basePath: '/scalar',
    },
    showSidebar: true,
  },
  setup(_options, _nuxt) {
    const resolver = createResolver(import.meta.url)
    let isOpenApiEnabled = false

    // Ensure we transpile api-reference css
    _nuxt.options.build.transpile.push('@scalar/api-reference')

    // Also check for Nitro OpenAPI auto generation
    _nuxt.hook('nitro:config', (config) => {
      if (config.experimental?.openAPI) isOpenApiEnabled = true
    })

    // Load the component so it can be used directly
    addComponent({
      name: 'ScalarApiReference',
      export: 'default',
      filePath: resolver.resolve('./runtime/components/ScalarApiReference.vue'),
    })

    // Add the route for the docs
    extendPages((pages) => {
      pages.push({
        name: 'scalar',
        path: _options.pathRouting?.basePath + ':pathMatch(.*)*',
        meta: {
          configuration: _options,
          isOpenApiEnabled,
        },
        file: resolver.resolve('./runtime/pages/ScalarPage.vue'),
      })
    })

    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    addPlugin(resolver.resolve('./runtime/plugins/hydrateClient'))
  },
})

AmritOP•9mo ago

You can check it out in a stackblits here https://stackblitz.com/edit/nuxt-starter-ej8m1z?file=package.json,nuxt.config.ts

StackBlitz

Nuxt Scalar API References Starter Amrit testing - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

AmritOP•9mo ago

So it looks like I need to use build.config.ts, though not quite sure what I'm missing here

import { defineBuildConfig } from "unbuild";

export default defineBuildConfig({
  stubOptions: { jiti: { debug: true, transformModules: ["debug"] } },
});

import { defineBuildConfig } from "unbuild";

export default defineBuildConfig({
  stubOptions: { jiti: { debug: true, transformModules: ["debug"] } },
});

if I set stub:true it works, but all my paths become hard paths from my machine. Is there any way to avoid that? Maybe this belongs under unjs? hmm maybe the issue is actually that vite is not optimizing this dependency Alright so I ended up placing it in the module.ts file setup function and it works!

    _nuxt.options.vite.optimizeDeps ||= {}
    _nuxt.options.vite.optimizeDeps.include ||= []

    // Ensure we transform these cjs dependencies, remove as they get converted to ejs
    _nuxt.options.vite.optimizeDeps.include.push('debug')

    _nuxt.options.vite.optimizeDeps ||= {}
    _nuxt.options.vite.optimizeDeps.include ||= []

    // Ensure we transform these cjs dependencies, remove as they get converted to ejs
    _nuxt.options.vite.optimizeDeps.include.push('debug')

Gaming

Programming

Installing module from npm causes does not provide an export named 'default' issue