Skip to content

Production build with directories marked with isAsync: false imports components asynchronously #243

@gtnsimon

Description

@gtnsimon

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:

  • const isAsync = (fileName.endsWith('.async') ? true : dirIsAsync) || null

    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.

  • if (c.isAsync === true || (!isDev /* prod fallback */ && c.isAsync === null)) {

    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.

  • allow setting directory isAsync = false in options #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 😊

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions