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

packed UI component don't tigger onMount life hooks #4563

Closed
cloudfroster opened this issue Mar 16, 2020 · 3 comments
Closed

packed UI component don't tigger onMount life hooks #4563

cloudfroster opened this issue Mar 16, 2020 · 3 comments

Comments

@cloudfroster
Copy link

Describe the bug
A clear and concise description of what the bug is.

when use packed UI component, the UI component's children component's onMount life hooks do
not tigger.

Logs
Please include browser console and server logs around the time this bug occurred.

To Reproduce
To help us help you, if you've found a bug please consider the following:
button.svelte

<div>button</div>

<script>
import { onMount } from 'svelte'

// [bug] don't tigger
onMount(() => {
  console.log('mount button')
})
</script>

red-button.svelte

<div>
  <Button></Button>
</div>

<script>
import { onMount } from 'svelte'

// will tigger
onMount(() => {
  console.log('mount red button')
})
</script>

index.js

import RedButton from './red-button.svelte'

export default RedButton

when use rollup to pack the RedButton to npm package. other user use the component,
the red component's button will not trigger onMount.

see source:

https://github.com/cloudfroster/svelte-build-component

git clone then npm install,just run npm run dev.

image

  • If you can demonstrate the bug using https://svelte.dev/repl, please do.
  • If that's not possible, we recommend creating a small repo that illustrates the problem.
  • Reproductions should be small, self-contained, correct examples – http://sscce.org.

Occasionally, this won't be possible, and that's fine – we still appreciate you raising the issue. But please understand that Svelte is run by unpaid volunteers in their free time, and issues that follow these instructions will get fixed faster.

Expected behavior
A clear and concise description of what you expected to happen.

Stacktraces
If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Stack trace

Stack trace goes here...

Information about your Svelte project:

  • Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)

  • Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)

  • Svelte version (Please check you can reproduce the issue with the latest release!)

  • Whether your project uses Webpack or Rollup

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Note: the more honest and specific you are here the more we will take you seriously.

Additional context
Add any other context about the problem here.

@Conduitry
Copy link
Member

This sounds like the issue that was being pursued in #3671 - that basically you shouldn't use a fully compiled and bundled Svelte component inside of another Svelte app because having two copies of Svelte's internal scheduler breaks things.

@cloudfroster
Copy link
Author

node_modules package i use external svelte, the onMount will trigger ,but the call order is not correct.
it will call

mount F
mount E
mount app
mount B
mount C

expect order

mount B
mount C
mount F
mount E
mount app

you can reproduct in https://github.com/cloudfroster/svelte-build-component

@cloudfroster
Copy link
Author

cloudfroster commented Mar 18, 2020

ok i fixed it, must external 'svelte/internal'.

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

2 participants