I am currently working on an admin panel using the nuxt + nest stack.
I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template
While in development mode, the project starts up without any issues. However, when I try to build it, errors pop up immediately. The problem seems to be with a file compiled by nuxt itself.
11 | export const LoadingPanel = () => import('../../client/components/LoadingPanel.vue' /* webpackChunkName: "components/loading-panel" */).then(c => wrapFunctional(c.default || c))
12 | export const Modal = () => import('../../client/components/Modal.vue' /* webpackChunkName: "components/modal" */).then(c => wrapFunctional(c.default || c))
> 13 | export const = () => import('../../client/components/index.ts' /* webpackChunkName: "components/" */).then(c => wrapFunctional(c.default || c))
| ^
14 | export const Breadcrumb = () => import('../../client/components/Breadcrumb/Breadcrumb.vue' /* webpackChunkName: "components/breadcrumb" */).then(c => wrapFunctional(c.default || c))
15 | export const BreadcrumbItem = () => import('../../client/components/Breadcrumb/BreadcrumbItem.vue' /* webpackChunkName: "components/breadcrumb-item" */).then(c => wrapFunctional(c.default || c))
16 | export const BreadcrumbRouteBreadcrumb = () => import('../../client/components/Breadcrumb/RouteBreadcrumb.vue' /* webpackChunkName: "components/breadcrumb-route-breadcrumb" */).then(c => wrapFunctional(c.default || c))
Upon investigation, I discovered the root cause of this error. It appears that in the components folder, there is an index.ts file that collects all the components. Nuxt seems to interpret all files within the component folder as components and combines them into one form. These components are crucial to the admin template, and removing the index.ts file could potentially break the entire setup. A similar issue occurred in development mode, but converting index.js to index.ts resolved it.
How can I go about solving this problem?
Nuxt Configuration
const config: NuxtConfig = {
// Disabling nuxt telemetry
telemetry: false,
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
// base nuxt src dir
srcDir: './client',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: 'Admin Products SeaRates',
meta: [
{charset: 'utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800'},
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'}
]
},
router: {
linkExactActiveClass: 'active'
},
/*
** Global CSS
*/
css: [
'@/assets/scss/index.scss',
'@/assets/css/demo.css',
'@/assets/css/nucleo-icons.css'
],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
`@/plugins/dashboard-plugin.js`
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxt/typescript-build',
],
netlify: {
headers: {
'/*': [
'Access-Control-Allow-Origin: *',
`X-Build: ${pkg.version}`
],
'/favicon.ico': [
'Cache-Control: public, max-age=86400'
]
}
},
/*
** Nuxt.js modules
*/
modules: [
'@nuxtjs/axios',
'@nuxtjs/pwa',
'@nuxt/content',
'cookie-universal-nuxt'
],
publicRuntimeConfig: {
axios: {
baseURL: `${url}/api`
}
},
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Content module configuration
** See https://content.nuxtjs.org/configuration
*/
content: {},
loading: { color: '#389466' },
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
},
alias: {
"@/*": resolve(__dirname, './client'),
}
}
export default config