Skip to content

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

Open
@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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions