components icon indicating copy to clipboard operation
components copied to clipboard

Production build with directories marked with `isAsync: false` imports components asynchronously

Open gtnsimon opened this issue 4 years ago • 2 comments

Describe the bug

Components imported using nuxt/components with isAsync option set to false are imported asynchronously when building for production using nuxt build.

To Reproduce Steps to reproduce the behavior:

  1. Clone repository https://github.com/gtnsimon/codesandbox-nuxt
  2. Go to the branch bug/non-async-components
  3. Run yarn then yarn run build
  4. Open generated file .nuxt/components/index.js First line is:
export const Tutorial = () => import('../../components/Tutorial.vue' /* webpackChunkName: "components/tutorial" */).then(c => wrapFunctional(c.default || c))

Expected behavior

Generated file .nuxt/components/index.js should import components synchronously.

In development when we run Nuxt using yarn run dev the first line is a synchronous import which is expected as directory options explicitly set isAsync: false:

export { default as Tutorial } from '../../components/Tutorial.vue'

Additional context

I'm running nuxt v2.15.8 which embeds @nuxt/components v2.1.8 and above (v2.2.1 when I check installed node_modules).

While trying to debug I found code which may cause the issue:

  • https://github.com/nuxt/components/blob/86ab5e0b508186f647c3d79ac4a4cc67cae11f19/src/scan.ts#L42 Ternary operator will always fallback to null when file doesn't contains .async and dirIsAsync is not true. Settings false will be replaced to null.

  • https://github.com/nuxt/components/blob/86ab5e0b508186f647c3d79ac4a4cc67cae11f19/templates/components/index.js#L7 This condition is met because I'm running a production build and isAsync is now null because replaced by the above code so it use the asyncImport syntax defined.

  • #239 seems to address the issue but I don't know about changing null to true.

My nuxt.config.js
export default {
  /* ... */
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: [ { path: '~/components', isAsync: false } ], // custom options with `isAsync: false`

  /* ... */
}

Merci 😊

gtnsimon avatar Dec 10 '21 16:12 gtnsimon

This problem still exists (22/07/2022)

https://github.com/nuxt/components/blob/86ab5e0b508186f647c3d79ac4a4cc67cae11f19/src/scan.ts#L42

I used string type to bypass this bug

export default {
  /* ... */
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: [ { path: '~/components', isAsync: 'false' } ], // custom options with `isAsync: false`

  /* ... */
}

hipop avatar Jul 22 '22 08:07 hipop

This is still the case, after almost 2 years one of the core functionality of this plugin still doesn't work... I spent almost 8 hours to figure out why parent components mount earlier than child components, and now I find out that I have to stop using this plugin because of this bug 😭

TerkaPrzemyslaw1897 avatar Aug 04 '23 14:08 TerkaPrzemyslaw1897