Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nuxi preview/start (using kit's loadNuxtConfig) not resolving installed nuxt modules, ends up with partial config #804

Open
RaphaelDDL opened this issue Mar 20, 2025 · 0 comments

Comments

@RaphaelDDL
Copy link

RaphaelDDL commented Mar 20, 2025

Hello,

We currently have an issue running nuxi's preview/start due to how we setup the config, as preview uses loadNuxtConfig from @nuxt/kit instead of loadNuxt. Let me explain the use case:

We got a number of Vue apps which we created a base config that all of them follow (includes server things, Vue defaults as router and vuex, test configuration, app configuration, and so on).

When planning to move them to Nuxt, our idea was to create a Nuxt Module project which will be installed in every project, and it'll provide our base configurations for all apps.

setup

"cool-nuxt-config" project:

    export default defineNuxtModule({
        async setup(_options, _nuxt) {
            const ourCoolDistFolder = 'dist/nested/folder/dont/ask/me/why';

            // various nuxt.config.ts "base" configurations here
            // such as nitro, vite, app.head, etc
            const baseConfig = {
                nitro: {
                    output: {
                        dir: ourCoolDistFolder,
                        serverDir: `${ourCoolDistFolder}/server`,
                        publicDir: `${ourCoolDistFolder}/public`,
                    },
                },
                (..etcetc..)
            };

            // more code like installModule for nuxt-primevue, for e.g., and so on
            (..etcetc..)


            // using defu, we make sure our config has priority when merging app's own configs
            _nuxt.options = defu(baseConfig, _nuxt.options)
        }
    });

And later, we install it as a module in the App nuxt.config.ts:

    export default defineNuxtConfig({
        nitro: {
            // fake test prop explained below
            testexample: 'value'
        },

        modules: [
            'cool-nuxt-config'
        ],
    });

When running nuxi build, it's all good. Build uses kit's loadNuxt ( source ), which also resolves modules too, so that nuxt.options will contain our nitro options, that is, nuxt.options.nitro.output.dir will reflect our ourCoolDistFolder and will create the built project into the path we chose instead of .output.

The issue

Different than the build, preview on the other hand uses kit's loadNuxtConfig ( source ) which does NOT evaluate/run modules installed. That means our module's setup is never called, which means config.nitro.testexample (from root's nuxt.config.ts, as I showed on code excerpt above) is defined, but config.nitro.output.dir is not defined since modules were not run. that entails in resolvedOutputDir ALWAYS resolving into ./.output/nitro.json (excerpt below):

    const resolvedOutputDir = resolve(
      config.srcDir || cwd,
      config.nitro.output?.dir || '.output',
      'nitro.json',
    )

I tried giving cwd our path just to test, but doesn't matter because the second argument in resolve is config.nitro.output?.dir || '.output', and is always resolving into .output since config.nitro.output.dir is not defined. And this means preview never works, because it always dies on the message:

"Cannot find nitro.json. Did you run nuxi build first?"

I did a test and changing

    const { loadNuxtConfig } = await loadKit(cwd)
    const config = await loadNuxtConfig({
      cwd,
      envName: ctx.args.envName, // c12 will fall back to NODE_ENV
      overrides: /* ctx.options?.overrides || */ {},
    })

to

    const { loadNuxt } = await loadKit(cwd)
    const nuxt = await loadNuxt({
      cwd,
      envName: ctx.args.envName, // c12 will fall back to NODE_ENV
      overrides: /* ctx.options?.overrides || */ {},
    })
    const config = nuxt.options

makes it so preview can now properly find nitro.json using the module's nitro.output.dir configuration.

questions

  • Is there any reason why preview uses loadNuxtConfig instead of loadNuxt? That prevents Nuxt Modules and Layers configs from being applied, which, in this user case I presented, brings nitro and other configurations.
  • Is it okay to open a PR with the change I mentioned above to loadNuxt instead?
  • Do you see any other way to keep shared configuration across multiple Nuxt projects other than the one we thought, using Nuxt Module instead? (though we thought that's the point of Module :D )

Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant