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
yarn
thenyarn 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
Ternary operator will always fallback tonull
when file doesn't contains .async anddirIsAsync
is nottrue
. Settingsfalse
will be replaced tonull
. -
This condition is met because I'm running a production build andisAsync
is nownull
because replaced by the above code so it use theasyncImport
syntax defined. -
allow setting directory isAsync = false in options #239
seems to address the issue but I don't know about changingnull
totrue
.
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 😊