Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
gtnsimon opened this issue Dec 10, 2021 · 2 comments

Comments

@gtnsimon
Copy link

gtnsimon commented Dec 10, 2021

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 😊

@hipop
Copy link

hipop commented Jul 22, 2022

This problem still exists (22/07/2022)

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

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`

  /* ... */
}

@TerkaPrzemyslaw1897
Copy link

TerkaPrzemyslaw1897 commented Aug 4, 2023

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 😭

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants