Nuxt Generate failure due to invalid alias setting

[aimeb1]

Environment

OS: Windows-WSL2-Ubuntu 22.04 Node: 14.17 Docker Image: FROM mcr.microsoft.com/devcontainers/javascript-node:14 Project Version: V1.5.0 https://github.com/vuestorefront-community/spree Package Manager: yarn Builders: webpack,babel,rollup

User Config:

target: 'static', // ssr: true,

buildModules: [ ['@vue-storefront/nuxt-theme', { routes: false, generate: { replace: { apiClient: '@vue-storefront/spree-api', composables: '@vue-storefront/spree' } } }]

router: {

extendRoutes(routes, resolve) {
  routes.splice(0, routes.length);
  // routes.push(...getRoutes());
  routes.push({
    name: 'custom',
    path: '*',
    component: resolve(__dirname, '_theme/pages/HomePre.vue')
  })
}

},

generate: { crawler: false, routes: ['/HomePre'] }

Runtime Modules: @vue-storefront/nuxt nuxt-i18n cookie-universal-nuxt vue-scrollto/nuxt @vue-storefront/middleware/nuxt

Build Modules: @nuxtjs/composition-api/module @nuxt/typescript-build @nuxtjs/google-fonts nuxtjs/pwa @nuxtjs/style-resources @vue-storefront/spree/nuxt @vue-storefront/nuxt @vue-storefront/nuxt-theme

Reproduction

Using V1.5.0 from V1.5.0 https://github.com/vuestorefront-community/spree along with nuxt config changes above. I modified root package.json scripts to include a generate command:

"scripts": { "generate": "yarn build:api-client && yarn build:composables && yarn generate:theme", "generate:theme": "cd packages/theme && yarn generate",

I run 'yarn generate' and get the following in the log which seems 'ok' except maybe for the warning that @vue-storefront/nuxt should only be specified once (it is included in both the Modules and Build Modules).

ℹ VSF Starting Vue Storefront Nuxt Module 16:20:29 ✔ VSF Installed Vue Storefront Context plugin 16:20:29 ✔ VSF Installed Vue Storefront SSR plugin 16:20:29 ✔ VSF Installed VSF Logger plugin 16:20:29 ✔ VSF Installed Vue Storefront E2E testing plugin 16:20:29 ✔ VSF Installed Internationalization Cookies plugin 16:20:29 ✔ VSF Installed StorefrontUI Module 16:20:29 ✔ VSF Installed Performance Module 16:20:29 ℹ VSF Using raw source/ESM for @vue-storefront/spree 16:20:29 ℹ VSF Using raw source/ESM for @vue-storefront/core 16:20:29 ℹ VSF Using raw source/ESM for @storefront-ui/vue 16:20:29 ℹ VSF Using raw source/ESM for @storefront-ui/shared 16:20:29 ℹ VSF Starting Theme Module 16:20:29 ℹ VSF Watching changes in @vue-storefront/nuxt-theme-module and used platform theme directory ℹ VSF Adding theme files... 16:20:29

WARN Modules should be only specified once: @vue-storefront/nuxt 16:20:29

ℹ VSF Starting Vue Storefront Nuxt Module 16:20:29 ✔ VSF Installed Vue Storefront Context plugin 16:20:29 ✔ VSF Installed Vue Storefront SSR plugin 16:20:29 ✔ VSF Installed VSF Logger plugin 16:20:29 ✔ VSF Installed Vue Storefront E2E testing plugin 16:20:29 ✔ VSF Installed Internationalization Cookies plugin 16:20:29 ✔ VSF Installed StorefrontUI Module 16:20:29 ✔ VSF Installed Performance Module 16:20:29 ℹ VSF Using raw source/ESM for @storefront-ui/vue 16:20:29 ℹ VSF Using raw source/ESM for @storefront-ui/shared 16:20:29 ✔ VSF Added 58 theme file(s) to _theme folder 16:20:29 ℹ Middleware starting.... 16:20:30 ℹ Loading integrations... 16:20:30 ℹ - Loading: spree @vue-storefront/spree-api/server 16:20:30 ✔ - Integration: spree init function Start! 16:20:30 ✔ - Integration: spree init function Done! 16:20:30 ℹ - Loading: spree extension: tokenExtension 16:20:30 ✔ - Integration: spree loaded! 16:20:30 ✔ Integrations loaded! 16:20:30 ✔ Middleware created! 16:20:30 ℹ Production build 16:20:31 ℹ Bundling for server and client side 16:20:31 ℹ Target: static 16:20:31 ✔ Builder initialized 16:20:31 ✔ Nuxt files generated 16:20:32

Describe the bug

The errors in the console come during the build step of the yarn generate command. I included only the 1st 'Module not found' error in the log below although there are many others.

Additional context

After some debugging I noticed the error seems to come down to a bad definition of the ~ alias. The imports in the default.vue layout references this alias: import AppFooter from '~/components/AppFooter.vue';

The generate.js file from @vue-storefront/nuxt-theme defines these aliases:

  this.extendBuild((config) => {
    delete config.resolve.alias['~'];
    config.resolve.alias['~/middleware'] = path.join(projectLocalThemeDir, path.sep + 'middleware');
    config.resolve.alias['~/components'] = path.join(projectLocalThemeDir, path.sep + 'components');
    config.resolve.alias['~/assets'] = path.join(projectLocalThemeDir, path.sep + 'assets');
    config.resolve.alias['~'] = path.join(projectLocalThemeDir);
  });

However, the projectLocalThemeDir variable has a value of: "/app/packages/theme/node_modules/.cache/nuxt"

This directory does not contain the AppFooter.vue. Shouldn't this variable be set to: "/app/packages/theme"?

Logs

✖ Client
  Compiled with some errors in 2.50m

◯ Server

Hash: 841c6ee3096dce0e5bd7
Version: webpack 4.46.0
Time: 150056ms
Built at: 11/07/2023 4:23:05 PM
                              Asset      Size  Chunks               Chunk Names
                         1860f5b.js  2.33 KiB       2  [immutable]  runtime
                         1c35cc3.js   304 KiB       3  [immutable]  vendors/app
                         3e9cb0d.js   155 KiB       4  [immutable]  
                         5dacf3e.js  19.5 KiB       5  [immutable]  
                         5fa6669.js  5.13 KiB       7  [immutable]  
                         9374600.js   112 KiB       0  [immutable]  app
                           LICENSES  1.93 KiB                       
                         a8af1e3.js  4.05 KiB       6  [immutable]  
                         fbc4d41.js   259 KiB       1  [immutable]  commons/app
          img/layers-2x.8f2c4d1.png  1.23 KiB          [immutable]  
        img/marker-icon.2b3e1fa.png  1.43 KiB          [immutable]  
img/product_placeholder.6d9cbdf.svg  1.54 KiB          [immutable]  
Entrypoint app = 1860f5b.js fbc4d41.js 1c35cc3.js 9374600.js

ERROR in ./_theme/layouts/default.vue?vue&type=script&lang=js& (/app/node_modules/babel-loader/lib??ref--2-0!/app/node_modules/vue-loader/lib??vue-loader-options!/app/node_modules/unplugin/dist/webpack/loaders/transform.js??ref--14-0!./_theme/layouts/default.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '~/components/AppFooter.vue' in '/app/packages/theme/_theme/layouts'
 @ ./_theme/layouts/default.vue?vue&type=script&lang=js& (/app/node_modules/babel-loader/lib??ref--2-0!/app/node_modules/vue-loader/lib??vue-loader-options!/app/node_modules/unplugin/dist/webpack/loaders/transform.js??ref--14-0!./_theme/layouts/default.vue?vue&type=script&lang=js&) 31:0-51 48:15-24
 @ ./_theme/layouts/default.vue?vue&type=script&lang=js&
 @ ./_theme/layouts/default.vue
 @ ./node_modules/.cache/nuxt/App.js
 @ ./node_modules/.cache/nuxt/index.js
 @ ./node_modules/.cache/nuxt/client.js
 @ multi ./node_modules/.cache/nuxt/composition-api/register.js ./node_modules/.cache/nuxt/client.js
.
.
.

 FATAL  Nuxt build error                                                      16:23:05

  at WebpackBundler.webpackCompile (/app/node_modules/@nuxt/webpack/dist/webpack.js:2127:21)
  at processTicksAndRejections (internal/process/task_queues.js:95:5)
  at async WebpackBundler.build (/app/node_modules/@nuxt/webpack/dist/webpack.js:2076:5)
  at async Builder.build (/app/node_modules/@nuxt/builder/dist/builder.js:327:5)
  at async ensureBuild (/app/node_modules/@nuxt/cli/dist/cli-generate.js:144:3)
  at async Object.run (/app/node_modules/@nuxt/cli/dist/cli-generate.js:282:7)
  at async NuxtCommand.run (/app/node_modules/@nuxt/cli/dist/cli-index.js:413:7)

[aimeb1]

Making this change to index.js appears to fix the issue:

  // const projectLocalThemeDir = this.options.buildDir.replace('.nuxt', targetDirectory);
  const path = require('path');
  const projectLocalThemeDir = path.join(this.options.rootDir, path.sep + targetDirectory);