NUXT project cannot build

Question

I am writing an admin panel on the nuxt + nest stack.
I'm using this template: https://github.com/stephsalou/nuxt-nest-template

In dev mode, the project starts normally, but I just want to build and errors appear right away. This file is 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))

I found the reason for this error. In the components folder there is index.ts which collects all the components and from this file I already take the components that I need. ** Nuxt enters the component folder and considers all files as components, and collects them all in one form. ** These components are taken from the admin template, I cannot remove index.ts, because it is used a lot and it will break everything. There was a similar error on dev mode, but changing index.js to index.ts helped.

How can this problem be solved??

Nuxt Config

const config: NuxtConfig = {
  // Disabled 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

score 1 · Accepted Answer · answered Sep 29 '21 at 14:07

Why do you import all the components if you already have the auto-importing by Nuxt?
Either use one or the other. Or you could exclude a specific one with something like this in your nuxt.config.js file

components: [
  {
    path: '~/components/',
    pathPrefix: false,
    pattern: `**/*.{vue,js,ts}`,
    ignore: ["~/components/index.ts"]
  }
]

Not sure if you do actually use TS or not, but the default fetches .vue and .js files.

pathPrefix is useful if you want to grab all the components, even the nested ones, as shown here.

Use ignore to just not import the index one.

At the end, giving a read to this tutorial may be useful to see if you can let components: true or make some modifications to the default behavior as explained above: https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components/

NUXT project cannot build

1 Answers1