-
-
Notifications
You must be signed in to change notification settings - Fork 44
Description
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.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:
-
Line 42 in 86ab5e0
const isAsync = (fileName.endsWith('.async') ? true : dirIsAsync) || null
Ternary operator will always fallback tonullwhen file doesn't contains .async anddirIsAsyncis nottrue. Settingsfalsewill be replaced tonull. -
if (c.isAsync === true || (!isDev /* prod fallback */ && c.isAsync === null)) {
This condition is met because I'm running a production build andisAsyncis nownullbecause replaced by the above code so it use theasyncImportsyntax defined. -
allow setting directory isAsync = false in options #239
seems to address the issue but I don't know about changingnulltotrue.
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 😊