Production build with directories marked with `isAsync: false` imports components asynchronously
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:
- Clone repository https://github.com/gtnsimon/codesandbox-nuxt
- Go to the branch
bug/non-async-components - Run
yarnthenyarn run build - Open generated file
.nuxt/components/index.jsFirst 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
nullwhen file doesn't contains .async anddirIsAsyncis nottrue. Settingsfalsewill be replaced tonull. -
https://github.com/nuxt/components/blob/86ab5e0b508186f647c3d79ac4a4cc67cae11f19/templates/components/index.js#L7 This condition is met because I'm running a production build and
isAsyncis nownullbecause replaced by the above code so it use theasyncImportsyntax defined. -
#239 seems to address the issue but I don't know about changing
nulltotrue.
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 😊
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`
/* ... */
}
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 😭