Nuxt Generate failure due to invalid alias setting
aimeb1 opened this issue · 1 comments
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)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);